<template>
  <div class="main">
    <div class="content">
      <div class="contentTop">
        <div class="top">
          <image class="couponIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/couponLogo.svg" />
          <span class="couponText">满减券</span>
        </div>
        <div class="topContent">
          <div class="first">
            <span class="nomarl">满</span>
            <span class="light">{{ couponMsg.WithAmount || "-" }}</span>
            <span class="nomarl">减</span>
            <span class="light">{{ couponMsg.UseAmount || "-" }}</span>
          </div>
          <div class="second">
            {{
              couponMsg.WithAmount == 0
                ? "无门槛使用"
                : "订单满" + (couponMsg.WithAmount || "-") + "可用"
            }}
          </div>
        </div>
      </div>

      <div class="noticeBox">
        <div class="noticeTitle">
          <image class="noticeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/noticeIcon.svg" />
          <span class="noticeText">领取说明</span>
        </div>
        <div class="noticeItem">
          <div class="noticeLabel">领取时间</div>
          <div class="noticeValue">截止：{{ couponMsg.EndTime || "-" }}</div>
        </div>
        <div class="noticeItem">
          <div class="noticeLabel">使用说明</div>
          <div class="noticeValue">
            {{
              couponMsg.CouponInstructions ||
              "该券适用于部分商品，详询店内工作人员"
            }}
          </div>
        </div>
        <div class="noticeItem">
          <div class="noticeLabel">适用门店</div>
          <div
            class="noticeValue"
            v-if="
              couponMsg.ServerpartList && couponMsg.ServerpartList.length > 0
            "
          >
            <span
              v-for="(item, index) in couponMsg.ServerpartList"
              :key="index"
            >
              <template
                v-if="
                  item.ServerpartShopList && item.ServerpartShopList.length > 0
                "
              >
                <span
                  v-for="(subItem, subIndex) in item.ServerpartShopList"
                  :key="subIndex"
                  >{{ subItem.ServerpartShopName || "-"
                  }}{{
                    subIndex > 0 &&
                    subIndex !== item.ServerpartShopList.length - 1
                      ? "、"
                      : ""
                  }}</span
                >
              </template>
            </span>
          </div>
        </div>
      </div>

      <div class="btnBox">
        <div
          class="btn"
          :style="{
            background: couponMsg.takeState
              ? 'rgba(186, 146, 47, 1)'
              : 'rgba(186, 146, 47, 0.4)',
          }"
          @tap="getCoupon"
        >
          {{ couponMsg.takeState ? "立即领取" : "已领取" }}
        </div>
      </div>
    </div>
    <div class="pad95" v-if="false">
      <div class="coupon-box" v-show="isShow">
        <view class="coupon-type flex align-center">
          <image
            src="https://eshangtech.com/wanmeiyizhanImg/coupon/coupon-type.png"
            mode="aspectFill"
          ></image>
          <text>{{
            couponMsg.WithAmount == 0
              ? "无门槛优惠券"
              : couponMsg.CouponTypeText
          }}</text>
        </view>
        <div class="coupon-border"></div>
        <div class="coupon-title">{{ couponMsg.CouponName }}</div>
        <div class="coupon-price-box">
          {{
            couponMsg.WithAmount == 0
              ? "无门槛使用"
              : "订单满" + couponMsg.WithAmount + "可用"
          }}
        </div>
        <div class="coupon-des" v-if="couponMsg.PAY_METHOD === 2000">
          {{ couponMsg.COUPON_POINT }}积分兑换
        </div>
        <block v-if="!couponMsg.CouponSendId">
          <div
            v-if="!couponMsg.takeState"
            class="coupon-needed-button"
            @tap="getCoupon"
          >
            已领取
          </div>
          <div
            v-if="couponMsg.takeState"
            class="coupon-need-button"
            @tap="getCoupon"
          >
            立即领取
          </div>

          <view class="flex justify-between date-box">
            <view>领取时间至</view>
            <view>{{ couponMsg.EndTime }}</view>
          </view>
        </block>

        <block v-else>
          <div
            class="coupon-need-button"
            v-if="couponMsg.CouponState == 0"
            @tap="toUse"
          >
            去使用
          </div>
          <div class="coupon-used-tip" v-else>
            {{ couponMsg.CouponState == 1 ? "已使用" : "已过期" }}
          </div>
          <view class="flex justify-between date-box">
            <view>有效期限至</view>
            <view>{{ couponMsg.ValidEndTime }}</view>
          </view>
        </block>

        <view class="flex justify-between desc-box">
          <view>使用说明</view>
          <view class="desc-text">
            {{
              couponMsg.CouponInstructions ||
              "该券适用于部分商品，详询店内工作人员"
            }}
          </view>
        </view>
        <div class="use-shop">
          <view
            class="flex align-center justify-between"
            @tap="showShop = !showShop"
          >
            <view>适用门店</view>
            <view class="flex align-center">
              <!-- <text class="text-sm">查看</text> -->
              <van-icon
                :name="!showShop ? 'arrow' : 'arrow-down'"
                size="16"
                color="#7a7a7a"
              ></van-icon>
            </view>
          </view>
          <div class="list-box" v-show="showShop">
            <div
              v-for="(value, key) in couponMsg.ServerpartList"
              :key="key"
              class="list-unit"
            >
              <view class="severpart-title">{{ value.ServerpartName }}</view>
              <text
                v-for="(shop, i) in value.ServerpartShopList"
                :key="i"
                class="text-sm"
              >
                {{ shop.ServerpartShopName }}</text
              >
            </div>
          </div>
        </div>
      </div>
      <div v-if="isShow && !couponMsg.CouponName">
        <no-data
          :text="'没有此优惠券信息'"
          :isShow="isShow && !couponMsg.CouponName"
          type="0"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import couponList from '@/common/coupon.json'
import noData from "../../components/noData.vue";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      isShow: false,
      showShop: false,
      couponMsg: {
        CouponId: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  components: {
    noData,
  },
  methods: {
    ...mapMutations({
      setFresh: "refresh",
    }),
    toUse() {
      uni.redirectTo({
        url: "/pages/homeFn/payfor/index?cid=" + this.couponMsg.CouponSendId,
      });
    },
    getCoupon() {
      let _this = this;
      if (!_this.user.MEMBERSHIP_MOBILEPHONE) {
        uni.showModal({
          title: "温馨提示",
          content: "您还不是驿付会员，请去认证成为驿付会员",
          showCancel: true,
          cancelText: "知道了",
          cancelColor: "#000000",
          confirmText: "去注册",
          confirmColor: "#3CC51F",
          success: (result) => {
            if (result.confirm) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });

        return false;
      }
      _this.$api
        .$post("/WeChat/CouponSend", {
          couponId: this.couponMsg.CouponId,
        })
        .then(function (data) {
          if (data.Result_Code === 100) {
            uni.showToast({
              title: data.Result_Desc,
              icon: "none",
            });
          } else {
            _this.loadCoupon();
            uni.showToast({
              title: data.Result_Desc,
              icon: "none",
            });
          }
        });
    }, // 领用优惠券

    loadCoupon() {
      // 加载优惠券
      let _this = this;

      _this.$api
        .$get("/WeChat/GetCouponDetail", {
          couponId: this.couponMsg.CouponId,
          membershipId: this.user.MEMBERSHIP_ID,
        })
        .then(function (data) {
          if (data.Result_Code === 100) {
            _this.isShow = true;
            _this.couponMsg = data.Result_Data;
            console.log("_this.couponMsg", _this.couponMsg);
          }
        });
    },
    loadMycoupon() {
      // 加载我的优惠券
      let _this = this;
      _this.$api
        .$get("/WeChat/GetMemberCouponDetail", {
          CouponSendId: this.couponMsg.CouponSendId,
        })
        .then(function (data) {
          if (data.Result_Code === 100) {
            data.Result_Data.CouponSendId = _this.couponMsg.CouponSendId;
            _this.couponMsg = data.Result_Data;
            console.log("_this.couponMsg", _this.couponMsg);

            _this.isShow = true;
          }
        });
    },
  },
  onUnload() {
    this.isShow = false;
    this.showShop = false;
    this.couponMsg = {
      CouponId: "",
    };
  },

  onLoad(options) {
    console.log("options", options);
    // eslint-disable-next-line eqeqeq
    this.isShow = false;
    if (options.sendId) {
      // 是否是使用优惠券
      this.couponMsg.CouponSendId = options.sendId;
      this.loadMycoupon();
    } else {
      // 领取优惠券
      this.couponMsg.CouponId = options.id;
      this.loadCoupon();
    }
    console.log("this.user", this.user);
  },
  onShareAppMessage() {
    let _this = this;
    if (this.couponMsg.CouponId) {
      return {
        title: _this.couponMsg.CouponInstructions,
        path: "/pages/couponDetail/index?id=" + this.couponMsg.CouponId,
        imageUrl: "",
      };
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: #f6f7f8;
  box-sizing: border-box;
  padding: 32rpx;
  .content {
    width: 100%;
    height: 100%;
    .contentTop {
      width: 100%;
      height: 346rpx;
      background: #ffffff;
      margin-bottom: 32rpx;
      box-sizing: border-box;
      padding: 0 32rpx;
      .top {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 24rpx 0;
        border-bottom: 1px solid #f6f6f6;
        .couponIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
        .couponText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .topContent {
        width: 100%;
        box-sizing: border-box;
        padding: 64rpx 0;
        .first {
          display: flex;
          align-items: center;
          justify-content: center;
          .nomarl {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ba922f;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .light {
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 64rpx;
            color: #ba922f;
            line-height: 72rpx;
            text-align: left;
            font-style: normal;
            margin: 0 8rpx;
          }
        }
        .second {
          display: flex;
          justify-content: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ba922f;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }

    .noticeBox {
      width: 100%;
      box-sizing: border-box;
      padding: 36rpx 32rpx;
      background: #ffffff;
      border-radius: 6rpx;
      margin-top: 32rpx;
      .noticeTitle {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        .noticeIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
        .noticeText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .noticeItem {
        width: 100%;
        margin-bottom: 16rpx;
        display: flex;
        align-items: center;
        .noticeLabel {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-right: 16rpx;
          width: 120rpx;
        }
        .noticeValue {
          width: calc(100% - 120rpx);
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    .btnBox {
      position: fixed;
      bottom: 40rpx;
      left: 0;
      width: 100vw;
      box-sizing: border-box;
      padding: 16rpx 40rpx;
      background: #fff;
      .btn {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
        padding: 22rpx 0;
        border-radius: 6rpx;
      }
    }
  }
}

// bgBule = #4085EC;

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.pad95 {
  padding-top: 56rpx;
  background: bgBule;
  padding-bottom: 24rpx;
  min-height: 100vh;
  box-sizing: border-box;
}

.coupon-box {
  width: 690rpx;
  // min-height 968rpx
  background: #fff;
  margin: 0 auto;
  border-radius: 8rpx;
  padding: 0rpx 6rpx 168rpx 6rpx;
  box-sizing: border-box;
  // overflow hidden
}

.coupon-type {
  background-color: #fafafa;
  box-shadow: 0 2rpx 6rpx 0 #f2f2f2;
  padding: 18rpx 36rpx 14rpx 36rpx;
  color: #959595;
  font-size: 28rpx;

  image {
    width: 54rpx;
    height: 54rpx;
    margin-right: 22rpx;
  }
}

.coupon-border {
  height: 2rpx;
  position: relative;
  width: 100%;
}

.coupon-border:before {
  position: absolute;
  content: "";
  width: 16rpx;
  height: 16rpx;
  border-radius: 9rpx;
  background: bgBule;
  display: inline-block;
  vertical-align: middle;
  left: -14rpx;
  top: -7rpx;
}

.coupon-border:after {
  right: -14rpx;
  top: -7rpx;
  position: absolute;
  content: "";
  width: 16rpx;
  height: 16rpx;
  border-radius: 9rpx;
  background: bgBule;
  display: inline-block;
  vertical-align: middle;
}

.coupon-title {
  margin-top: 96rpx;
  color: #000;
  font-size: 40rpx;
  font-family: "PingFang SC";
  text-align: center;
  font-weight: bolder;
}

.coupon-price-box {
  margin-top: 24rpx;
  text-align: center;
  font-size: 24rpx;
  color: #a1a1a1;
}

.coupon-price {
  color: #dc615a;
  font-family: "PingFang SC";
  font-weight: bolder;
  font-size: 60rpx;
}

.coupon-unit {
  color: #dc615a;
  font-size: 28rpx;
}

.coupon-price-though {
  text-decoration: line-through;
  color: #999;
  font-size: 24rpx;
  margin-left: 16rpx;
}

.coupon-des {
  margin-top: 24rpx;
  color: #333;
  font-size: 36rpx;
  font-family: "PingFang SC";
  font-weight: bolder;
  text-align: center;
}

.coupon-usetime {
  display: flex;
  justify-content: center;
  margin-top: 16rpx;
}

.coupon-usetime-text {
  color: #a1a1a1;
  font-size: 24rpx;
}

.coupon-usetime-t {
  color: #333;
  font-size: 24rpx;
  margin-left: 16rpx;
}

.coupon-need-button {
  margin: 68rpx auto 0rpx auto;
  color: #ffffff;
  line-height: 76rpx;
  font-size: 26rpx;
  width: 613rpx;
  height: 76rpx;
  border-radius: 38rpx;
  text-align: center;
  background: linear-gradient(#2a7edd 0%, #669ff5 100%);
}

.coupon-needed-button {
  margin: 68rpx auto 0rpx auto;
  color: #ffffff;
  line-height: 76rpx;
  font-size: 26rpx;
  width: 613rpx;
  height: 76rpx;
  border-radius: 38rpx;
  text-align: center;
  background: #acacad;
}

.coupon-used-tip {
  margin: 68rpx auto 0 auto;
  line-height: 76rpx;
  font-size: 26rpx;
  width: 613rpx;
  height: 76rpx;
  border-radius: 38rpx;
  text-align: center;
  color: #999;
  background: #f2f2f2;
}

.date-box {
  width: 613rpx;
  padding-top: 34rpx;
  padding-bottom: 12rpx;
  margin: 76rpx auto 0 auto;
  color: #7a7a7a;
  border-top: 1rpx dashed #ededed;
  font-size: 24rpx;
}

.desc-box {
  width: 613rpx;
  padding-top: 12rpx;
  padding-bottom: 34rpx;
  margin: 0 auto 0 auto;
  color: #7a7a7a;
  border-bottom: 1rpx solid #ededed;
  font-size: 24rpx;

  .desc-text {
    width: 440rpx;
    text-align: right;
  }
}

.use-shop {
  width: 613rpx;
  padding-top: 12rpx;
  border-bottom: 1rpx solid #ededed;
  margin: 0 auto 0 auto;
  padding-bottom: 40rpx;
  padding-top: 36rpx;
  font-size: 26rpx;

  text {
    color: #7a7a7a;
  }
}

.list-box {
  padding-top: 20rpx;
  line-height: 40rpx;
  color: #404040;
  // padding-left 36rpx
  font-size: 24rpx;

  .list-unit {
    padding-bottom: 34rpx;
  }

  .severpart-title {
    font-size: 26rpx;
    font-weight: bolder;
  }

  .text-sm + .text-sm::before {
    content: "；";
    color: #404040;
  }
}
</style>
