<template>
  <div>
    <div v-for="(item, index) in specList" :key="index" class="goods-popup-param">
      <span class="Gp-param-name">{{ item.attsName }}</span>
      <div class="Gp-param-list">
        <template v-for="(it, key) in specChildList">
          <span
            v-if="it.attsCode === item.attsCode"
            :key="key"
            :disabled="it.disabled"
            :class="{
              'Gpp-list-selected': it.isSelected && !it.disabled,
              'Gpp-list-disabled': it.disabled
            }"
            @click="selectSpec(key, it)"
          >
            {{ it.attsValue }}
          </span>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SkuAttrInfo',
  props: {
    specList: {
      type: Array,
      default() {
        return [];
      }
    },
    specChildList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    //选择规格
    selectSpec(index, sku) {
      if (sku.disabled) {
        return;
      }
      if (sku.isSelected) {
        this.$set(this.specChildList[index], 'isSelected', false);
        return;
      }
      this.specChildList.forEach(item => {
        this.$set(item, 'disabled', true);
        item.skuNos.forEach(i => {
          if (sku.skuNos.indexOf(i) !== -1 || item.attsCode === sku.attsCode) {
            this.$set(item, 'disabled', false);
          }
        });
        if (item.attsCode === sku.attsCode || item.disabled) {
          this.$set(item, 'isSelected', false);
        }
        if (item.disabled) {
          item.isSelected = false;
        }
      });
      this.$set(this.specChildList[index], 'isSelected', true);
      this.$emit('select');
    }
  }
};
</script>
<style lang="less" scoped>
.goods-popup-param {
  display: flex;
  flex-direction: column;
  padding: 0 @padding-lg;
  margin: @padding-unit * 7 0;

  .Gp-param-name {
    margin-bottom: @padding-xs + 1;
    .text-size(13);
    color: @black;
    font-weight: 600;
  }

  .Gp-param-list {
    display: flex;
    flex-wrap: wrap;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: @padding-sd;
      padding: @padding-unit @padding-sm - 2;
      background: #f7f8f9;
      border-radius: @border-radius-max;
      .text-size(13);
      color: @black;
      min-width: 40px;
      margin-bottom: @padding-xs;
    }

    .Gpp-list-selected {
      background: linear-gradient(270deg, fade(#ff5d00, 10%) 0%, fade(#ff1900, 10%) 100%);
      color: @red;
    }

    .Gpp-list-disabled {
      opacity: 0.6;
    }
  }
}
</style>
