<template>
  <van-popup v-model="showPopup" position="bottom" round>
    <div class="coupon-select-popup">
      <div class="header">
        <div class="title flex-default">
          <div class="empty" />
          <div class="text">优惠</div>
          <m-icon icon="icon-close" :size="18" @click="showPopup = false" />
        </div>
      </div>
      <div class="coupon-list">
        <coupon-item
          v-for="(item, index) of list"
          :key="`coupon-item-${index}`"
          :data="item"
          mode="select"
          :select="item.select"
          @select="handleSelect(index, item)"
          :disabled="item.disabled || item.forbidden"
        />
      </div>
      <div class="confirm-con">
        <van-button block round @click="handleConfirm" type="primary">确 定</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
import CouponItem from "@/components/coupon-item.vue";
import { deepCopy } from "@/utils/common";
import { CouponType, CouponRangeType } from "@/enums";
import { couponInitCheck, couponItemCheck } from "@/utils/mallCalc";
export default {
  components: { CouponItem },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    goods: {
      type: Object,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showPopup: false,
      backupMap: {},
      hasInit: false,
      selectFlag: 0,
    };
  },
  watch: {
    value(val) {
      this.showPopup = val;
      if (val) {
        this.list.forEach((l) => {
          let select = !!this.backupMap[l.couponId];
          this.$set(l, "select", select);
          couponItemCheck(
            this.goodsMap,
            this.list,
            l,
            this.changeCouponItemDisabled
          );
        });
      }
    },
    showPopup(val) {
      this.$emit("input", val);
    },
    list: {
      deep: true,
      handler(val) {
        !this.hasInit &&
          couponInitCheck(
            this.goodsMap,
            this.list,
            this.changeCouponItemForbidden
          );
      },
    },
  },
  computed: {
    goodsMap() {
      let map = {};
      Object.keys(this.goods).forEach((k) => {
        this.goods[k].skuList.forEach((s) => {
          map[s.skuId] = { ...s };
        });
      });
      return map;
    },
  },
  methods: {
    handleSelect(index, item) {
      item.flag = ++this.selectFlag;
      this.changeCouponItemSelect(item, !item.select);
      couponItemCheck(
        this.goodsMap,
        this.list,
        item,
        this.changeCouponItemDisabled
      );
    },
    handleConfirm() {
      let arr = this.list
        .filter((l) => l.select)
        .sort((a, b) => a.flag - b.flag);
      this.backupMap = {};
      arr.forEach((a) => {
        this.backupMap[a.couponId] = true;
      });
      this.$emit("confirm", deepCopy(arr));
      this.showPopup = false;
    },
    changeCouponItemForbidden(item, forbidden) {
      this.$set(item, "forbidden", forbidden);
    },
    changeCouponItemDisabled(item, disabled) {
      this.$set(item, "disabled", disabled);
    },
    changeCouponItemSelect(item, select) {
      this.$set(item, "select", select);
    },
  },
};
</script>

<style lang="less">
.coupon-select-popup {
  background: #ffffff;
  border-radius: 21px 21px 0 0;
  > .header {
    padding: 18px 15px 12px 15px;
    .title {
      line-height: 1.8;
      align-items: center;
      justify-content: space-between;
    }
    .title .empty {
      width: 18px;
      height: 18px;
    }
    .title .text {
      font-size: 15px;
      font-weight: bold;
      color: #140603;
    }

    .desc {
      font-size: 13px;
      color: #dd2e41;
      line-height: 21px;
    }
  }
  > .coupon-list {
    height: 450px;
    background: #f5f7fb;
    padding: 10px 15px;
    overflow-y: auto;
  }
  > .confirm-con {
    padding: 9px;
    button{
      height: 36px;
    }
  }
}
</style>