<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px">
      <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="classId">
        <el-cascader :options="classIdOptions" v-model="queryParams.classId" placeholder="商品分类" :show-all-levels="false"
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label="商品专区" prop="tag">
        <el-select v-model="queryParams.tag" placeholder="请选择专区" clearable size="small">
          <el-option v-for="item in tagList" :key="item.id" :label="item.tagName" :value="item.id" />
        </el-select>
      </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="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 label="库存" prop="stockStart">
        <el-input v-model="queryParams.stockStart" type="number" placeholder="库存（起）" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <span style="margin-right:15px">-</span>
      <el-form-item prop="stockEnd">
        <el-input v-model="queryParams.stockEnd" type="number" placeholder="库存（止）" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="审核状态" prop="checkStatus">
        <el-select v-model="queryParams.checkStatus" placeholder="请选择状态" clearable size="small">
          <el-option v-for="item in checkOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="商家" prop="shopId">
        <el-select v-model="queryParams.shopId" clearable filterable placeholder="请选择">
          <el-option v-for="(item,index) in shopList" :key="index" :label="item.shopName" :value="item.shopId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supplierArr">
        <el-cascader @change="show" v-model="queryParams.supplierArr" :options="supplierList"
          :props="{ value: 'id' , label: 'name'}" clearable>
          <template slot-scope="{ node, data }">
            <div>
              <span>{{ data.name }}</span>
              <!--<span style="float: right;margin-left: 10px"> {{ data.phone }} </span>-->
            </div>

          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="首页展示" prop="checkStatus">
        <el-select v-model="queryParams.isWeb" placeholder="请选择状态" clearable size="small">
          <el-option v-for="item in isWebOptions" :key="item.value" :label="item.label" :value="item.value" />
        </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="默认规格" align="center" prop="spec"  width="70" />
      <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="commission" width="70">
      </el-table-column>

      <el-table-column label="现价(元)" align="center" prop="displayprice" width="70">
      </el-table-column>
      <el-table-column label="vip价格(元)" align="center" prop="displaypriceVip" width="70">
      </el-table-column>
      <el-table-column label="采购价格" align="center" prop="displaypurchasePrice" width="70">
      </el-table-column>
      <el-table-column label="商品分类" align="center" prop="className">
      </el-table-column>
      <!--      <el-table-column label="启用规格" align="center" prop="hasSpec" >-->
      <!--        <template slot-scope="scope">-->
      <!--          <div v-if="scope.row.hasSpec == 0">不启用</div>-->
      <!--          <div v-if="scope.row.hasSpec == 1">启用</div>-->
      <!--        </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="kilograms"> </el-table-column>-->
<!--      <el-table-column label="清真" align="center" prop="halal">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="scope.row.halal == 0">是</span>-->
<!--          <span v-if="scope.row.halal== 1">否</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="定价参考" align="center" prop="pricingreference"> </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="stock" />
      <el-table-column label="商家" align="center" prop="shopName" />
      <el-table-column label="供应商" align="center" prop="supplierName" />
      <el-table-column label="上架审核" align="center" prop="checkStatus">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.checkStatus===0">待审核</el-tag>
          <el-tag type="success" v-if="scope.row.checkStatus===1">同意上架</el-tag>
          <el-tag type="danger" v-if="scope.row.checkStatus===2">拒绝上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center" prop="sort" />
      <el-table-column label="是否复制" align="center" prop="isCopy">
        <template slot-scope="scope">
          <span v-if="scope.row.isCopy == 1">是</span>
          <span v-if="scope.row.isCopy != 1">否</span>
        </template>
      </el-table-column>
      <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-edit" @click="handleCheck(scope.row)"
            v-if="checkRole(['admin'])">上架审核</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleSupplier(scope.row)"
            v-if="checkRole(['admin'])">更换供应商</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="750px" append-to-body>
      <div style="margin-bottom: 20px" v-if="isEdit===false">
        <el-button type="primary" @click="copyGoods"> 查看其他商铺商品 </el-button>
      </div>
      <el-form ref="form1" :model="form" :rules="rules1" label-width="100px">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="form.goodsName" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="首页展示" prop="checkStatus">
          <el-select v-model="form.isWeb" placeholder="请选择状态" clearable size="small">
            <el-option v-for="item in isWebOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>


        <!--        <el-form-item label="商品介绍" prop="goodsTitle">-->
        <!--          <el-input v-model="form.goodsTitle" placeholder="请输入商品介绍" type="textarea" />-->
        <!--        </el-form-item>        -->
        <el-form-item label="商品介绍" prop="goodsTitle">
          <editor v-model="form.goodsTitle" :min-height="100" />
        </el-form-item>
        <el-form-item label="商品分类1" prop="classId">
          <el-cascader :options="classIdOptions" v-model="form.classId" placeholder="商品分类1" :show-all-levels="false"
            @change="handleClassIdOptions" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="商品分类2" prop="classIdtwo">
          <el-cascader :options="classIdOptions" v-model="form.classIdtwo" placeholder="商品分类2" :show-all-levels="false"
            @change="handleClassIdOptionsTow" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="商品分类3" prop="classIdthree">
          <el-cascader :options="classIdOptions" v-model="form.classIdthree" placeholder="商品分类3"
            :show-all-levels="false" @change="handleClassIdOptionsThree" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="logo图" prop="goodsImg">
          <image-upload v-model="form.goodsImg" :limit="1" :widthHeight="true" />
        </el-form-item>
        <el-form-item label="商品视频" prop="goodsVideo">
          <video-upload v-model="form.goodsVideo" />
        </el-form-item>
        <el-form-item label="商品轮播" prop="goodsBanner">
          <image-upload v-model="form.goodsBanner" :widthHeight="true" />
        </el-form-item>
        <el-form-item label="商品详情" prop="goodsDetail">
          <image-upload v-model="form.goodsDetail" :widthHeight="true" />
        </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>-->
        <!--        </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="所属专区">
          <el-checkbox-group v-model="tagArr" :min="0" :max="1" @change="$forceUpdate()">
            <el-checkbox v-for="(tag,index) in tagList" :key="index" :label="tag.id">{{tag.tagName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="公斤(kg)" prop="kilograms">
          <el-input type="number" onkeyup="value=value.replace(/\D/g,'')" v-model="form.kilograms" placeholder="请输入公斤" />
        </el-form-item>
        <el-form-item label="清真">
          <el-radio-group v-model="form.halal">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="定价参考" prop="pricingreference">
          <el-input v-model="form.pricingreference" placeholder="请输入定价参考" />
        </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="status">
          <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="goodsBrand">
          <el-input v-model="form.goodsBrand" placeholder="请输入商品品牌" />
        </el-form-item>
        <!--<el-form-item label="产地" prop="goodsOrigin">-->
        <!--  <el-input v-model="form.goodsOrigin" placeholder="请输入产地" />-->
        <!--</el-form-item>-->
        <el-form-item label="规格" prop="goodsContent">
          <el-input v-model="form.goodsContent" placeholder="请输入规格" />
        </el-form-item>
        <el-form-item label="保质期" prop="goodsWarranty">
          <el-input v-model="form.goodsWarranty" placeholder="请输入保质期" />
        </el-form-item>
        <el-form-item label="储存方式" prop="goodsStorage">
          <el-input v-model="form.goodsStorage" placeholder="请输入储存方式" />
        </el-form-item>
        <el-form-item label="提成（元）" prop="commission">
          <el-input v-model="form.commission" placeholder="请输入提成（元）" type="number" />
        </el-form-item>
        <el-form-item label="积分" prop="integral">
          <el-input v-model="form.integral" placeholder="请输入积分" type="number" />
        </el-form-item>
        <el-form-item label="销量" prop="monthlySales">
          <el-input v-model="form.monthlySales" placeholder="请输入销量" type="number" />
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.stock" placeholder="请输入库存" type="number"
            :disabled="this.form.goodsCopy === 1 && this.$store.getters.roles != 'admin'" />
        </el-form-item>
        <el-form-item label="默认规格名" prop="spec">
          <el-input v-model="form.spec" placeholder="请输入默认规格名" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" placeholder="请输入排序" type="number" />
        </el-form-item>


        <el-form-item label="规格">
          <goods-product :goods-product-list="goodsProductList" @getGoodsProductList="setGoodsProductList"
            :goodsCopy="this.form.goodsCopy" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm"
          v-if="this.form.goodsCopy === 0 || this.$store.getters.roles == 'admin' || isEdit === false">确 定</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>

    <el-dialog title="审核上架" :visible.sync="checkOpen" width="700px" append-to-body>
      <el-form ref="checkForm" :model="checkForm" :rules="rules" label-width="100px">
        <el-form-item label="审核状态">
          <el-radio v-model="checkForm.checkStatus" :label="0">待审核</el-radio>
          <el-radio v-model="checkForm.checkStatus" :label="1">同意上架</el-radio>
          <el-radio v-model="checkForm.checkStatus" :label="2">拒绝上架</el-radio>
        </el-form-item>
        <!--<el-form-item label="拒绝原因" v-if="form.checkStatus ===2">-->
        <!--  <el-input v-model="form.reason" ></el-input>-->
        <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCheckForm">确 定</el-button>
        <el-button @click="cancelCheck">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="更换供应商" :visible.sync="supplierOpen" width="700px" append-to-body>
      <el-form ref="changeForm" :model="changeForm"  label-width="100px">
        <el-form-item label="供应商1" prop="supplierArr" v-if="changeForm.id != null" :disabled="checkRole(['admin'])">
          <el-cascader @change="show" v-model="changeForm.supplierArr" :options="supplierList"
            :props="{ value: 'id' , label: 'name'}" clearable>
            <template slot-scope="{ node, data }">
              <div>
                <span>{{ data.name }}</span>
                <span style="float: right;margin-left: 10px"> {{ data.phone }} </span>
              </div>

            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="供应商2" prop="supplierArr" v-if="changeForm.id != null" :disabled="checkRole(['admin'])">
          <el-cascader @change="show" v-model="changeForm.supplierArrTwo" :options="supplierList"
            :props="{ value: 'id' , label: 'name'}" clearable>
            <template slot-scope="{ node, data }">
              <div>
                <span>{{ data.name }}</span>
                <span style="float: right;margin-left: 10px"> {{ data.phone }} </span>
              </div>

            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="供应商3" prop="supplierArr" v-if="changeForm.id != null" :disabled="checkRole(['admin'])">
          <el-cascader @change="show" v-model="changeForm.supplierArrThree" :options="supplierList"
            :props="{ value: 'id' , label: 'name'}" clearable>
            <template slot-scope="{ node, data }">
              <div>
                <span>{{ data.name }}</span>
                <span style="float: right;margin-left: 10px"> {{ data.phone }} </span>
              </div>

            </template>
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSupplierForm">确 定</el-button>
        <el-button @click="cancelSupplier">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="其他店铺商品" :visible.sync="otherOpen" width="900px" append-to-body>
      <el-form :model="queryOther" ref="queryOtherForm" size="small" :inline="true" v-show="showSearch"
        label-width="68px">

        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="queryOther.goodsName" placeholder="请输入商品名称" clearable size="small"
            @keyup.enter.native="handleQueryOther" />
        </el-form-item>
        <el-form-item label="商品分类" prop="classId">
          <el-cascader :options="classIdOptions" v-model="queryOther.classId" placeholder="商品分类"
            :show-all-levels="false" clearable></el-cascader>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryOther">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryOther">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="otherLoading" :data="otherGoodsList">
        <el-table-column label="商品名称" align="center" prop="goodsName" />
        <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">
        </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="status">
          <template slot-scope="scope">
            <dict-tag :options="statusOptions" :value="scope.row.status" />
          </template>
        </el-table-column>
        <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="handleCopy(scope.row)"
              v-hasPermi="['mall:mallGoodsGoods:edit']">复制</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="otherTotal>0" :total="otherTotal" :page.sync="queryOther.pageNum"
        :limit.sync="queryOther.pageSize" @pagination="copyGoods" />

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelOtherOpen">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listMallGoodsGoods,
    getMallGoodsGoods,
    delMallGoodsGoods,
    addMallGoodsGoods,
    updateMallGoodsGoods,
    getClassList,
    getClassSelectList,
    getSpecList,
    updateCheckStatus,
    updateSupplier,
    listOtherGoods,
    exportMallGoodsGoods,
    exportMallGoodsGoodsScreen,
    exportMallGoodsGoodsCheck,
    Goodssort
  } from "@/api/mall/mallGoodsGoods";

  import { selectListMallGoodsTag } from "@/api/mall/mallGoodsTag";
  import { getToken } from "@/utils/auth";
  import ImageUpload from "@/components/ImageUpload";
  import goodsProduct from "./goodsProduct"
  import { checkPermi, checkRole } from "@/utils/permission";
  import { getAllShopList, listMallShopShop, selectShopShopList } from "@/api/mall/mallShopShop";
  import { exportOrder } from "@/api/mall/mallOrderOrder";

  export default {
    name: "MallGoodsGoods",
    components: {
      ImageUpload,
      goodsProduct,
    },
    data() {
      return {
        isWebOptions:[
          {
            value: 0,
            label: '否'
          },{
            value: 1,
            label: '是'
          },
        ],
        // 商家
        shopList: [],
        checkOptions: [{
            value: 0,
            label: '待审核'
          },
          {
            value: 1,
            label: '同意上架'
          },
          {
            value: 2,
            label: '拒绝上架'
          },
        ],

        // 规格列表
        goodsProductList: [],
        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: [],
        hotOptions: [],
        tipsOptions: [],
        specList: [],
        newList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        isEdit: false,
        specTitle: "",
        specOpen: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          goodsName: null,
          isRecommend: null,
          isHot: null,
          status: null,
          classId: null,
          stockStart: null,
          stockEnd: null,
          tag: null,
          checkStatus: null,
          supplierArr: [],
          supplierId: null,
          isWeb: null
        },
        // 其他店铺商品查询参数
        queryOther: {
          pageNum: 1,
          pageSize: 10,
          goodsName: null,
          classId: null,
        },
        otherTotal: 0,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          goodsName: [
            { required: true, message: "请输入商品名称", trigger: "blur" }
          ],
          // classId: [
          //   { required: true, message: "请选择商品分类", trigger: "blur" }
          // ],
          stock: [
            { required: true, message: "请输入库存", trigger: "blur" }
          ],
          spec: [
            { required: true, message: "请输入默认规格名", trigger: "blur" }
          ],
          supplierArr: [
            { required: true, message: "请选择供应商", trigger: "change" }
          ],
        },
        rules1: {
          goodsName: [
            { required: true, message: "请输入商品名称", trigger: "blur" }
          ],
          // classId: [
          //   { required: true, message: "请选择商品分类", trigger: "blur" }
          // ],
          stock: [
            { required: true, message: "请输入库存", trigger: "blur" }
          ],
          spec: [
            { required: true, message: "请输入默认规格名", trigger: "blur" }
          ],
        },
        tagList: [],
        checkOpen: false,
        // 更换供应商弹窗开关
        supplierOpen: false,
        // 级联列表
        supplierList: [],
        // 级联选择数组
        supplierArr: [],
        // 其他商品
        otherGoodsList: [],
        otherOpen: false,
        otherLoading: false,
        // 审核from
        checkForm: {},
        // 更换form
        changeForm: {},
        // 多选框
        tagArr: [],
        supplierArrTwo: [],
        supplierArrThree: []
      };
    },
    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.getClassSelect();
      this.selectTagList();
      this.allShopList();
      this.shopShopList();

    },
    methods: {
      checkRole,
      getGoodssort() {
        Goodssort().then(res => {
          if (res.code == 200) {
            console.log('哈哈哈', res)
            this.form.sort = Number(res.data) + 1
          }
        })
      },
      show() {
        console.log(this.form.supplierId)
      },
      /** 商家列表 */
      shopShopList() {
        selectShopShopList().then(response => {
          this.shopList = response.data;
        })
      },
      /** 店铺供应商级联 */
      allShopList() {
        getAllShopList().then(response => {
          this.supplierList = response.data;
        })
      },
      // 商品规格列表
      setGoodsProductList(goodsProductList) {
        this.goodsProductList = goodsProductList
      },

      //专区列表
      selectTagList() {
        selectListMallGoodsTag().then(res => {
          this.tagList = res.data
        })
      },
      add() {
        let value = {
          value: ''
        }
        this.valueList.push(value)
      },
      /** 查询商品列表 */
      getList() {
        this.loading = true;
        if (this.queryParams.classId != null) {
          let classIds = this.queryParams.classId

          if (classIds.length !== undefined) {
            this.queryParams.classId = classIds[classIds.length - 1]
          }

        }
        if (this.queryParams.supplierArr != null && this.queryParams.supplierArr.length > 1) {
          var arr = this.queryParams.supplierArr
          this.queryParams.supplierId = arr[1];
        } else {
          this.queryParams.supplierId = 0;
        }
        listMallGoodsGoods(this.queryParams).then(response => {
          this.mallGoodsGoodsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询下拉分类 */
      getClassSelect() {
        getClassSelectList().then(response => {
          this.classIdOptions = response.data;
        });
      },
      // 打开规格表
      setSpec() {
        getSpecList().then(res => {
          var arr = res.data
          for (var i = 0; i < arr.length; i++) {
            arr[i].checkList = []
          }
          var arr1 = this.form.proList
          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 || []
          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,
          tagArr: [],
          isCopy: null,
          goodsCopy: 0
        };
        this.goodsProductList = [];
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQueryOther() {
        this.queryOther.pageNum = 1;
        this.copyGoods();
      },
      /** 重置按钮操作 */
      resetQueryOther() {
        this.resetForm("queryOther");
        this.queryOther.goodsName = null;
        this.queryOther.classId = null;
        this.queryOther.isWeb = null;
        this.handleQueryOther();
      },

      /** 搜索按钮操作 */
      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.getGoodssort()
        this.reset();
        this.tagArr = [];
        this.form.isDefault = -1
        this.open = true;
        this.isEdit = false;
        this.title = "添加商品";
        if (this.valueList.length != 0) {
          let value = {
            value: ''
          }
          this.valueList = [];
          this.valueList.push(value)
        }
      },
      handleClassIdOptions(val) {

        if (val.length == 0) {
          this.form.classId = ""
        }else  if(val){
          this.form.classId = val[val.length - 1]
        }
      },
      handleClassIdOptionsTow(val) {
        if (val.length == 0) {
          this.form.classIdtwo = ""
        }else  if(val){
          this.form.classIdtwo = val[val.length - 1]
        }
      },
      handleClassIdOptionsThree(val) {
        console.log(val)
        if(val.length == 0){
          this.form.classIdthree = ""
        }else  if (val) {
          this.form.classIdthree = val[val.length - 1]
        }
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.tagArr = [];
        const id = row.id || this.ids
        getMallGoodsGoods(id).then(response => {
          this.form = response.data
          this.form.classId = Number(this.form.classId)
          this.form.classIdtwo = Number(this.form.classIdtwo)
          this.form.classIdthree = Number(this.form.classIdthree)
          // this.form.classId=item2.label
          // const reg = new RegExp("</br>", "g"); //创建正则RegExp对象
          // this.form.goodsTitler= this.form.goodsTitle.replace(reg,/<br\/>/g,"\n");
          this.open = true;
          this.isEdit = true;
          this.title = "修改商品";
          if (this.form.tag != null) {
            this.tagArr.push(this.form.tag);
          }
          if (this.form.goodsProductList) {
            this.goodsProductList = this.form.goodsProductList
          }
          if( this.form.integral == ""){
            this.form.integral =0
          }
          if( this.form.kilograms == ""){
            this.form.kilograms = 0
          }
          if( this.form.pricingreference == ""){
            this.form.pricingreference = ""
          }
          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) {
            if (response.data.proList.length > 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;
          }

          // let id=this.classIdOptions.find(el=>el.children.map(item=>item.value))
          // alert(id,'李飞钒')
          this.form.goodsCopy = response.data.isCopy;
        });
      },
      /** 提交按钮 */
      submitForm() {
        //级联选择器选中值是数组，获取二级分类的id















        if( this.form.integral == ""){
          this.form.integral =0
        }
        if( this.form.kilograms == ""){
          this.form.kilograms = 0
        }
        if( this.form.pricingreference == 0){
          this.form.pricingreference = ""
        }

        this.form.tips = "";
        for (let i = 0; i < this.valueList.length; i++) {
          let str = this.valueList[i].value
          if (str == "") {
            break
          } else {
            this.form.tips = this.form.tips + str;
            if (i != this.valueList.length - 1) {
              this.form.tips = this.form.tips + ",";
            }
          }
        }
        if (this.form.hasSpec == 0) {
          if (this.form.proList.length > 0) {
            this.form.proList = [{
              "id": undefined == this.form.proList ? "" : this.form.proList[0].id,
              "isDefault": "1",
              "productName": this.form.productName,
              "price": this.form.price,
            }];
          }
        }

        this.form.goodsProductList = this.goodsProductList
        if (this.tagArr.length > 0) {
          this.form.tag = this.tagArr[0];
        } else {
          this.form.tag = null;
        }
        // this.form.goodsTitle = this.form.goodsTitle.replace(/\n|\r\n/g,"</br>");
        this.$refs["form1"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateMallGoodsGoods(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.goodsProductList = []
                this.getList();
              });
            } else {
              console.log('+++++', this.form)
              addMallGoodsGoods(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.goodsProductList = []
                this.getList();
              });
            }
            this.tagArr = []
          }
        });
      },
      /** 修改审核 */
      handleCheck(row) {
        this.checkForm = {
          id: null,
          checkStatus: null
        };
        const id = row.id
        getMallGoodsGoods(id).then(response => {
          var obj = response.data;
          this.checkForm.id = obj.id;
          this.checkForm.checkStatus = obj.checkStatus;
          this.checkOpen = true;
        })

      },
      /** 修改审核提交 */
      submitCheckForm() {
        this.$refs["checkForm"].validate(valid => {
          if (valid) {
            if (this.checkForm.id != null) {
              updateCheckStatus(this.checkForm).then(response => {
                this.msgSuccess("修改成功");
                this.checkOpen = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 关闭审核弹窗 */
      cancelCheck() {
        this.checkOpen = false;
      },
      /** 修改供应商 */
      handleSupplier(row) {
        this.changeForm = {
          id: null,
          shopId: null,
          supplierId: null,
          supplierArr: []
        };
        const id = row.id
        getMallGoodsGoods(id).then(response => {
          var obj = response.data;
          this.changeForm.id = obj.id;
          this.supplierOpen = true;
        })

      },
      /** 供应商变更 */
      submitSupplierForm() {
        this.$refs["changeForm"].validate(valid => {
          if (valid) {
            if (this.changeForm.supplierArr.length === 1) {
              this.changeForm.shopId = this.changeForm.supplierArr[0]
            } else if (this.changeForm.supplierArr.length === 2) {
              this.changeForm.shopId = this.changeForm.supplierArr[0]
              this.changeForm.supplierId = this.changeForm.supplierArr[1]
            }

            if (this.changeForm.supplierArr.length === 1) {
              this.changeForm.shopIdTwo = this.changeForm.supplierArrTwo[0]
            } else if (this.changeForm.supplierArr.length === 2) {
              this.changeForm.shopIdTwo = this.changeForm.supplierArrTwo[0]
              this.changeForm.supplierIdTwo = this.changeForm.supplierArrTwo[1]
            }

            if (this.changeForm.supplierArr.length === 1) {
              this.changeForm.shopIdThree = this.changeForm.supplierArrThree[0]
            } else if (this.changeForm.supplierArr.length === 2) {
              this.changeForm.shopIdThree = this.changeForm.supplierArrThree[0]
              this.changeForm.supplierIdThree = this.changeForm.supplierArrThree[1]
            }





            if (this.changeForm.id != null) {
              updateSupplier(this.changeForm).then(response => {
                this.msgSuccess("修改成功");
                this.supplierOpen = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 关闭供应商弹窗 */
      cancelSupplier() {
        this.supplierOpen = false;
      },
      /** 关闭其他店铺商品弹窗 */
      cancelOtherOpen() {
        this.otherOpen = false;
      },
      /** 查看其他商铺商品 */
      copyGoods() {
        // this.otherGoodsList = [];
        this.otherLoading = true;
        if (this.queryOther.classId != null) {
          let classIds = this.queryOther.classId

          if (classIds.length !== undefined) {
            this.queryOther.classId = classIds[classIds.length - 1]
          }

        }
        listOtherGoods(this.queryOther).then(response => {
          this.otherGoodsList = response.rows;
          this.otherTotal = response.total
          this.otherLoading = false;
          this.otherOpen = true;
        })
      },
      /** 点击复制商品 */
      handleCopy(row) {
        this.reset();
        const id = row.id;
        getMallGoodsGoods(id).then(response => {
          this.form = response.data;
          console.log('befoForm', this.form)
          // this.open = true;
          // this.isEdit = false;
          // this.title = "修改商品";
          this.form.id = null;
          this.form.shopId = null;
          this.form.supplierId = null;
          this.form.checkStatus = null;
          this.form.copyId = id;
          // 级联选择
          let classId = this.form.classId;
          let classArr = [];
          for (let i = 0; i < this.classIdOptions.length; i++) {
            var temp = this.classIdOptions[i].children
            if (temp.length > 0) {
              for (let j = 0; j < temp.length; j++) {
                if (temp[j].value === classId) {
                  classArr = [this.classIdOptions[i].value, temp[j].value];
                  break;
                }
              }
            }
          }
          this.form.classId = classArr;

          if (this.form.goodsProductList) {
            this.goodsProductList = this.form.goodsProductList
            if (this.goodsProductList.length > 0) {
              for (let i = 0; i < this.goodsProductList.length; i++) {
                this.goodsProductList[i].copyId = this.goodsProductList[i].id;
                this.goodsProductList[i].id = null;
                this.goodsProductList[i].goodsId = null;
                this.goodsProductList[i].price = this.goodsProductList[i].price + 4;
              }
            }
          }

          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.form.isCopy = 1;
          this.form.goodsCopy = 1;
          console.log('form', this.form)
          console.log('proList', this.goodsProductList)
          this.otherOpen = false;
        });


      },

      /** 删除按钮操作 */
      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 goodsIds = this.ids;
        var that = this
        if (goodsIds.length === 0) {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出满足筛选条件的商品数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.exportLoading = true;
            return exportMallGoodsGoodsScreen(queryParams);
          }).then(response => {
            this.download(response.msg);
            this.exportLoading = false;
          }).catch(() => {});
        } else {
          this.$confirm('是否确认导出勾选的商品数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            that.exportLoading = true;
            return exportMallGoodsGoodsCheck(goodsIds);
          }).then(response => {
            that.download(response.msg);
            that.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>
