<template>
  <div class="confirm-body">
    <div v-if="isInvalid" class="confirm-goods__head">失效商品</div>
    <Product
      v-for="(item, idx) in dataList"
      :key="item.skuId"
      :item="item"
      :shop-sku-list="dataList"
      :class-name="isInvalid ? 'invalid' : 'normal-pro'"
      :is-invalid="isInvalid"
    >
      <template v-if="dataList.length === 1 && !isInvalid" slot="stepbottom">
        <Stepper
          class="stepper"
          :value="item.count"
          disabled
          :can-subtract="item.count === 1"
          :can-add="getIsOutBuy(item)"
          :min="1"
          :index="idx"
          :max="getMaxStockByCanAdd(item)"
          @change="handleCountChange"
        />
      </template>
    </Product>
  </div>
</template>
<script>
import Stepper from '@/components/stepper.vue';
import Product from '@/views/orders/components/product.vue';
import { mapGetters } from 'vuex';

/**
 *  呈现商品列表
 */
export default {
  name: 'ProductPanel',
  components: {
    Stepper,
    Product
  },
  props: {
    dataList: {
      type: Array,
      default: () => null
    },
    // 类型
    type: {
      type: String,
      default: 'shopSkuList' // shopSkuList 有效商品 invalidSkuList 失效商品
    }
  },
  data() {
    return {
      prevCanAdd: true,
      isOutBuy: false
    };
  },
  computed: {
    ...mapGetters('createOrderStore', ['orderInfo']),
    // 是否是失效商品
    isInvalid() {
      return this.type === 'invalidSkuList';
    }
  },
  methods: {
    // 这里是差异化逻辑，建议抽离成一个mixin
    // stepper变化处理
    async handleCountChange(e) {
      const { count, activityCanBuyCount, commonLimitCount } = this.orderInfo.shopSkuList[e.index];
      let skuNum = count;
      skuNum = e.type === 'add' ? skuNum + 1 : skuNum - 1;
      if (skuNum < 1) return;
      if (typeof activityCanBuyCount === 'number' && skuNum > activityCanBuyCount) {
        this.$toast(`您当前购买的商品限购${activityCanBuyCount}件`);
        skuNum--;
        return;
      }
      if (typeof commonLimitCount === 'number' && skuNum > commonLimitCount) {
        this.$toast('超出数量范围');
        skuNum--;
        return;
      }
      this.$emit('getConfirmOrderInfo', {
        index: e.index,
        skuNum
      });
    },
    // ! 需要注意stepper的value是从接口获取的，max会受影响
    getMaxStockByCanAdd(item) {
      const { count, canAdd, activityCanBuyCount, commonLimitCount } = item;
      if (activityCanBuyCount) {
        return activityCanBuyCount;
      } else if (commonLimitCount) {
        return commonLimitCount;
      }
      let finalCount = canAdd ? count + 1 : count;
      if (this.prevCanAdd !== item.canAdd) finalCount = count;
      this.prevCanAdd = item.canAdd;
      return finalCount;
    },
    getIsOutBuy(item) {
      const { count, activityCanBuyCount, commonLimitCount } = item;
      let isOutBuy = false;
      if (activityCanBuyCount) {
        isOutBuy = count >= activityCanBuyCount;
      } else if (commonLimitCount) {
        isOutBuy = count >= commonLimitCount;
      }
      this.isOutBuy = isOutBuy;
      return isOutBuy;
    }
  }
};
</script>
<style lang="less" scoped>
.confirm {
  &-body {
    background: @white;
    border-radius: @border-radius-md;
    margin-bottom: @padding-sm;
    overflow: hidden;
  }
  &-goods {
    &__head {
      color: @black;
      .text-size(13);
      font-weight: 500;
      padding: @padding-sm;
    }
  }
}
</style>
