<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择商品状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_yes_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="规格" prop="ruleId">
        <el-input
          v-model="queryParams.ruleId"
          placeholder="请输入规格"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="brandId">
        <el-input
          v-model="queryParams.brandId"
          placeholder="请输入品牌"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['product:info:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['product:info:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['product:info:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['product:info:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键" align="center" prop="id" />
      <el-table-column label="商品名称" align="center" prop="name" />
      <el-table-column label="商品描述" align="center" prop="introduction" />
      <el-table-column label="主类型" align="center" prop="mianType" />
      <el-table-column label="父类型" align="center" prop="parentType" />
      <el-table-column label="商品类型" align="center" prop="type" />
      <el-table-column label="商品图片" align="center" prop="image" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.image" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="商品轮播图" align="center" prop="carouselImages" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="规格" align="center" prop="ruleId" />
      <el-table-column label="品牌" align="center" prop="brandId" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button class="link-type" @click="toProjectDetail(scope.row.id)">
            商品详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['product:info:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['product:info:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改商品信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-steps :active="stepNumber" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="品类属性"></el-step>
        <el-step title="商品规格"></el-step>
        <el-step title="商品描述"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div v-show="stepNumber === 0">
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入商品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品状态" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="品牌" prop="brandId">
                <el-select
                  v-model="form.brandId"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteSearchBrandList"
                  :loading="loading">
                  <el-option
                    v-for="brand in brandList"
                    :key="brand.id"
                    :label="brand.nam"
                    :value="brand.id">
                    <el-row>
                      <image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
                      <div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
                    </el-row>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="商品图片" prop="image">
              <image-upload v-model="form.image"/>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="商品轮播图" prop="carouselImages">
              <image-upload v-model="form.carouselImages"/>
            </el-form-item>
          </el-row>
        </div>
        <div v-show="stepNumber === 1">
          <el-form-item label="品类" prop="type">
            <el-cascader
              style="width: 100%"
              v-model="categoryOptionValue"
              clearable
              :props="{'value': 'id', 'label': 'name'}"
              :options="categoryOptions"></el-cascader>
          </el-form-item>
          <el-empty v-show="categoryOptionValue.length === 0" description="请选择品类，在进行操作"></el-empty>
          <el-tabs v-show="categoryOptionValue.length > 0" v-model="activeName" type="border-card">
            <el-tab-pane label="商品属性组" name="attributeGroup">
              <el-row style="overflow-x: auto; height: 300px;">
                <el-col :span="6" v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>属性组【{{templateAttributeGroup.groupName}}】</span>
                    </div>
                    <div style="height: 200px; width: 100%;">
                      <el-form ref="templateAttributeGroupForm" label-width="80px">
                        <el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
                          <el-input v-model="attribute.value"></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="商品属性" name="attribute">
              <el-row style="overflow-x: auto; height: 300px;">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
                    <el-form-item :label="templateAttribute.name" >
                      <el-input v-model="templateAttribute.value"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="自有属性" name="third">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>添加商品属性</span>
                </div>
                <el-row>
                  <el-button v-show="!customAttributeFormStatus" @click="customAttributeFormStatus = true">添加自有属性</el-button>
                  <el-form v-show="customAttributeFormStatus" :inline="true" :model="customAttributeForm" class="demo-form-inline">
                    <el-form-item label="属性编码">
                      <el-input v-model="customAttributeForm.code" placeholder="属性编码"></el-input>
                    </el-form-item>
                    <el-form-item label="属性名称">
                      <el-input v-model="customAttributeForm.name" placeholder="属性名称"></el-input>
                    </el-form-item>
                    <el-form-item label="属性值">
                      <el-input v-model="customAttributeForm.value" placeholder="属性值"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="saveCustomAttribute">确定</el-button>
                    </el-form-item>
                  </el-form>
                </el-row>
              </el-card>

              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>选择属性</span>
                </div>
                <el-row style="height: 80px; overflow-y: auto">
                  <el-checkbox-group v-model="attributeIdCheckedList" @change="attributeCheckedFun">
                    <el-col :span="4" v-for="attribute in categoryCommonElement.attributeList" style="margin: 5px 0">
                      <el-checkbox :label="attribute.id" :value="attribute.id" :key="attribute.id" border>{{attribute.name}}</el-checkbox>
                    </el-col>
                  </el-checkbox-group>
                </el-row>
              </el-card>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>属性值填写</span>
                </div>
                <el-row style="overflow-x: auto; height: 300px;">
                  <el-form ref="attributeForm" :model="form" label-width="80px">
                    <el-col :span="6" v-for="attribute in attributeCheckedList">
                      <el-form-item :label="attribute.name">
                        <el-input v-model="attribute.value"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-row>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-show="stepNumber === 2">
          <el-form-item label="规格" prop="ruleId">
            <el-select v-model="form.ruleId" placeholder="请选择" @change="changeRule" style="width: 100%;">
              <el-option
                v-for="rule in ruleList"
                :key="rule.id"
                :label="rule.name"
                :value="rule.id">
                <span>{{rule.name}} - {{rule.ruleAttrList.map(ruleAttr => ruleAttr.name).toString()}}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form :inline="true" :model="oneSettingForm" class="demo-form-inline">
            <el-form-item label="图片">
              <image-upload
                :limit="1"
                :is-show-tip="false"
                v-model="oneSettingForm.image" placeholder="审批人"></image-upload>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="oneSettingForm.price" placeholder="价格"></el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input v-model="oneSettingForm.stock" placeholder="库存"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="oneSetting">一键设置</el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="skuList"
            border
            max-height="500"
            style="width: 100%">
            <el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
              <template slot-scope="scope">
                <span v-if="title.prop.indexOf('prop') > -1">{{scope.row[title.prop]}}</span>
                <el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]" :precision="2" :step="0.01"></el-input-number>
                <image-upload v-else-if="['image'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]"
                :limit="1"
                :is-show-tip="false"
                ></image-upload>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="stepNumber === 3">
          <el-form-item label="商品描述" prop="introduction">
            <editor v-model="form.introduction" :min-height="192"/>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-top: 12px;" @click="last" v-if="stepNumber > 0">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next" v-if="stepNumber < 3">下一步</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
import {listBrand} from "@/api/product/brand";
import {getTemplateAttribute, listCategory} from "@/api/product/category";
import {listRule} from "@/api/product/rule";
import {addAttribute} from "@/api/product/attribute";

export default {
  name: "Info",
  dicts: ['sys_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        introduction: null,
        mianType: null,
        parentType: null,
        type: null,
        image: null,
        carouselImages: null,
        status: null,
        ruleId: null,
        brandId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "商品状态不能为空", trigger: "blur" }
        ],
        brandId: [
          { required: true, message: "商品品牌不能为空", trigger: "blur" }
        ],
        image: [
          { required: true, message: "商品图片不能为空", trigger: "blur" }
        ],
        carouselImages: [
          { required: true, message: "商品轮播图不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "商品品类不能为空", trigger: "blur" }
        ],
        ruleId: [
          { required: true, message: "商品规格不能为空", trigger: "blur" }
        ],
      },
      rulesTemplateMap: {
        0: ["name", "status", "brandId", "image", "carouselImages"],
        1: ["type"],
        2: ["ruleId"],
      },
      stepNumber: 0,
      brandList: [],
      categoryOptions: [],
      categoryOptionValue: [],
      ruleList: [],
      activeName: "attributeGroup",
      customAttributeForm: {

      },
      customAttributeFormStatus: false,
      attributeIdCheckedList: [],
      attributeCheckedList: [],
      categoryCommonElement: {
        templateAttributeGroupList: [],
        templateAttributeList: [],
        attributeList: []
      },
      templateTitleList: [
        {
          "label":"规格图片",
          "prop":"image"
        },
        {
          "label":"商品库存",
          "prop":"stock"
        }, {
          "label":"商品价格",
          "prop":"price"
        }
      ],
      titleList: [],
      skuList: [],
      oneSettingForm: {
        "image": null,
        "stock": null,
        "price": null
      }
    };
  },
  watch: {
    categoryOptionValue: {
      handler(value){
        if (value !== null && value !== undefined && value.length > 0){
          this.form.mianType = value[0];
          this.form.parentType = value[1];
          this.form.type = value[2];
        }else {
          this.form.mianType = null;
          this.form.parentType = null;
          this.form.type = null;
        }
      }
    },
    "form.type": {
      handler(value) {
        console.log(value)
        if (value != null){
          getTemplateAttribute(value).then(response => {
            const {data} = response;
            const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
            this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
            this.categoryCommonElement.templateAttributeList = templateAttributeList;
            this.categoryCommonElement.attributeList = attributeList;
          })
        }

      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    toProjectDetail(detailId){
      let url = `${window.location.origin}/product-detail/${detailId}`;
      window.open(url)
    },
    oneSetting(){
      this.skuList.forEach(skuInfo => {
        skuInfo.image = this.oneSettingForm.image;
        skuInfo.stock = this.oneSettingForm.stock;
        skuInfo.price = this.oneSettingForm.price;
      })
    },
    changeRule(ruleId){
      this.titleList = []
      let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
      const {ruleAttrList} = ruleInfo;
      let skuTotal = 1;
      for (let ruleAttrListKey in ruleAttrList) {
        let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
        this.titleList.push({
          "label":ruleAttrInfo.name,
          "prop":"prop"+ruleAttrListKey
        })
        skuTotal = skuTotal * ruleAttrInfo.valueList.length;
      }
      this.titleList.push(...this.templateTitleList) ;
      console.log(this.titleList);
      this.skuList = [];
      for (let i = 0; i < skuTotal; i++) {
        this.skuList.push(
          {
            "image": null,
            "price": 85.62,
            "stock": 236
          }
        );
      }
      // currentIndex 当前下标
      for (let currentIndex in ruleAttrList) {
        let ruleAttrInfo = ruleAttrList[currentIndex];
        // 连续出现次数  循环出现次数
        let continuousSize = 1, forSize = 1;
        for (let continuousIndex = parseInt(currentIndex) + 1 ; continuousIndex < ruleAttrList.length ; continuousIndex++ ){
          continuousSize = continuousSize * ruleAttrList[continuousIndex].valueList.length;
        }
        for (let forIndex = parseInt(currentIndex) - 1; forIndex >= 0; forIndex--){
          forSize = forSize * ruleAttrList[forIndex].valueList.length
        }
        console.log(`${ruleAttrInfo.name} 规格 连续出现次数：${continuousSize}  循环出现次数：${forSize}`)
        let counter = 0;
        for (let forIndex = 0; forIndex < forSize; forIndex++) {
          const {valueList} = ruleAttrInfo;
          valueList.forEach(value => {
            for (let continuousIndex = 0; continuousIndex < continuousSize; continuousIndex++) {
              this.skuList[counter++]["prop"+currentIndex] = value;
            }
          })
        }
      }
    },
    saveCustomAttribute(){
      addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
        if (response.code === 200){
          // 添加逻辑
          let attributeId = response.data,
              code = this.customAttributeForm.code,
              name = this.customAttributeForm.name,
              value = this.customAttributeForm.value;
          // categoryCommonElement / attributeIdCheckedList / attributeCheckedList
          this.categoryCommonElement.attributeList.push({
            "id": attributeId,
            "name": name,
            "code": code
          });
          this.attributeIdCheckedList.push(attributeId);
          this.attributeCheckedList.push(
            {
              "id": attributeId,
              "name": name,
              "value": value
            }
          );
          this.customAttributeForm = {}
          this.customAttributeFormStatus = false;
        }
      })
    },
    attributeCheckedFun() {
      // attributeIdCheckedList -> attributeCheckedList 不在
      // 1 -> ID 1 : attributeCheckedList[] -> 1
      // 2 -> ID 3 : attributeCheckedList[1] -> 3
      let attributeId =this.attributeIdCheckedList
        .find(attributeId =>
          this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1
        )
      if (attributeId !== undefined){
        let attributeInfo = this.categoryCommonElement.attributeList.find(attributeInfo => attributeInfo.id === attributeId);
        this.attributeCheckedList.push(attributeInfo);
      }else {
        // attributeIdCheckedList [3] : attributeCheckedList [] -> [3]
        // attributeIdCheckedList [3,5] : attributeCheckedList [3] -> [3,5]
        // attributeIdCheckedList [3,5,9] : attributeCheckedList [3,5] -> [3,5,9]
        // attributeIdCheckedList [3,9] : attributeCheckedList [3,5,9] -> [3,9]
        // attributeCheckedList 集合  不在 attributeIdCheckedList 集合的元素，然后删除
        let attributeChecked = this.attributeCheckedList.find(attributeChecked => this.attributeIdCheckedList.indexOf(attributeChecked.id) === -1);
        this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked), 1);
      }

    },
    initRuleList(){
      listRule({"params[isPage]": false}).then(response => {
        this.ruleList = response.data;
      });
    },
    initCategoryTree(){
      listCategory().then(response => {
        this.categoryOptions = [];
        this.categoryOptions = this.handleTree(response.data, "id", "parentId");
        console.log(this.categoryOptions)
      });
    },
    remoteSearchBrandList(queryValue){
      listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
        this.brandList = response.data;
      });
    },
    last() {
      this.stepNumber--
    },
    next() {
      let isValidate = true;
      this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
        console.log(valid)
        if (valid) {
          isValidate = false;
        }
      });
      if (isValidate){
        this.stepNumber++
      }
    },
    /** 查询商品信息列表 */
    getList() {
      this.loading = true;
      listInfo(this.queryParams).then(response => {
        this.infoList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        introduction: null,
        mianType: null,
        parentType: null,
        type: null,
        image: null,
        carouselImages: null,
        status: null,
        ruleId: null,
        brandId: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
      this.initCategoryTree();
      this.initRuleList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getInfo(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改商品信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let attrValueList = [];
          for (const templateAttributeGroup of this.categoryCommonElement.templateAttributeGroupList) {
            templateAttributeGroup.attributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
          }

          this.categoryCommonElement.templateAttributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
          this.attributeCheckedList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
          let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === this.form.ruleId);
          const {ruleAttrList} = ruleInfo;
          let ruleAttrSize = ruleAttrList.length;
          let productSkuList = this.skuList.map(skuInfo => {
            let sku = "";
            for (let index = 0; ; index++) {
              sku += skuInfo["prop"+index];
              if (index+1 >= ruleAttrSize){
                break;
              }else {
                sku += "-";
              }
            }
            return {
              sku: sku,
              image: skuInfo.image,
              stock: skuInfo.stock,
              price: skuInfo.price
            }
          })
          let productAddReq = {
            projectAddModel: this.form,
            attrValueList: attrValueList,
            productSkuList: productSkuList
          };
          console.log(productAddReq)
          if (this.form.id != null) {
            updateInfo(productAddReq).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInfo(productAddReq).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
        return delInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('product/info/export', {
        ...this.queryParams
      }, `info_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.el-select-dropdown__item{
  height: 45px;
}
.box-card {
  margin: 10px;
}
</style>
