<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品名称" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="推荐产品" prop="isRecommend">
        <el-select v-model="queryParams.isRecommend" placeholder="请选择是否推荐" clearable size="small">
          <el-option
            v-for="dict in recommendOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="热门产品" prop="isHot">
        <el-select v-model="queryParams.isHot" placeholder="请选择是否热门" clearable size="small">
          <el-option
            v-for="dict in hotOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="定制商品" prop="isCustom">
        <el-select v-model="queryParams.isCustom" placeholder="请选择是否定制" clearable size="small">
          <el-option
            v-for="dict in custom"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="热卖产品" prop="isHot">-->
<!--        <el-input-->
<!--          v-model="queryParams.isHot"-->
<!--          placeholder="请输入是否是热卖产品 0不是 1是"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </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="['mall:mallGoodsGoods: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="['mall:mallGoodsGoods: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="['mall:mallGoodsGoods:remove']"
        >删除</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['mall:mallGoodsGoods:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="mallGoodsGoodsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="主键ID" align="center" prop="id" />-->
      <el-table-column label="商品名称" align="center" prop="goodsName" />
      <el-table-column label="商品标题" align="center" prop="goodsTitle" />
      <el-table-column label="商品logo" align="center" prop="goodsImg" >
      <template slot-scope="scope">
        <el-image :src="scope.row.goodsImg" style="width: 80px" :preview-src-list="[scope.row.goodsImg]"/>
      </template>
      </el-table-column>
      <el-table-column label="商品分类" align="center" prop="className" >
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="classNameOptions" :value="scope.row.className"/>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="启用规格" align="center" prop="hasSpec">
      <template slot-scope="scope">
        <dict-tag :options="hasSpecOptions" :value="scope.row.hasSpec"/>
      </template>
      </el-table-column>
      <el-table-column label="标签" align="center" prop="tips" />
      <el-table-column label="推荐产品" align="center" prop="isRecommend" >
      <template slot-scope="scope">
        <dict-tag :options="recommendOptions" :value="scope.row.isRecommend"/>
      </template>
      </el-table-column>
      <el-table-column label="热门产品" align="center" prop="isHot" >
        <template slot-scope="scope">
          <dict-tag :options="hotOptions" :value="scope.row.isHot"/>
        </template>
      </el-table-column>
      <el-table-column label="定制商品" align="center" prop="isCustom" >
        <template slot-scope="scope">
          <dict-tag :options="custom" :value="scope.row.isCustom"/>
        </template>
      </el-table-column>
      <!--<el-table-column label="热卖产品" align="center" prop="isHot" />-->
      <el-table-column label="状态" align="center" prop="status" >
      <template slot-scope="scope">
        <dict-tag :options="statusOptions" :value="scope.row.status"/>
      </template>
      </el-table-column>
      <el-table-column label="排序" align="center" prop="sort" />
      <el-table-column label="添加时间" align="center" prop="createAt" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['mall:mallGoodsGoods:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['mall:mallGoodsGoods: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="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="form.goodsName" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品标题" prop="goodsTitle">
          <el-input v-model="form.goodsTitle" placeholder="请输入商品标题" />
        </el-form-item>
        <el-form-item label="商品分类" prop="classId">
<!--          <el-cascader :options="fenlei"-->
<!--                       v-model="ruleForm.classId"-->
<!--                       @change="conId"-->
<!--                       :show-all-levels="false"-->
<!--                       :props="props"></el-cascader>-->
          <el-select v-model="form.classId" placeholder="商品分类" clearable size="small">
            <el-option
              v-for="dict in classIdOptions"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="logo图" prop="goodsImg">
          <el-upload
            class="upload-demo"
            :limit="1"
            accept=".jpg, .png"
            :action="upload.url"
            :file-list="upload.fileList"
            :headers="upload.headers"
            list-type="picture"
            :on-success="handleFileSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过1M
            </div>
          </el-upload>
          <el-input v-model="form.goodsImg" v-if="false" />
        </el-form-item>

        <el-form-item label="商品轮播" prop="goodsBanner">
          <el-upload
            class="upload-demo"
            :limit="6"
            accept=".jpg, .png"
            :action="upload.url"
            :file-list="upload.fileBannersList"
            :headers="upload.headers"
            list-type="picture"
            :on-success="handleBannerSuccess"
            :on-remove="onZxcxsqsRemoveTxt"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过1M
            </div>
          </el-upload>
          <el-input v-model="form.goodsBanner" v-if="false" />
        </el-form-item>

        <el-form-item label="商品详情" prop="goodsDetail">
          <el-upload
            class="upload-demo"
            :limit="6"
            accept=".jpg, .png"
            :action="upload.url"
            :file-list="upload.fileDetailList"
            :headers="upload.headers"
            list-type="picture"
            :on-success="handleDetailSuccess"
            :on-remove="onDetailRemoveTxt"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过1M
            </div>
          </el-upload>
          <el-input v-model="form.goodsDetail" v-if="false" />
        </el-form-item>

<!--        <el-form-item label="规格详情" prop="spec">-->
<!--          <el-input v-model="form.spec" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="参数详情" prop="param">-->
<!--          <el-input v-model="form.param" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="启用规格" prop="hasSpec">-->
<!--          <el-input v-model="form.hasSpec" placeholder="请输入启用规格 0=不启用,1=启用" />-->
<!--        </el-form-item>-->
        <el-form-item label="使用规格"
                      prop="hasSpec">
          <el-radio-group v-model="form.hasSpec"
                          v-if="!form.id">
            <el-radio :label="0">不使用规格</el-radio>
            <el-radio :label="1">使用规格</el-radio>
          </el-radio-group>
          <span v-if="form.id">{{form.hasSpec==1?'使用规格':'不使用规格'}}</span>
        </el-form-item>
        <el-form-item label="规格"
                      prop="proList"
                      v-if="form.hasSpec==1">
          <el-button type="primary"
                     size="mini"
                     @click="setSpec()">规格管理</el-button>
<!--          <span style="padding-left:10px;">已选：{{form.proList&&form.proList.length>0?'':'无'}}</span>-->
        </el-form-item>


        <el-form-item label="规格名称"
                      prop="productName"
                      v-if="form.hasSpec==0">
          <el-input v-model="form.productName"
                    placeholder="请输入规格名称"></el-input>
        </el-form-item>
        <el-form-item label="单价"
                      prop="price"
                      v-if="form.hasSpec==0">
          <el-input v-model="form.price"
                    placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="库存"
                      prop="stock"
                      v-if="form.hasSpec==0">
          <el-input v-model="form.stock"
                    placeholder="请输入库存"></el-input>
        </el-form-item>

        <el-form-item label="推荐产品" prop="isRecommend">
          <el-radio-group v-model="form.isRecommend">
            <el-radio
              v-for="dict in recommendOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="热门产品" prop="isHot">
          <el-radio-group v-model="form.isHot">
            <el-radio
              v-for="dict in hotOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="定制商品" prop="isCustom">
          <el-radio-group v-model="form.isCustom">
            <el-radio
              v-for="dict in custom"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="标签" prop="tips">
          <div v-for="(item,index) in valueList" :key="index">
            <input v-model="item.value" type="text"/>
            <span v-if="item.value" @click="add">  +</span>
          </div>
        </el-form-item>

        <!--<el-form-item label="热卖产品" prop="isHot">-->
          <!--<el-input v-model="form.isHot" placeholder="请输入是否是热卖产品 0 不是 1 是" />-->
        <!--</el-form-item>-->
        <el-form-item label="状态" prop="status">
<!--          0 上架 1 下架 2 删除-->
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
<!--        <el-form-item label="分享时的图片" prop="shareImg">-->
<!--          <el-input v-model="form.shareImg" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="分享时的标题" prop="shareTitle">-->
<!--          <el-input v-model="form.shareTitle" placeholder="请输入分享时的标题" />-->
<!--        </el-form-item>-->
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 规格选择对话框 -->
    <el-dialog :title="specTitle" :visible.sync="specOpen" width="700px" append-to-body>
      <!-- 内层弹框 -->
      <div class="speclist"
           v-for="item in specList"
           :key="item.id">
        <span>{{item.name}}</span>
        <div class="specR">
          <el-checkbox-group v-model="item.checkList">
            <el-checkbox :label="it"
                         v-for="it in item.spec"
                         :key="it.id">{{it.value}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <el-button type="primary"
                 size="mini"
                 :disabled="isEdit"
                 @click="shengcheng">生成规格表</el-button>
<!--      :rules="rules1"-->
      <el-form inline

               class="splist"
               :ref="'guiform'+index"
               v-for="(item,index) in newList"
               :key="'index'+index"
               :model="item">
        <el-form-item prop="name">
          <span class="tit">{{item.specName}}</span>
        </el-form-item>
        <el-form-item prop="productName">
          <el-input style="width:150px;margin-right:10px"
                    placeholder="请输入产品规格名称"
                    v-model="item.productName" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item prop="price">
          <el-input type="number"
                    placeholder="请输入价格"
                    v-model="item.price"
                    style="width:150px;margin-right:10px"
                    step="0.01"></el-input>
        </el-form-item>
        <el-form-item prop="stock">
          <el-input type="number"
                    placeholder="请输入库存"
                    v-model="item.stock"
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item prop="isDefault">
          <el-radio v-model="form.isDefault"
                    :label="index"
                    @change="setDefault">默认</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormSpec">确 定</el-button>
        <el-button @click="specClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMallGoodsGoods, getMallGoodsGoods, delMallGoodsGoods, addMallGoodsGoods, updateMallGoodsGoods, getClassList,getSpecList,exportMallGoodsGoods } from "@/api/mall/mallGoodsGoods";
import { getToken } from "@/utils/auth";
import ImageUpload from "@/components/ImageUpload";

export default {
  name: "MallGoodsGoods",
  components: {
    ImageUpload,
  },
  data() {
    return {
      valueList:[
        {value:''}
      ],
      value:'',
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload",
        // 上传的文件列表
        fileList: [],
        // 上传的文件列表
        fileBannersList: [],
        // 上传的文件列表
        fileDetailList: [],
      },
      goodsBanner:[],
      goodsDetail:[],
      // 商品表格数据
      mallGoodsGoodsList: [],
      statusOptions: [],
      // 类型数据字典
      classIdOptions: [],
      recommendOptions: [],
      hasSpecOptions: [],
      classNameOptions: [],
      hotOptions:[],
      custom:[],
      tipsOptions:[],
      specList: [],
      newList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isEdit: false,
      specTitle:"",
      specOpen:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodsName: null,
        isRecommend: null,
        isHot: null,
        status: null,
        isCustom: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.getDicts("mall_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("mall_goods_recommend").then(response => {
      this.recommendOptions = response.data;
    });
    this.getDicts("mall_goods_hot").then(response => {
      this.hotOptions = response.data;
    });

    this.getDicts("mall_goods_custom").then(response => {
      this.custom = response.data;
    });
    this.getDicts("mall_specification").then(response => {
      this.hasSpecOptions = response.data;
    });
    this.getClassSelect();
  },
  methods: {
    add(){
      let value = {
        value:''
      }
      this.valueList.push(value)
    },
    /** 查询商品列表 */
    getList() {
      this.loading = true;
      listMallGoodsGoods(this.queryParams).then(response => {
        this.mallGoodsGoodsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询分类 */
    getClassSelect() {
      getClassList().then(response => {
        this.classIdOptions = response.data;
      });
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.form.goodsImg = response.url;
    },

    handleBannerSuccess(response, file, fileBannersList) {
      this.goodsBanner.push(response.url);
      this.form.goodsBanner = JSON.stringify(this.goodsBanner);

    },

    onZxcxsqsRemoveTxt(file, fileBannersList) {
      this.goodsBanner = [];
      for (var i = 0; i <= fileBannersList.length; i++) {
        this.goodsBanner.push(fileBannersList[i].response.url);
        this.form.goodsBanner = JSON.stringify(this.goodsBanner);
      }
    },

    handleDetailSuccess(response, file, fileDetailList) {
      this.goodsDetail.push(response.url);
      this.form.goodsDetail = JSON.stringify(this.goodsDetail);

    },

    onDetailRemoveTxt(file, fileDetailList) {
      this.goodsDetail = [];
      for (var i = 0; i <= fileDetailList.length; i++) {
        this.goodsDetail.push(fileDetailList[i].response.url);
        this.form.goodsDetail = JSON.stringify(this.goodsDetail);
      }
    },

    // 打开规格表
    setSpec () {
      console.log("打开规格")
      getSpecList().then(res => {
        console.log(res)
        var arr = res.data
        for (var i = 0; i < arr.length; i++) {
          arr[i].checkList = []
        }
        var arr1 = this.form.proList
        console.log("打开规格00")
        console.log(arr1)
        if (arr1 && arr1.length > 0) {
          for (var i = 0; i < arr1.length; i++) {
            if (arr1[i].isDefault == '1') {
              this.form.isDefault = i;
              break;
            }
          }
        }
        this.newList = this.form.proList || []
        console.log("打开规格11")
        console.log(this.newList)
        this.specList = arr
        // this.interpop = true
        this.specOpen = true;

      })

    },
    // 生成规格表
    shengcheng () {
      var a = [...this.specList]
      var arr = []
      var arr1 = []
      var arr2 = []
      if (!(a[1] && a[1].checkList && a[1].checkList.length > 0)) {
        a.splice(1, 2)
      }
      if (!(a[0] && a[0].checkList && a[0].checkList.length > 0)) {
        a.splice(0, 1)
      }
      var count =0;
      a.forEach(item =>{
        if (item.checkList.length>0){
          count ++;
        }
      })
      if (count>2){
        this.$message.error('最多选择两个规格的值')
        return
      }

      if (count == 0) {
        this.$message.error('请至少选择一种规格')
        return
      } else if (count == 1) {
        var arrx = []
        var b = [];
        a.forEach(item =>{
          if (item.checkList.length>0){
            b = item.checkList;
            b.forEach(itb => {
              arr.push({ id: itb.id, value: itb.value, productName: item.name + ':' + itb.value, specName: itb.value })
              arrx.push({ name: item.name,  specId: item.id, id: itb.id, value: itb.value })
            })
            arr2.push({ name: item.name,  specId: item.id, spec: arrx })
          }
        })
      } else if (count == 2) {
        var arrx = []
        var countN=0;
        var b1 = {};
        var b2 = {};
        a.forEach(item =>{
          if (item.checkList.length>0){
            if (countN==0){
              b1 = item;
              countN++;
            }else {
              b2 = item;
            }
          }
        })
        var b11= b1.checkList;
        var b22= b2.checkList;
        b11.forEach(item =>{
          arrx.push({ name: b1.name, id: b11.id, specId: b11.id, value: item.value , isClick: '0'})
          b22.forEach(item2 => {
            arr.push({ id: null, productName: b1.name + ':' + item.value + '*' + b2.name + ':' + item2.value, specName:  item.value + ' '+ item2.value })
          })
        })
        arr2.push({ name: b1.name,  specId: b1.id, spec: arrx })
        arrx = []
        b22.forEach(item2 => {
          arrx.push({ name: b2.name, id: b22.id, specId: b22.id, value: item2.value , isClick: "0"})
        })
        arr2.push({ name: b2.name,  specId: b2.id, spec: arrx })

      }
      this.newList = arr
      this.spec = arr2
      // this.form.isDefault = -1
    },
    // 修改默认后强制更新视图
    setDefault () {
      this.$forceUpdate();
    },
    // 修改默认后强制更新视图
    submitFormSpec () {
      if (!this.newList || this.newList.length == 0) {
        this.$message.error('请生成规格表')
        return
      } else if (this.form.isDefault == -1) {
        this.$message.error('请选择默认规格')
        return;
      } else {
        var flag = true
        for (var i = 0; i < this.newList.length; i++) {
          this.$refs['guiform' + i][0].validate((valid) => {
            if (!valid) {
              flag = false
            }
          })
        }
        if (flag) {
          var a = this.newList
          for (var i = 0; i < a.length; i++) {
            a[i].isDefault = this.form.isDefault == i ? '1' : '0'
          }
          this.form.proList = a
          this.form.spec = JSON.stringify(this.spec)
          this.newList = []
          this.specOpen = false
        }
      }
      // this.specOpen = false;
    },
    // 修改默认后强制更新视图
    specClose () {
      this.specOpen = false;
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        goodsName: null,
        goodsTitle: null,
        classId: null,
        goodsImg: null,
        postFee: null,
        monthlySales: null,
        stock: null,
        spec: null,
        param: null,
        hasSpec: null,
        isRecommend: null,
        isHot: null,
        status: "0",
        shareImg: null,
        shareTitle: null,
        sort: null,
        tips: null,
        createAt: null,
        updateAt: null,
        delFlag: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    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.form.isDefault = -1
      this.open = true;
      this.isEdit = false;
      this.title = "添加商品";
      this.upload.fileList = [];
      this.upload.fileBannersList = [];
      this.upload.fileDetailList = [];

      if (this.valueList.length != 0){
        let value = {
          value:''
        }
        this.valueList = [];
        this.valueList.push(value)
      }

      this.goodsBanner = [];
      this.goodsDetail = [];
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getMallGoodsGoods(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.isEdit = true;
        this.title = "修改商品";
        let valueList = this.form.tips.split(",");

        this.valueList = [];
        valueList.map(item=>{
          let value = {
            value:''
          }
          value.value = item
          this.valueList.push(value)
        })


        if (this.form.hasSpec==0){
          this.form.productName=response.data.proList[0].productName;
          this.form.price=response.data.proList[0].price;
          this.form.stock=response.data.proList[0].stock;
        }
      });

      this.upload.fileList = [];
      this.upload.fileBannersList = [];
      this.upload.fileDetailList = [];

      this.upload.fileList = [{ name: this.form.fileName, url: row.goodsImg }];

      for (var i = 0; i < JSON.parse(row.goodsBanner).length; i++) {
        var obj = {
          response : {
            url: JSON.parse(row.goodsBanner)[i],
            name: this.form.fileName
          },
          url: JSON.parse(row.goodsBanner)[i],
          name: this.form.fileName
        };
        this.upload.fileBannersList.push(obj);
        this.goodsBanner.push(JSON.parse(row.goodsBanner)[i]);
        this.form.goodsBanner = JSON.stringify(this.goodsBanner);
      }


      for (var i = 0; i < JSON.parse(row.goodsDetail).length; i++) {
        var obj = {
          response : {
            url: JSON.parse(row.goodsDetail)[i],
            name: this.form.fileName
          },
          url: JSON.parse(row.goodsDetail)[i],
          name: this.form.fileName
        };
        this.upload.fileDetailList.push(obj);
        this.goodsDetail.push(JSON.parse(row.goodsDetail)[i]);
        this.form.goodsDetail = JSON.stringify(this.goodsDetail);
      }
    },



    /** 提交按钮 */
    submitForm() {
      this.form.tips = "";
      console.log(this.valueList)
      for (let i = 0; i < this.valueList.length ; i++) {
        let str = this.valueList[i].value
        console.log(str)
        if (str=="") {
          break
        }else {
          this.form.tips = this.form.tips + str;
          if (i != this.valueList.length-1){
            this.form.tips = this.form.tips + ",";
          }
        }
      }
      console.log(this.form.tips)
      if (this.form.hasSpec ==0){
        this.form.proList=[{"id":undefined==this.form.proList?"":this.form.proList[0].id, "isDefault" : "1", "productName" : this.form.productName,
          "price":this.form.price, "stock" : this.form.stock}];

        // var arr = [];
        // var arrx = [];
        // arrx.push({ name: '', value: this.form.productName ,isClick:'0'})
        // arr.push({ name: '',  specId: '', spec: arrx })
        // this.form.spec = JSON.stringify(arr)
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateMallGoodsGoods(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMallGoodsGoods(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除商品编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delMallGoodsGoods(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有商品数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportMallGoodsGoods(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>


<style lang="scss" scoped>

 .el-checkbox__input.is-checked .el-checkbox__inner,
 .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
 .el-radio__input.is-checked + .el-radio__label {
   color: #0655ce;
 }
 .el-radio__input.is-checked .el-radio__inner {
   background-color: #0655ce;
   border-color: #0655ce;
 }
 .el-input.is-disabled .el-input__inner,
 .el-textarea.is-disabled .el-textarea__inner {
   color: #606266;
   background-color: #fff;
   cursor: default;
 }
.main {
  margin: 20px;
  background: #fff;
  .serbox {
    height: 60px;
    padding: 0 20px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    .left {
      display: flex;
      .inp {
        margin-left: 20px;
      }
    }
  }
}
.table {
  border: 1px solid #eee;
  margin: 20px;
}
.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 60px;
}

.speclist {
  display: flex;
  margin-bottom: 20px;
  > span {
    display: inline-block;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .specR {
    width: calc(100% - 80px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .sp-right {
      margin: 0 10px;
    }
  }
}
.splist {
  // border: 1px solid red;
  display: flex;
  align-items: center;
  margin: 20px 0;
  .tit {
    // border: 1px solid red;
    width: 80px;
  }
}
.alog-box {
  width: calc(100% - 100px);
  background: #fff;
  border: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

</style>
