<template>
  <van-popup v-model="isShow" @click-overlay="cancle" position="bottom" class="coupon-select">
    <section class="coupon-select-wrapper">
      <article class="title">
        <span class="c-24"></span>
        <span>优惠券</span>
        <img @click="cancle" src="../../images/cme/close.png" />
      </article>
      <article v-if="selectCouponList.length" class="list-wrapper">
        <p v-if="currentCouponInfo.couponId">
          已选择1张优惠券，共抵扣
          <span class="sc thin">¥{{yuan(currentCouponInfo.discountAmount)}}</span>
        </p>
        <p v-else-if="goodsInfo4Coupon.count">
          请选择优惠券
        </p>
        <div
          class="item"
          @click="toggleChecked(item)"
          :class="{'disabled': item.disabled}"
          v-for="(item, index) in selectCouponList"
          :key="index"
        >
          <div class="left opacity">
            <p class="price">
              <span class="symbol sc">¥</span>
              <span class="num sc">{{yuan(item.discountAmount)}}</span>
            </p>
            <p class="desc">满{{yuan(item.requiredTotalFee)}}元可用</p>
          </div>
          <div class="center">
            <p class="name status">{{item.couponName}}</p>
            <div>
              <p v-if="item.validTimeType == 2" class="date">
                距离到期仅剩
                <span class="sc">{{item.validLeftDays}}</span>天
              </p>
              <p
                v-else
                class="date status"
              >{{parseTime(item.startTime)}} 至 {{parseTime(item.expireTime)}}</p>
              <p v-if="item.disabled" class="tips">
                <img @click="cancle" src="../../images/coupon/tips.png" />
                <span>当前商品不可用</span>
              </p>
            </div>
          </div>
          <div class="right">
            <img v-show="item.isChecked" src="../../images/coupon/radio-checked.png" />
            <img v-show="!item.isChecked" src="../../images/coupon/radio-no.png" />
          </div>
        </div>
      </article>
      <no-coupon v-else></no-coupon>

      <article v-if="selectCouponList.length" class="bottom">
        <van-button @click="confirm" size="large" round color="#449284">确定使用</van-button>
      </article>
    </section>
  </van-popup>
</template>
<script>
import NoCoupon from "@/components/coupon/no-coupon";
import { convertToYuan, parseTime } from "@/utils";
import { mapGetters, mapActions } from "vuex";

export default {
  components: {
    NoCoupon
  },
  props: {
    showSelectCoupon: {
      type: Boolean,
      default: true
    },
  },

  data() {
    return {
      currentCouponInfo: {}
    };
  },

  //
  // watch: {
  //   showSelectCoupon: {
  //     handler(newVal) {
  //       console.log('showSelectCoupon');
  //       // 如果打开了选择弹框，则重新选中已经选中的项目
  //       if (newVal) {
  //         this.currentCouponInfo = this.currentCoupon;
  //       }
  //     }
  //   },
  // },

  computed: {
    ...mapGetters(['currentCoupon', 'goodsInfo4Coupon', 'selectCouponList']),
    isShow: {
      get() {
        console.log('showSelectCoupon', this.showSelectCoupon);
        if(this.showSelectCoupon) {
          if(this.currentCoupon && this.currentCoupon.couponId) {
            let index = this.selectCouponList.findIndex( item => {
              return item.couponId = this.currentCoupon.couponId
            });
            this.selectCouponList[index].isChecked = true;
            // this.currentCoupon.isChecked = true;
            // this.selectCouponList.splice(index, 1, this.currentCoupon);
          } else {
            this.selectCouponList.forEach((cItem, index) => {
              cItem.isChecked = false;
            });            
          }
          this.currentCouponInfo = this.currentCoupon;
        }
        return this.showSelectCoupon;
      },
      set() {}
    }
  },

  mounted() {
    // this.$forceUpdate()
  },
  methods: {
    // 取消操作
    cancle() {
      this.$emit("cancle");
    },

    // 查找已经选择的
    confirm() {
      this.$emit("confirm", this.currentCouponInfo);
    },

    // 切换当前选中优惠券
    toggleChecked(item) {
      if(item.disabled) return;
      if (!item.isChecked) {
        this.selectCouponList.forEach((cItem, index) => {
          cItem.isChecked = false;
        });
        item.isChecked = true;
        // this.currentCouponInfo = JSON.parse(JSON.stringify(item));
        this.currentCouponInfo = item;
      } else {
        this.currentCouponInfo = {};
        item.isChecked = false;
      }
    },

    // 显示元
    yuan(fen) {
      return convertToYuan(fen);
    },

    // parseTime
    parseTime(time) {
      return parseTime(time, "{yyyy}-{mm}-{dd}");
    }
  }
};
</script>
<style  lang="less" scoped>
.coupon-select-wrapper {
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 500px;
  display: flex;
  line-height: 1;
  // padding: 10px 15px;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  // padding: 0 0 80px;
  // box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
  .title {
    position: fixed;
    display: flex;
    flex-direction: row;
    font-size: 18px;
    font-weight: 700;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 15px 10px;
    background: #f8f9fa;
    .c-24 {
      display: inline-block;
      width: 24px;
      height: 24px;
    }
    & > span {
      font-weight: 700;
    }
    img {
      padding: 6px;
      // position: relative;
      // top: 0;
      // right: -140px;
      width: 12px;
      height: 12px;
    }
  }
  .list-wrapper {
    font-size: 13px;
    padding: 60px 15px 80px;
    color: #979899;
    background: #f8f9fa;
    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 110px;
      padding: 16px 0;
      margin-top: 12px;
      background: #fff;
      border-radius: 4px;
      .left {
        width: 93px;
        text-align: center;
        .price {
          .symbol {
            font-size: 12px;
          }
          .num {
            font-size: 30px;
          }
        }
        .desc {
          margin: 5px;
          font-size: 11px;
          color: #676869;
        }
      }
      .center {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 194px;
        text-align: left;
        // margin: 15px 0;
        height: 100%;
        .name {
          font-size: 14px;
          font-weight: 700;
          color: #373839;
          line-height: 1.3;
        }
        .date {
          font-size: 12px;
          color: #676869;
        }
        .tips {
          display: flex;
          flex-direction: row;
          align-items: center;
          line-height: 1;
          font-size: 12px;
          color: #373839;
          margin-top: 6px;
          img {
            width: 12px;
            height: 12px;
            margin-right: 2px;
          }
        }
      }
      .right {
        width: 44px;
        text-align: center;
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 12;
    width: 100%;
    display: flex;
    padding: 10px 15px;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #f0f0f0;
  }
  .sc {
    font-weight: 700;
    color: #fb5b52;
  }
  .thin {
    font-weight: 400;
  }
  .disabled {
    .opacity {
      opacity: 0.6;
    }
    .status {
      color: #979899 !important;
    }
  }
}
</style>
