<template>
  <div class="scroll-wrap">
    <div v-if="dataList != null" class="coupon-list__list">
      <template v-if="dataList.length">
        <div
          v-for="(info, index) in dataList"
          :key="index"
          class="coupon-list__item__wrapper"
          @click="handleSelectCoupon(info)"
        >
          <component
            :is="compName"
            :info="info"
            :type="type"
            :card-item="info"
            :checked.sync="info.isSelect"
          />
        </div>
      </template>
      <cr-empty v-else image="@/assets/images/createOrder/empty.png" :description="emptyText" />
    </div>
  </div>
</template>
<script>
import Empty from '@/components/empty';
import CouponItem from './../coupon-items/coupon.vue';
import ActivityItem from './../coupon-items/activity.vue';
import GiftCardItem from '@/components/giftCard.vue';

/**
 * 列表组件单独渲染
 * TODO 组件优化的时候，将子组件调整为动态组件
 */
export default {
  name: 'CouponList',
  components: {
    Empty,
    ActivityItem,
    GiftCardItem,
    CouponItem
  },
  props: {
    // 数据
    dataList: {
      type: Array,
      default: () => null
    },
    // 类型
    type: {
      type: String,
      default: 'coupon' // coupon 可用优惠券 invalidCoupons 不可用优惠券
    },
    // 组件名称
    compName: {
      type: String,
      default: 'CouponItem'
    },
    // 无数据时的文案
    emptyText: {
      type: String,
      default: '暂无可用优惠券'
    },
    couponType: {
      type: Number
    }
  },
  data() {
    return {};
  },
  computed: {},
  mounted() {
    // 组合券，选中的商品是多个时,追加选中状态
  },
  methods: {
    // 取消或选中 优惠券
    handleSelectCoupon(info) {
      const {
        id,
        canNotUseDescription,
        stackableCouponIds = [] // 可以组合的id 集合
      } = info;
      if (canNotUseDescription) return;
      // 活动可以多选
      if (this.couponType === 4) {
        this.dataList.forEach(g => {
          if (id === g.id) {
            g.isSelect = !g.isSelect;
          }
        });
      } else if (this.couponType === 9) {
        /**
         * 首先，如果有可叠加的券，就创建一个包含这些券id的Set，并进行一些判断，判断是否有选中的组合关系，以及当
         * 前券是否准备选中。
         *
         * 然后，选出所有和当前券有组合关系并且已经选中的券，判断是否需要将它们的叠加状态设置为false。如果当前券
         * 准备选中，并且有其他券和它具有组合关系，则将这些券的叠加状态设置为true；如果当前券已经选中，并且有其
         * 他券和它具有组合关系，则将这些券的叠加状态设置为true。
         *
         * 在更新叠加状态之后，根据当前券和其他券的组合关系以及当前券的选中状态，更新其他所有券的选中状态。具体来
         * 说，如果一个券和当前券具有组合关系并且不是当前券本身，则不对其进行操作；否则，如果一个券不在组合关系中
         * ，则将该券的选中状态设置为false，如果一个券是当前券本身，则将该券的选中状态改为当前状态的相反值。
         */
        if (stackableCouponIds.length) {
          // 和当前选中的券组合关系set
          const stackableSet = new Set(stackableCouponIds);
          // 和当前券有组合关系的Item被选中的集合
          const selectItemList = this.dataList.filter(g => stackableSet.has(g.id) && g.isSelect);
          const isSelect = selectItemList.length > 0;
          // 当前券将要更新的状态
          const preSelect = !info.isSelect;
          // 和当前券有组合关系的Item的集合
          const selectedList = this.dataList.filter(g => stackableSet.has(g.id) && g.id !== id);

          this.dataList.forEach(g => {
            // 叠加状态更新 S
            if (isSelect && preSelect) {
              g.overlying = false;
            } else if (preSelect && stackableSet.has(g.id)) {
              g.overlying = true;
            } else if (isSelect && selectItemList[0].stackableCouponIds.includes(g.id)) {
              g.overlying = true;
            } else {
              g.overlying = false;
            }
            // 叠加状态更新 E
            /**
             *  选中状态更新
             *  1. 有选中关系的券列表不做任何操作
             *  2. 没有选中关系的券列表全部取消选中;只操作当前券
             */
            selectedList.includes(g) || (g.isSelect = id === g.id && !g.isSelect); //  没有选中关系的券列表全部取消选中;只操作当前券
          });
        } else {
          this.dataList.forEach(g => {
            g.isSelect = id === g.id && !g.isSelect;
            g.overlying = false;
          });
        }
      } else {
        this.dataList.forEach(g => {
          g.isSelect = id === g.id && !g.isSelect;
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.scroll-wrap {
  height: calc(80vh - 48px); /* 去掉头部和底部的高度 */
  overflow: auto; /* 垂直滚动条 */
}

.coupon-list__item__wrapper:last-child {
  margin-bottom: 108px !important;
}

.coupon-list__item__wrapper {
  position: relative;
}

.coupon-list {
  &__list {
  }

  &__item {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffece6;
    border-radius: 6px;
    padding: 15px 0;
    margin-bottom: 10px;

    &--disabled {
      -webkit-filter: grayscale(100%) opacity(0.8); /* Chrome, Safari, Opera */
      filter: grayscale(100%) opacity(0.8);

      .cr-coupon-list__right {
        display: none;
      }
    }
  }

  &__tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 16px;
  }

  &__left {
    text-align: center;
    color: #ec3333;
  }

  &__amount {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    margin: 0;

    text {
      font-size: 16px;
      line-height: 22px;
    }
  }

  &__limit {
    .text-size(12);
    color: #ec3333;
    line-height: 17px;
    margin: 0;
  }

  &__content {
    padding: 0 18px;
  }

  &__desc {
    .text-size(14);
    line-height: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 3px;
  }

  &__date {
    .text-size(12);
    color: #666666;
    line-height: 17px;
  }

  &__right {
    margin-left: auto;

    .radio {
      width: 30px;
      height: 30px;
      display: block;
      transform: scale(0.8);
      background-color: red !important;
    }
  }
}
</style>
