<template>
  <view class="cv-specs">
    <!-- 规格 -->
    <view class="cv-specs-area">
      <view class="cv-specs-sort-area" v-for="(item, index1) in localSpu" :key="index1">
        <!-- 规格类别名称 -->
        <view class="cv-specs-sort-name">
          <text>{{ item.name }}</text>
        </view>
        <!-- 规格列表 -->
        <view class="cv-specs-sort-list">
          <view
            class="cv-specs-sort-list-details"
            v-for="(item_value, i) in item.items"
            :key="i"
            :class="[item_value.ishow ? '' : 'disabled', subIndex[index1] == i ? 'selected' : '']"
            @tap="skuClick(item_value, index1, $event, i)"
          >
            <text>{{ item_value.name }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 数量 -->
    <view class="cv-number" v-if="disabledNumber === false">
      <view class="cv-number-title"><text>购买数量</text></view>
      <view class="cv-number-right">
        <view class="cv-number-right-cut" :class="numberCutDisabled ? 'disabled' : ''" @tap="changeNumber('cut')">
          <view class="cv-number-right-cut-fill"></view>
        </view>
        <view class="cv-number-right-num">{{ localNumber }}</view>
        <view class="cv-number-right-plus" :class="numberPlusDisabled ? 'disabled' : ''" @tap="changeNumber('plus')">
          <view class="cv-number-right-cut-fill-h"></view>
          <view class="cv-number-right-cut-fill-s"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvSpecs',
  emits: ['change'],
  props: {
    specList: {
      type: Object,
      default() {
        return {};
      }
    },
    skuList: {
      type: Object,
      default() {
        return {};
      }
    },
    disabledNumber: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  watch: {
    localNumber() {
      this.change();
    },
    selectArr: {
      deep: true,
      handler(newVal) {
        this.change();
      }
    },
    specList() {
      this._dealData();
    },
    skuList() {
      this._dealData();
    }
  },
  data() {
    return {
      localSpu: [], //spu规格列表
      localSku: [], //sku列表
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      selectArr: [], //存放被选中的值
      subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
      selectshop: {}, //存放最后选中的商品
      localNumber: 1,
      numberCutDisabled: true,
      numberPlusDisabled: false,
      numberMax: 99
    };
  },
  created() {
    this._dealData();
  },
  methods: {
    //初始化数据
    _dealData() {
      this.localSpu = this.specList.items; // spu规格列表
      this.localSku = this.skuList.items; // sku列表
      this.shopItemInfo = {}; //存放要和选中的值进行匹配的数据
      this.selectArr = []; //存放被选中的值
      this.subIndex = []; //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
      this.selectshop = {}; //存放最后选中的商品
      if (this.localSpu && this.localSku && this.localSpu.length > 0 && this.localSku.length > 0) {
        this.localSpu.map((item) => {
          this.selectArr.push('');
          this.subIndex.push(-1);
        });
        this.checkItem(); //计算sku里面规格形成路径
        this.checkInpath(-1); //传-1是为了不跳过循环
      }
    },
    skuClick(value, index1, event, i) {
      if (value.ishow) {
        if (this.selectArr[index1] != value.name) {
          this.$set(this.selectArr, index1, value.name);
          this.$set(this.subIndex, index1, i);
        } else {
          this.$set(this.selectArr, index1, '');
          this.$set(this.subIndex, index1, -1);
        }
        this.checkInpath(index1);
        //如果全部选完
        if (this.selectArr.every((item) => item != '')) {
          this.selectshop = this.shopItemInfo[this.selectArr];

          this.localNumber = 1;
          this.numberMax = this.selectshop.stock;
        } else {
          this.selectshop = {};
        }
      }
    },
    checkInpath(clickIndex) {
      //循环所有属性判断哪些属性可选
      //当前选中的兄弟节点和已选中属性不需要循环

      for (let i = 0, len = this.localSpu.length; i < len; i++) {
        if (i == clickIndex) {
          continue;
        }
        let len2 = this.localSpu[i].items.length;
        for (let j = 0; j < len2; j++) {
          if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
            continue;
          }
          let choosed_copy = [...this.selectArr];
          this.$set(choosed_copy, i, this.localSpu[i].items[j].name);
          let choosed_copy2 = choosed_copy.filter((item) => item !== '' && typeof item !== 'undefined');
          if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
            this.$set(this.localSpu[i].items[j], 'ishow', true);
          } else {
            this.$set(this.localSpu[i].items[j], 'ishow', false);
          }
        }
      }
    },
    checkItem() {
      //计算可选路径
      let result = this.localSku.reduce(
        (arrs, items) => {
          return arrs.concat(
            items.sku.reduce(
              (arr, item) => {
                return arr.concat(
                  arr.map((item2) => {
                    //利用对象属性的唯一性实现二维数组去重
                    if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
                      this.shopItemInfo[[...item2, item]] = items;
                    }
                    return [...item2, item];
                  })
                );
              },
              [[]]
            )
          );
        },
        [[]]
      );
    },
    changeNumber(type) {
      if (type == 'cut') {
        if (!this.numberCutDisabled) {
          this.localNumber = --this.localNumber;
        } else {
          return;
        }
      } else if (type == 'plus') {
        if (!this.numberPlusDisabled) {
          this.localNumber = ++this.localNumber;
        } else {
          return;
        }
      }
      if (this.localNumber <= 1) {
        this.numberCutDisabled = true;
        this.localNumber = 1;
      } else {
        this.numberCutDisabled = false;
      }
      if (this.localNumber >= this.numberMax) {
        this.localNumber = this.numberMax;
        this.numberPlusDisabled = true;
      } else {
        this.numberPlusDisabled = false;
      }
    },
    change() {
      let data = {};
      data.sku = this.selectshop;
      data.selectSpecs = [...this.selectArr];
      if (this.disabledNumber === false) {
        data.number = this.localNumber;
      }
      this.$emit('change', data);
    }
  }
};
</script>
<style>
.cv-specs {
  padding: 0 10px;
  background-color: #ffffff;
}
.cv-specs-sort-area {
  border-top: solid 1px rgba(0, 0, 0, 0.03);
}
.cv-specs-sort-name {
  color: #000000;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}
.cv-specs-sort-list {
  display: flex;
  flex-wrap: wrap;
}
.cv-specs-sort-list-details {
  height: 30px;
  background-color: rgba(0, 0, 0, 0.03);
  border: solid 1px rgba(0, 0, 0, 0.03);
  color: rgb(0, 0, 0);
  border-radius: 5px;
  line-height: 30px;
  font-size: 14px;
  padding: 0 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.cv-specs-sort-list-details.selected {
  background-color: rgba(255, 80, 0, 0.03);
  border-color: rgb(255, 80, 0);
  color: rgb(255, 80, 0);
}
.cv-specs-sort-list-details.disabled {
  color: rgba(0, 0, 0, 0.3);
}
.cv-number {
  overflow: auto;
  border-top: solid 1px rgba(0, 0, 0, 0.03);
  font-size: 14px;
  color: #000000;
}
.cv-number-title {
  height: 50px;
  line-height: 50px;
  float: left;
}
.cv-number-right {
  float: right;
  display: flex;
  flex-wrap: wrap;
  height: 31px;
  line-height: 31px;
  text-align: center;
  margin-top: 10px;
}
.cv-number-right-cut,
.cv-number-right-num {
  margin-right: 2px;
  position: relative;
}
.cv-number-right-cut,
.cv-number-right-plus {
  width: 33px;
  background-color: rgba(0, 0, 0, 0.08);
}
.cv-number-right-cut.disabled,
.cv-number-right-plus.disabled {
  background-color: rgba(0, 0, 0, 0.03);
}
.cv-number-right-num {
  width: 41px;
  background-color: rgba(0, 0, 0, 0.08);
  font-size: 16px;
}
.cv-number-right-cut-fill,
.cv-number-right-cut-fill-h {
  width: 15px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.3);
  margin: auto;
  margin-top: 15px;
}
.cv-number-right-cut-fill-s {
  width: 1px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  margin: auto;
  margin-top: -8px;
}
</style>
