<style>
  .goodsSpecifica .app-attr-group .del-img {
    height: 20px;
    width: 20px;
    cursor: pointer;
  }

  .goodsSpecifica .app-attr-group .bg {
    height: 44px;
    padding: 0 10px;
    background: #f8f8f8;
  }

  .regionDig .regionChoice .item_b {
    margin-bottom: 10px;
  }

  .goodsSpecifica .app-attr-group .bg {
    height: 44px;
    padding: 0 10px;
    background: #f8f8f8;
  }

  .goodsSpecifica .app-attr-group {
    border: 1px solid #ebeef5;
    padding: 10px;
  }

  .speciDig .tpl-box {
    width: 300px;
    height: 440px;
  }

  .speciDig .tpl-box .tpl-head {
    padding: 0 20px;
    font-size: 15px;
    color: #909399;
    margin-bottom: 10px;
    line-height: 44px;
    background: #f5f7fa;
  }

  .speciDig .tpl-scrollbar {
    height: calc(440px - 44px - 10px);
  }

  .speciDig .tpl-scrollbar .el-checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 0;
  }

  .goodsSpecifica .app-attr-group .attr-list {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }

  .goodsSpecifica .app-attr-group .close {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 16px;
    cursor: pointer;
  }

  .goodsSpecifica .box-grow-0 {
    min-width: 0;
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-shrink: 0;
  }

  .goodsSpecifica .app-attr-group .img-box {
    position: relative;
    height: 100px;
    width: 100px;
    margin-top: 8px;
    border: 1px solid #ebeef5;
  }

  .goodsSpecifica .app-attr-group .attr-jt {
    background: #ffffff;
    width: 6px;
    height: 6px;
    border-top: 1px solid rgb(235, 238, 245);
    border-right: 1px solid #ebeef5;
    transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: absolute;
    top: -5px;
  }

</style>
<template>
  <div>
    <div style="width:130%" class="goodsSpecifica">
      <div class="app-attr-group">
        <div v-for="(item, index) in addMsg.SpecificationList" :key="index+'3'" style="margin-bottom:16px;">
          <div flex="dir:left cross:center" class="bg">
            <span>规格名:</span>
            <el-input @input="ggzChange(false)" v-model="item.Name" size="mini" style="width: 94px;margin: 0px 16px;">
            </el-input>
            <el-checkbox v-show="index == 0" v-model="item.EnabledImage" :true-label="1" :false-label="2">规格图片
            </el-checkbox>
            <div style="margin-left: auto; line-height: 1;">
              <div @click="DeleteggModule(item, index)" class="el-image del-img">
                <img src="../../../assets/img/userman/del1.png" class="el-image__inner" />
              </div>
            </div>
          </div>
          <div flex="dir:left" style="padding: 0px 10px;margin-top: 16px;">
            <div class="box-grow-0">规格值：</div>
            <div flex="dir:left" style="flex-wrap: wrap;">
              <div v-for="(item2,index2) in item.SpecificationValueList" :key="index2+'4'" class="attr-list">
                <el-input @input="ggzChange(true)" size="mini" v-model="item2.Name" width="152px"></el-input>
                <i @click="Deleteggz(item, index, index2)" class="el-icon-error close"></i>
                <div v-if="index == 0 && item.EnabledImage == 1" flex="cross:center main:center" class="img-box">
                  <div class="attr-jt"></div>
                  <div v-if="item2.Image == ''" @click="openggImg(item, index, item2, index2)" class="app-attachment">
                    <div style="line-height: normal; display: inline-block;">
                      <span>+添加图片</span>
                    </div>
                  </div>
                  <div v-if="item2.Image != ''" class="el-image" style="height: 88px; width: 88px;">
                    <img :src="item2.Image" style="width:100%;height:100%" />
                  </div>
                  <span v-if="item2.Image != ''" @click="DeleteImageUrl(item, index, item2, index2)"
                    class="el-icon-error close"></span>
                  <div v-if="item2.Image != ''" style="position: absolute;">
                    <div class="app-attachment">
                      <el-button @click="openggImg(item, index, item2, index2)" type="primary" size="small">替换
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <span @click="AddSpecValue(item, index)" class="blue f12">添加规格值</span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="!addMsg.SpecificationList||(addMsg.SpecificationList&&addMsg.SpecificationList.length < 6)"
          flex="dir:left cross:center" class="bg">
          <el-button @click="chooseSpec" size="small">选择规格模板</el-button>
          <el-button @click="addSpec" size="small">添加规格项目</el-button>
          <span style="padding-left: 14px;color: rgb(201, 201, 201)">注：规格名最多添加5个</span>
        </div>
      </div>
    </div>
    <div v-show="addMsg.SpecificationPriceList&&addMsg.SpecificationPriceList.length > 0"
      style="width: 130%; margin-top: 24px;">
      <div class="app-attr">
        <div class="box">
          <el-form-item label-width="90px" style="display:inline-block" label="批量设置">
            <el-input style="width:100%" size="small" v-model="valpl" placeholder="请输入内容" class="input-with-select">
              <el-select style="width:120px" v-model="ggpl" slot="prepend" placeholder="请选择">
                <el-option label="价格" :value="1"></el-option>
                <el-option label="库存" :value="2"></el-option>
                <el-option label="成本价" :value="5"></el-option>
                <el-option label="重量（g）" :value="3"></el-option>
                <el-option label="货号" :value="4"></el-option>
                <el-option v-if="FxState==1" label="返佣总金额" :value="6"></el-option>
              </el-select>
              <el-button @click="ggPlSet" slot="append">确定</el-button>
            </el-input>
          </el-form-item>
        </div>
        <el-table ref="table" :data="addMsg.SpecificationPriceList" border style="width: 100%"
          @selection-change="TbaleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <template v-for="(item, index) in addMsg.SpecificationList">
            <el-table-column :key="index+'5'" :label="item.Name">
              <template slot-scope="scope">
                <span v-if="index == index2" v-for="(item2, index2) in scope.row.AttrList" :key="index2+'6'">
                  {{ scope.row.AttrList[index2].SVName }}
                </span>
              </template>
            </el-table-column>
          </template>
          <el-table-column :render-header="renderHeader" label="价格">
            <template slot-scope="scope">
              <el-input v-model="scope.row.SellingPrice" @keyup.native="checkPrice(scope.row,'SellingPrice')"
                size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column :render-header="renderHeader" label="库存">
            <template slot-scope="scope">
              <el-input v-model="scope.row.InventoryNum" @keyup.native="checkPrice(scope.row,'InventoryNum')"
                size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column :render-header="renderHeader" label="成本价" width="90">
            <template slot-scope="scope">
              <el-input v-model="scope.row.CostMoney" @keyup.native="checkPrice(scope.row,'CostMoney')" size="small">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column :render-header="renderHeader" v-if="FxState==1" width="120" label="返佣总金额">
            <template slot-scope="scope">
              <el-input v-model="scope.row.Commission" @keyup.native="checkPrice(scope.row,'Commission')" size="small">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="重量(克)" width="90">
            <template slot-scope="scope">
              <el-input v-model="scope.row.GoodsWeight" @keyup.native="checkPrice(scope.row,'GoodsWeight')"
                size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="货号">
            <template slot-scope="scope">
              <el-input v-model="scope.row.GoodsNumbers" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 选择规格模板 -->
    <el-dialog custom-class="speciDig" title="选择规格模板" :visible.sync="speciDig" width="680px">
      <div flex="dir:left">
        <div class="tpl-box">
          <div class="tpl-head">规格名选择</div>
          <div class="tpl-scrollbar el-scrollbar">
            <el-checkbox @change="(speciDigActive = index), changeCheckAll(item, index)"
              v-for="(item, index) in speciList" v-model="item.checkAll" :key="index">{{ item.Name }}</el-checkbox>
          </div>
        </div>
        <div class="tpl-box" style="margin-left:10px">
          <div class="tpl-head">规格值选择</div>
          <div class="tpl-scrollbar el-scrollbar">
            <el-checkbox-group v-model="item.SpecificationValueList" @change="changeSpeciList(item, index)"
              v-for="(item, index) in speciList" :key="index">
              <span v-if="speciDigActive == index">
                <el-checkbox style="padding-left:10px" v-for="(item2, index1) in item.NewSpecList" :label="item2"
                  :key="index1">{{ item2.Name }}</el-checkbox>
              </span>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="chooseSpecificationValueList">确定选择</el-button>
      </div>
    </el-dialog>
    <!-- 选择图片 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId" :IsMultiple="true"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    props: ["addMsg"],
    components: {
      ChooseImg
    },
    data() {
      return {
        ComTreeList: [],
        memberList2: [],
        skuList: [],
        disList2: [],
        changeState: false,
        imgType: 1,
        imgListIndex1: 0,
        imgListIndex2: 0,
        speciDig: false,
        speciDigActive: -1,
        valpl: "",
        ggpl: "",
        FxState: 0,
        ggplList: [],
        speciList: [],
        DropdownList: [],
        huiyList: [],
        SeparateDistributionType: 1, //待传递给父组件
        EnjoyMember: 1, //待传父组件
      };
    },
    methods: {
      // 添加规格模板
      addSpec() {
        let that = this;
        let obj = {
          Name: "",
          SpecificationValueList: [],
          Sort: that.addMsg.SpecificationList.length + 1,
          Id: 0,
          EnabledImage: 2
        };
        this.addMsg.SpecificationList.push(obj);
        this.ggzChange(true);
      },
      // 修改规格值
      ggzChange(isReload) {
        this.$forceUpdate();
        if (isReload) {
          this.skuList = [];
          this.getSkuData([], 0, this.addMsg.SpecificationList);
        }
      },
      getSkuData(skuArr = [], i, list) {
        const testyunx = (skuArr = [], i, list) => {
          if (list[i]) {
            for (let j = 0; j < list[i].SpecificationValueList.length; j++) {
              skuArr[i] = {};
              if (i < list.length - 1) {
                skuArr[i].SName = list[i].Name;
                skuArr[i].SVName = list[i].SpecificationValueList[j].Name;
                skuArr[i].SVId = list[i].SpecificationValueList[j].Sort;
                testyunx(skuArr, i + 1, list); // 递归循环
              } else {
                skuArr[i].SName = list[i].Name;
                skuArr[i].SVName = list[i].SpecificationValueList[j].Name;
                skuArr[i].SVId = list[i].SpecificationValueList[j].Sort;
                this.skuList.push([...skuArr]); // 扩展运算符，连接两个数组
              }
            }
          }
        }
        testyunx(skuArr, i, list)
        this.calcList(this.skuList, this.addMsg.SpecificationList);
      },
      calcList(tempSkuList, calist) {
        let oldArr = [];
        if (this.addMsg.SpecificationPriceList) {
          oldArr = JSON.parse(JSON.stringify(this.addMsg.SpecificationPriceList));
        }
        this.addMsg.SpecificationPriceList = [];
        var tempArray = [];
        tempSkuList.forEach(item => {
          var tempObj = {
            AttrList: [],
            SpecificationSort: "",
            GoodsNumbers: "",
            GoodsWeight: 0,
            InventoryNum: 0,
            SellingPrice: 0,
            CostMoney: 0,
            Commission: 0,
            isNoExite: true,
          }
          var specificationSortStr = ""
          item.forEach((item2, index2) => {
            let obj = {
              SName: item2.SName,
              SVName: item2.SVName,
              SVId: item2.SVId
            };
            if (index2 == 0) {
              specificationSortStr += item2.SVId
            } else {
              specificationSortStr += ":" + item2.SVId
            }
            tempObj.AttrList.push(obj);
          });
          tempObj.SpecificationSort = specificationSortStr;
          tempArray.push(tempObj)
        });
        tempArray.forEach((item, i) => {
          oldArr.forEach((val, index) => {
            if (val.SpecificationSort == item.SpecificationSort) {
              item.GoodsNumbers = val.GoodsNumbers;
              item.GoodsWeight = val.GoodsWeight;
              item.InventoryNum = val.InventoryNum;
              item.SellingPrice = val.SellingPrice;
              item.CostMoney = val.CostMoney;
              item.Commission = val.Commission;
            }
          })
          this.addMsg.SpecificationPriceList.push(item);
        });
        this.$forceUpdate();
      },
      //删除规格模板
      DeleteggModule(item, index) {
        let that = this;
        that.Confirm("是否确认删除?", function () {
          that.ComTreeList = [];
          that.memberList2 = [];
          that.addMsg.SpecificationList.splice(index, 1);
          if (that.addMsg.SpecificationList.length == 0) {
            that.SeparateDistributionType = 1;
          }
          that.$forceUpdate();
          that.skuList = [];
          that.getSkuData([], 0, that.addMsg.SpecificationList);
        });
      },
      //删除规格值
      Deleteggz(item, index, index2) {
        let that = this;
        that.Confirm("是否确认删除?", function () {
          that.addMsg.SpecificationList[index].SpecificationValueList.splice(index2, 1);
          that.$forceUpdate();
          if (that.addMsg.SpecificationList[index].SpecificationValueList.length == 0) {
            that.addMsg.SpecificationList.splice(index, 1);
          }
          that.skuList = [];
          that.getSkuData([], 0, that.addMsg.SpecificationList);
        });
      },
      //选择图片
      openggImg(item, index, item2, index2) {
        this.changeState = true;
        this.imgType = 3;
        this.imgListIndex1 = index;
        this.imgListIndex2 = index2;
      },
      DeleteImageUrl(item, index, item2, index2) {
        this.addMsg.SpecificationList[index].SpecificationValueList[index2].Image = "";
      },
      // 添加规格值
      AddSpecValue(item, index) {
        let obj = {
          Id: 0,
          Image: "",
          Name: "",
          Sort: item.SpecificationValueList.length + 1
        };
        this.addMsg.SpecificationList[index].SpecificationValueList.push(obj);
        this.ggzChange(true);
      },
      //添加规格
      chooseSpec() {
        this.speciDig = true;
        this.speciList.forEach(item => {
          item.NewSpecList = [];
          item.checkAll = false;
          item.SpecificationValueList = [];
          item.SpecList.forEach(val => {
            let obj = {
              Id: item.Id,
              Name: val
            };
            item.NewSpecList.push(obj);
          });
        });
      },
      // 全选
      changeCheckAll(item, index) {
        if (item.checkAll) {
          this.speciList[index].SpecificationValueList = item.NewSpecList;
        } else {
          this.speciList[index].SpecificationValueList = [];
        }
        this.$forceUpdate();
      },
      //规格值切换选择
      changeSpeciList(val, index) {
        this.$forceUpdate();
      },
      //选择规格
      chooseSpecificationValueList() {
        if (!this.addMsg.SpecificationList) {
          this.addMsg.SpecificationList = [];
        }
        let arr = [];
        this.speciList.forEach(item => {
          if (item.checkAll) {
            arr.push(item);
          }
        });
        this.addMsg.SpecificationList = JSON.parse(
          JSON.stringify(this.addMsg.SpecificationList.concat(arr))
        );
        this.addMsg.SpecificationList.forEach((item, index) => {
          item.EnabledImage = 2;
          item.Sort = index;
          item.SpecificationValueList.forEach((list, index2) => {
            list.Image = "";
            list.Sort = index2;
          });
        });
        this.ComTreeList = [];
        this.memberList2 = []
        this.skuList = [];
        this.getSkuData([], 0, this.addMsg.SpecificationList);
        this.speciDig = false;
      },
      ggPlSet() {
        if (this.ggplList.length == 0) {
          this.Error("至少选择一项！");
          return;
        }
        this.addMsg.SpecificationPriceList.forEach(item => {
          this.ggplList.forEach(list => {
            if (item.Id == list.Id) {
              if (this.ggpl == 1) {
                item.SellingPrice = this.valpl;
              }
              if (this.ggpl == 2) {
                item.InventoryNum = this.valpl;
              }
              if (this.ggpl == 3) {
                item.GoodsWeight = this.valpl;
              }
              if (this.ggpl == 4) {
                item.GoodsNumbers = this.valpl;
              }
              if (this.ggpl == 5) {
                item.CostMoney = this.valpl;
              }
              if (this.ggpl == 6) {
                item.Commission = this.valpl;
              }
            }
          });
        });
      },
      //选择图片
      SelectId(msg) {
        let that = this;
        if (msg && msg.length > 0) {
          if (this.imgType == 1) {
            msg.forEach(item => {
              let obj = {
                Id: item.selectId,
                Path: that.getIconLink(item.url),
              };
              this.addMsg.CarouselImageList.push(obj);
            })
          }
          if (this.imgType == 2) {
            this.addMsg.CustomShareImage = that.getIconLink(msg[0].url);
          }
          if (this.imgType == 3) {
            let imgListIndex1 = this.imgListIndex1;
            let imgListIndex2 = this.imgListIndex2;
            this.addMsg.SpecificationList[imgListIndex1].SpecificationValueList[
              imgListIndex2
            ].Image = that.getIconLink(msg[0].url);
          }
        }
        this.changeState = false;
      },

      TbaleSelectionChange(val) {
        this.ggplList = val;
      },
      renderHeader(h, {
        column
      }) {
        // h即为cerateElement的简写，具体可看vue官方文档
        return h("div", [
          h("span", column.label),
          h("i", {
            class: "iconfont icon-xinghao1",
            style: "color:#F56C6C;float:left"
          })
        ]);
      },
      getSpeciList() {
        let msg = {
          pageIndex: 1,
          pageSize: 999,
          Name: "",
          Id: 0,
          Content: ""
        };
        this.apipost("/api/product/GetProductSpecificationPageList", msg, res => {
          if (res.data.resultCode == 1) {
            let pageData = res.data.data.pageData;
            this.speciList = pageData;
            this.speciList.forEach(item => {
              item.NewSpecList = [];
              item.checkAll = false;
              item.SpecList.forEach(val => {
                let obj = {
                  Id: item.Id,
                  Name: val
                };
                item.NewSpecList.push(obj);
              });
            });
          }
        });
      }
    },
    mounted() {
      this.getSpeciList();
    }
  };

</script>
