<!--
 * @Author: ch
 * @Date: 2022-03-24 11:30:55
 * @LastEditors: ch
 * @LastEditTime: 2022-04-24 21:13:30
 * @Description: file content
-->
<template>
	<u-popup :show="visible" round="24rpx" closeable @close="close">
		<div class="content fix-header fix-bottom">
      <!--      弹出层 选择商品规格-->
      <div class="mask">
        <div class="mask-content">
          <div class="mask-title">
            <div class="mask-close iconfont-shop icon-close"></div>
            选择规格参数
          </div>
          <div class="spec-items">
            <div class="spec-menu-item js-spec-menu" v-for="(item, index) in goodsTypeList" :key="item.id">
              <div class="spec-note">{{item.name}}</div>
              <div class="spec-choices">
                <span v-for="(el, i) in item.propertyList"
                      :key="el.id"
                      :class="{'active' : el.selected, 'disabled': el.disabled}"
                      @click="handleClickSpecs1(item.id, el.id, el, index, i)"
                >{{el.name}}</span>
              </div>
            </div>
            <div class="spec-menu-item">
              <div class="spec-note">数量</div>
              <div class="spec-num">
                <span class="minus">-</span>
                <input type="number" v-model="buyNumber" maxlength="3"/>
                <span class="add">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
		
	</u-popup>
</template>

<script>
import UiButton from '@/components/UiButton.vue';
import {ApiPutAddCart} from '@/common/api/cart';
let orgdata = {
    "skus": [
      {
        "id": "f5eee18b8d5b4fc2b46a56e92abdb525",
        "stockAmmount": 7,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "74fe546803e44a7c95bebfe56a29952d",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "78f98ee53ae549ceb2c18629152ff849",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "91cefe600f40498bb5013deebb9c27be",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "383feb7947f14ce5b832bc8700e65c9e",
        "stockAmmount": 2,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "1beed60c2eb244f89ad82806d343d468",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "357fd7db1f5244e5b64f48a34bb581fa",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "5c29a251e55a4b678fc4f8287cc560b5",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "905b10e1740e4be992d14cfc23a887a2",
        "stockAmmount": 4,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "0a5f93d9ef1c486ba369dcb1fbd3aed9",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "c76dc797eaae4d8eb360de8811a9ec7a",
            "propertyName": "one",
            "property": 1
          },
          {
            "id": "d920730c34644218b3d0bbc5fca5edf4",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "2afbe8a77d034de0a1655f9ad1a25b95",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "a440b0084e564d3e9d7c8b445bb7645e",
        "stockAmmount": 10,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "12a4715b6730438888e88f302871245a",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "9063e1f1586f4a74b2f614039e8743c4",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "ae38b9cf56d5408a809d6fbd1b902ee5",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "9961364cc3494823aaf7699733393335",
        "stockAmmount": 15,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "3335920f79914cfb8a39ae22b0802bc0",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "c76dc797eaae4d8eb360de8811a9ec7a",
            "propertyName": "one",
            "property": 1
          },
          {
            "id": "34950de7059d4fffac485abb59a79381",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "a82ff8d74d3d4a1ea454e4870cc68b64",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "bd3aeb3c7c854a80b88e7f82a5a78a1e",
        "stockAmmount": 8,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "4fc8e61aa192463085578de92974b18b",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "884f32b64a4b478bb01f93b40dfeb6fc",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "f66109eccd934529a18026376fccfa7b",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "5e094973bbaf41ce81b7b626174b0bbf",
        "stockAmmount": 8,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "23d688678aaa42eebd3c04cceaa61bac",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "8ed34030c93c4dc29e43edb95e6cfca2",
            "propertyName": "橙色",
            "property": 1
          },
          {
            "id": "55649f0753464921b68b0017ce0010d7",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          },
          {
            "id": "d7248b12b7e847ca9be024ed3bb6d101",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "60ce0a1f99e940dc82d041d36681111b",
        "stockAmmount": 9,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "91faddf91e944cabadbda5c342430139",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "207698d97e4247bb9747843d16e25750",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          },
          {
            "id": "3c69d3c73aa24cccbacaf805d71117fd",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "f3c805d1959d413a86679955ae047ec5",
        "stockAmmount": 10,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "00113d4b6046411cb8ff935b2743904b",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "c13d8a4c7a18477fbe7027044d0393a0",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "653d0e243bab45eaa5c83dc8206ee33e",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          }
        ]
      }
    ]
  };
  let goodType = [
    {
      "id": "547f76222d4d4f92a49de2e0bf6bd7ef",
      "type": 1,
      "name": "颜色",
      "propertyList": [
        {
          "id": "8ed34030c93c4dc29e43edb95e6cfca2",
          "property": 1,
          "name": "橙色"
        },
        {
          "id": "c80cbe4c6cbf49f5b2822331768cd422",
          "property": 2,
          "name": "绿色"
        }
      ]
    },
    {
      "id": "21967fba6b574b479974e50720ad25fe",
      "type": 2,
      "name": "测试类别",
      "propertyList": [
        {
          "id": "f40c3884e5e9422c973d31631a65ae64",
          "property": 1,
          "name": "小"
        },
        {
          "id": "edac997ed2c54e41b1f3076fbd6e19f9",
          "property": 2,
          "name": "中"
        },
        {
          "id": "408fb530344a4a41b33932431638dcbb",
          "property": 3,
          "name": "大"
        }
      ]
    },
    {
      "id": "fe7f49a798794670be622e6b9d2f386a",
      "type": 3,
      "name": "tester",
      "propertyList": [
        {
          "id": "c76dc797eaae4d8eb360de8811a9ec7a",
          "property": 1,
          "name": "one"
        },
        {
          "id": "02808ac287e8410f936a90167d82ee2b",
          "property": 2,
          "name": "two"
        },
        {
          "id": "d5660085ff8743d999f6ed3a497ec8b7",
          "property": 3,
          "name": "three"
        }
      ]
    }
  ]
export default {
  props:['visible'],
	data() {
      return {
        maskVisible: true,
        skuList: [],
        lastCheckedSku: {}, // 选中的sku信息
        buyNumber: 1, // 购买数量
        sku: null,
        currentSkuList: [],
        valueIdSortAndIndex: [],
        goodsTypeList: [],
        selectItemList: []
      }
    },
    mounted() {
      this.init();
      // 获取所有的规格
      this.getShopGoodsType()
      this.initGoodType()
    },
    methods: {
      init() {
        let valueIdSortAndIndex = [];
        let currentSkuList = orgdata.skus.map((item,index) => {
          let valueIdSort = [];
          item.skusTypes.map(skusTypesItem=>{
            valueIdSort.push(skusTypesItem.propertyId)
          });
          /*
           将sku规格值的ID，即 propertyId，组成一个数组并且字典排序，以及将该sku所对应的index存入数组，供点击后查询sku*/
          valueIdSortAndIndex.push({valueIdSort: valueIdSort.sort()})
          return item.skusTypes
        });
 
        this.$set(this.$data, 'currentSkuList', currentSkuList);
        this.$set(this.$data, 'valueIdSortAndIndex', valueIdSortAndIndex);
       
      },
       
      isContained(aa, bb) {
        //判断aa数组是否 全 包含bb数组
        if(!(aa instanceof Array)
            ||!(bb instanceof Array)
            ||(aa.length<bb.length)
        ){
          return false;
        }
        let aaStr = aa.toString();
        for(var i=0;i<bb.length;i++){
          if(aaStr.indexOf(bb[i])<0){
            return false;
          }
        }
        return true;
      },
      // 获取所有的规格
      getShopGoodsType() {
        // goodType 为接口返回数据
        goodType.forEach(items=>{
          items.propertyList.forEach(item=>{
            item.selected = false;
            item.disabled = true;
          })
        })
        this.goodsTypeList = goodType;
      },
      // 初始化 判断 是否有库存
      initGoodType(){
        let currentSkuList = this.currentSkuList.flat(Infinity);
        this.goodsTypeList.forEach(items=>{
          items.propertyList.forEach(item=>{
            for(var i=0; i<currentSkuList.length; i++){
              if (item.id == currentSkuList[i].propertyId) {
                item.disabled = false;
                break;
              }
            }
          })
        })
      },
      // 选择每个规格，判断对应的库存
      handleClickSpecs1(grounpId, id, el, index, i){
        let selectItemList = this.selectItemList; // 已选规格
      console.log(selectItemList);
        if (el.disabled) {
          return;
        }
        console.log(this.goodsTypeList);
        // 处理selected的逻辑
        if (!el.selected) {
          this.goodsTypeList[index].propertyList.forEach(item=>{
            item.selected = false;
          })
          this.goodsTypeList[index].propertyList[i].selected = true;
          // 选中项中有同组元素，替换
          selectItemList.forEach((item, x_selected_index) => {
            if (item.index === index) {
              selectItemList.splice(x_selected_index, 1)
            }
          });
          selectItemList.push({grounpId, id, index, i});
        } else  {
          // 取消选中并删除选中项中数据
          this.goodsTypeList[index].propertyList[i].selected = false;
          selectItemList.forEach((item, x_selected_index) => {
            if (item.id === id && item.grounpId === grounpId) {
              selectItemList.splice(x_selected_index, 1);
            }
          });
        }
        this.$set(this.$data, 'selectItemList', selectItemList)
 
        // 取出组ID
        let x_selected_grounpIds = [];
        selectItemList.forEach(item=>{
          x_selected_grounpIds.push(item.grounpId);
        });
 
        // 处理disabled的逻辑
        if (selectItemList.length == 0) {
          // 选中属性为空，重新初始化数据
          this.initGoodType();
        } else {
          //拿所有规格属性（即goodsTypeList）的每一项分别与已选中的数据（即selectItemList）的每一项，组成一个比较项，与现有库存比较，找到存在的可点项
 
          this.goodsTypeList.forEach((goodsType,goodsTypeIndex)=>{
            goodsType.propertyList.forEach((prop, propIndex)=>{
              if (!prop.selected) {
                prop.disabled = true;
              }
              // 本次循环数据
              let push_data = {grounpId: goodsType.id, id: prop.id, index: goodsTypeIndex, i: propIndex}
              if (x_selected_grounpIds.indexOf(goodsType.id) > -1 ){
                // 当前循环的规格的组ID在已选规格中，删除同组规格，用当前规格替换后去与库存比较
                let sel = selectItemList.slice(); // 用一个新变量接受数据，防止修改源数据
                let index_splice = x_selected_grounpIds.indexOf(goodsType.id);
                sel.splice(index_splice, 1, push_data);
                this.optionsHandle(sel, push_data)
              } else {
              //  当前循环规格组ID不在已选规格中，添加当前规格到复制出来的已选数组中，循环比较
                let sel = selectItemList.slice();
                sel.push(push_data);
                this.optionsHandle(sel, push_data)
              }
            })
          })
        }
      },
      optionsHandle(selArr, push_data){
        let propertyIds = []
        // 将当前比较项的属性ID提取
        selArr.map(item=>{
          propertyIds.push(item.id)
        });
        // 在现有库存中查找是否有可选项，可选的置为可点击
        this.valueIdSortAndIndex.map(item=>{
          if (this.isContained(item.valueIdSort, propertyIds)){
            this.goodsTypeList[push_data.index].propertyList[push_data.i].disabled = false;
          }
        });
      }
    }
};
</script>

<style lang="scss" scoped>
.spec-choices{
  margin: 5px 0;
  span{
    background: #ccc;
    padding: 5px 10px;
    margin: 0 5px;
    &.active{
      background: $color-yellow4;
      color: #fff;
    }
    &.disabled{
      background: #eee;
      color: #999;
    }
  }
  
}
</style>
