<template>
  <div class="app-container">
    <div class="tab-container clearfix">
      <div class="tab-list fl">
        <div class="item" :class="screenForm.type === '' ? 'current' : ''" @click="changeType('')">
          全部({{ goodsStateCount.total ? goodsStateCount.total : 0 }})
        </div>
        <div class="item" :class="screenForm.type === 'S' ? 'current' : ''" @click="changeType('S')">
          出售中({{ goodsStateCount.csz ? goodsStateCount.csz : 0 }})
        </div>
        <div class="item" :class="screenForm.type === 'O' ? 'current' : ''" @click="changeType('O')">
          已售罄({{ goodsStateCount.ysq ? goodsStateCount.ysq : 0 }})
        </div>
        <div class="item" :class="screenForm.type === 'W' ? 'current' : ''" @click="changeType('W')">
          仓库中({{ goodsStateCount.ckz ? goodsStateCount.ckz : 0 }})
        </div>
        <div class="item" :class="screenForm.type === 'A' ? 'current' : ''" @click="changeType('A')">
          活动中({{ goodsStateCount.hdz ? goodsStateCount.hdz : 0 }})
        </div>
      </div>
      <!-- <el-button type="primary" size="small" @click="addOrEdit('add')">添加商品</el-button> -->
    </div>

    <div class="screen2-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="2" :lg="3" style="opacity: 0">.</el-col>

        <el-col :xs="24" :sm="20" :lg="18">
          <el-form ref="form" :model="screenForm" label-width="80px">
            <div class="search">
              <el-input
                v-model="screenForm.keyword"
                placeholder="想快速搜索什么商品呢？输入商品名称，商品id，商品分类都可快速找到"
                class="input-with-select"
                clearable
                @change="getListByScreen"
              >
                <el-button slot="append" icon="el-icon-search" @click="getListByScreen"></el-button>
              </el-input>
            </div>
            <div class="screen clearfix">
              <el-row :gutter="20">
                <el-col :xs="8" :sm="8" :lg="4">
                  <el-form-item label-width="0">
                    <el-cascader
                      v-model="screenForm.classify"
                      :options="classifyList"
                      :props="{ label: 'name', value: 'categoryId' }"
                      size="small"
                      @change="getListByScreen"
                    >
                    </el-cascader>
                    <!-- <el-select v-model="screenForm.classify" placeholder="全部" size="small" @change="getListByScreen">
                      <el-option label="商品分类" value=""></el-option>
                      <el-option :label="item.name" :value="item.categoryId" v-for="item in classifyList" :key="item.categoryId"></el-option>
                    </el-select> -->
                  </el-form-item>
                </el-col>
                <el-col :xs="8" :sm="8" :lg="4">
                  <el-form-item label-width="0">
                    <el-select
                      v-model="screenForm.status"
                      placeholder="上下架状态"
                      size="small"
                      clearable
                      @change="getListByScreen"
                    >
                      <el-option
                        :label="item.label"
                        :value="item.value"
                        v-for="(item, index) in select_status"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="8" :sm="8" :lg="4">
                  <el-form-item label-width="0">
                    <el-select
                      v-model="screenForm.isTrade"
                      placeholder="是否支持以旧换新"
                      size="small"
                      clearable
                      @change="getListByScreen"
                    >
                      <el-option label="支持以旧换新" value="YES"></el-option>
                      <el-option label="不支持以旧换新" value="NO"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="6">
                  <el-form-item label="销售价格" label-width="80px">
                    <el-input v-model="screenForm.price1" size="small" @change="getListByScreen" clearable></el-input>
                    <span>至</span>
                    <el-input v-model="screenForm.price2" size="small" @change="getListByScreen" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="6">
                  <el-form-item label="分销金额" label-width="80px">
                    <el-input v-model="screenForm.amount1" size="small" @change="getListByScreen" clearable></el-input>
                    <span>至</span>
                    <el-input v-model="screenForm.amount2" size="small" @change="getListByScreen" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </el-col>

        <el-col :xs="24" :sm="2" :lg="3" style="opacity: 0">.</el-col>
      </el-row>
    </div>

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button v-if="$restrict('add')" type="primary" icon="el-icon-plus" size="small" @click="addOrEdit('add')"
            >添加商品</el-button
          >
          <el-button v-if="$restrict('batchSet')" size="small" @click="batchOperation('module')"
            >批量设置模块</el-button
          >
          <el-button v-if="$restrict('batchSetfreight')" size="small" @click="batchOperation('freight')"
            >批量设置运费</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button v-if="$restrict('batchLaunch')" size="small" @click="batchOperation('status', 'on')"
            >批量上架</el-button
          >
          <el-button v-if="$restrict('batchRemova')" size="small" @click="batchOperation('status', 'off')"
            >批量下架</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button v-if="$restrict('batchTrade')" size="small" @click="batchOperation('isTrade', 'YES')"
            >开启以旧换新</el-button
          >
          <el-button v-if="$restrict('batchTrade')" size="small" @click="batchOperation('isTrade', 'NO')"
            >关闭以旧换新</el-button
          >
        </div>
      </div>

      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          @selection-change="handleTableSelection"
        >
          <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
          <el-table-column align="center" label="商品图片" prop="imgUrl" width="85">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px; display: block"
                :src="$showImgUrl(scope.row.imgUrl)"
                :preview-src-list="[$showImgUrl(scope.row.imgUrl)]"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品名称" prop="goodsName" min-width="200">
            <template slot-scope="scope">
              <!-- {{ scope.row.goodsName }} -->
              <span style="margin-right: 10px">{{ scope.row.goodsName }}</span>
              <i class="el-icon-edit pointer" @click="editData('goodsName', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" class-name="status-col">
            <template slot-scope="scope">
              <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center">
                <el-tag size="small" :type="scope.row.status ? 'success' : 'danger'">{{
                  scope.row.status ? '上架' : '下架'
                }}</el-tag>
                <el-tag size="small" v-if="scope.row.promotionGroup" style="margin-top: 4px">团购商品</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="销售价格" prop="goodsPrice" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.goodsPrice }} -->
              <span style="margin-right: 10px">¥{{ scope.row.goodsPrice }}</span>
              <i class="el-icon-edit pointer" @click="editData('price', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="分销金额" prop="shareAmount" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.shareAmount }} -->
              <span style="margin-right: 10px">¥{{ scope.row.shareAmount }}</span>
              <i class="el-icon-edit pointer" @click="editData('shareAmount', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="佣金比例" prop="sharePercent" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.sharePercent }} -->
              <span style="margin-right: 10px">{{ scope.row.sharePercent }}%</span>
              <i class="el-icon-edit pointer" @click="editData('sharePercent', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="内部分销金额" prop="innerShareAmount" min-width="130" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.sharePercent }} -->
              <span style="margin-right: 10px">¥{{ scope.row.innerShareAmount }}</span>
              <i class="el-icon-edit pointer" @click="editData('innerShareAmount', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="内部佣金比列" prop="innerSharePercent" min-width="130" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.sharePercent }} -->
              <span style="margin-right: 10px">{{ scope.row.innerSharePercent }}%</span>
              <i class="el-icon-edit pointer" @click="editData('innerSharePercent', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品库存" prop="stockNum" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- {{ scope.row.stockNum }} -->
              <span style="margin-right: 10px">{{ scope.row.stockNum }}</span>
              <i class="el-icon-edit pointer" @click="editData('stockNum', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="仓库库存" prop="allStockNum" min-width="110" sortable>
            <template slot-scope="scope">
              <span style="margin-right: 10px">{{ scope.row.allStockNum || 0 }}</span>
              <i class="el-icon-s-data pointer" @click="editData('stockNum', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="销量" prop="soldNum" min-width="110" sortable></el-table-column>
          <el-table-column align="center" label="是否支持以旧换新" prop="isTrade" min-width="130">
            <template slot-scope="scope">
              {{ { YES: '支持', NO: '不支持' }[scope.row.isTrade] }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="排序" prop="sortNum" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- {{ scope.row.sortNum }} -->
              <span style="margin-right: 10px">{{ scope.row.sortNum }}</span>
              <i class="el-icon-edit pointer" @click="editData('sortNum', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商户" prop="companyName" min-width="120"></el-table-column>

          <el-table-column align="center" label="操作" width="280" fixed="right">
            <template slot-scope="scope">
              <!-- <template>
                <el-popconfirm v-if="scope.row.status" style="margin-right: 10px;" title="确定冻结吗？" @confirm="changeMemberStatus(scope.row.goodsId, 0)" >
                  <el-button slot="reference" type="text">冻结</el-button>
                </el-popconfirm>
                <el-popconfirm v-else style="margin-right: 10px;" title="确定恢复吗？" @confirm="changeMemberStatus(scope.row.goodsId, 1)" >
                  <el-button slot="reference" type="text">恢复</el-button>
                </el-popconfirm>
              </template> -->

              <el-button
                v-if="$restrict('edit')"
                type="primary"
                size="mini"
                @click="addOrEdit('edit', scope.row.goodsId)"
                >编辑</el-button
              >
              <el-popconfirm
                v-if="$restrict('clone')"
                style="margin-left: 10px; margin-right: 10px"
                title="确定克隆吗？"
                @confirm="clone(scope.row.goodsId)"
              >
                <el-button slot="reference" type="primary" size="mini">克隆</el-button>
              </el-popconfirm>
              <el-button
                v-if="$restrict('copyLink')"
                type="primary"
                size="mini"
                class="tag-read"
                @click="copy(scope.row.goodsId)"
                :data-clipboard-text="scope.row.goodsId"
                >复制链接</el-button
              >
              <el-popconfirm
                v-if="$restrict('del')"
                style="margin-left: 10px"
                title="确定删除吗？"
                @confirm="delItem(scope.row.goodsId, scope.row.goodsSpecId)"
              >
                <el-button slot="reference" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 编辑规格数据 -->
    <el-dialog
      title="编辑"
      :visible.sync="editSpecVisible"
      :show-close="false"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-table
        :data="editGoodsDetail.goodsSpecs"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        style="margin-bottom: 20px"
      >
        <el-table-column align="center" label="规格名称" prop="name"></el-table-column>
        <el-table-column align="center" label="规格值" prop="specValue"></el-table-column>
        <el-table-column align="center" label="规格图片" prop="imgUrl">
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="$showImgUrl(scope.row.imgUrl)"
              :preview-src-list="[$showImgUrl(scope.row.imgUrl)]"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="成本价格" prop="costPrice"></el-table-column>
        <el-table-column align="center" label="销售价格" prop="price" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" :disabled="editType != 'price'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分销金额" prop="shareAmount" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.shareAmount" :disabled="editType != 'shareAmount'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="佣金比例(%)" prop="sharePercent" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sharePercent" :disabled="editType != 'sharePercent'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="内部分销金额" prop="innerShareAmount" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.innerShareAmount" :disabled="editType !== 'innerShareAmount'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="内部佣金比例(%)" prop="innerSharePercent" min-width="130">
          <template slot-scope="scope">
            <el-input v-model="scope.row.innerSharePercent" :disabled="editType !== 'innerSharePercent'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品库存" prop="stockNum" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stockNum" :disabled="editType != 'stockNum'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="仓库库存" prop="goodsMaterialStock">
          <template slot-scope="scope">
            {{ scope.row.goodsMaterialStock || 0 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料编号" prop="goodsCode" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.goodsCode"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEditSpecForm">取 消</el-button>
        <el-button type="primary" @click="submitEditSpecForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量设置模块 -->
    <el-dialog
      :title="'设置模块 (已选择' + tableSelection.length + '件商品)'"
      :visible.sync="setModuleVisible"
      :show-close="false"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="setModuleForm"
        :model="setModuleForm"
        :rules="setModuleFormRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="说明模块" prop="module">
          <el-select v-model="setModuleForm.module" placeholder="请选择说明模块" style="width: 250px">
            <el-option
              v-for="item in moduleList"
              :key="item.commonTemplateId"
              :label="item.name"
              :value="item.commonTemplateId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSetModuleForm">取 消</el-button>
        <el-button type="primary" @click="submitSetModuleForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量设置运费 -->
    <el-dialog
      :title="'设置运费 (已选择' + tableSelection.length + '件商品)'"
      :visible.sync="setFreightVisible"
      :show-close="false"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="setFreightForm"
        :model="setFreightForm"
        :rules="setFreightFormRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="运费模版" prop="freight">
          <el-select v-model="setFreightForm.freight" placeholder="请选择运费模版" style="width: 250px">
            <el-option
              v-for="item in freightList"
              :key="item.freightTemplateId"
              :label="item.name"
              :value="item.freightTemplateId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSetFreightForm">取 消</el-button>
        <el-button type="primary" @click="submitSetFreightForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGoodsList,
  deleteGoods,
  getClassifyList,
  getGoodsStateCount,
  cloneGoods,
  editGoods,
  goodsPutOn,
  goodsPutOff,
  checkSeckill,
  getGoodsDetail,
  getModuleList,
  setCommomModule,
  setFreight,
  getFreightList,
  batchTrade
} from '@/api/goods'
import Clipboard from 'clipboard'
import { EventBus } from '@/utils/eventBus'
export default {
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数

      screenForm: {
        type: '',
        keyword: '',
        classify: '',
        status: '',
        isTrade: '',
        price1: '',
        price2: '',
        amount1: '',
        amount2: ''
      },
      select_status: [
        // 筛选字段 - 状态
        { label: '上架', value: true },
        { label: '下架', value: false }
      ],
      classifyList: [],
      goodsStateCount: {
        total: 0,
        csz: 0,
        ysq: 0,
        ckz: 0,
        hdz: 0
      },

      tableSelection: [],

      editSpecVisible: false,
      editGoodsDetail: {},
      editType: '',

      setModuleVisible: false,
      moduleList: [],
      setModuleForm: {
        module: ''
      },
      setModuleFormRules: {
        module: [{ required: true, message: '请选择说明模块', trigger: 'change' }]
      },

      setFreightVisible: false,
      freightList: [],
      setFreightForm: {
        freight: ''
      },
      setFreightFormRules: {
        freight: [{ required: true, message: '请选择运费模块', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getList()

    this.getClassifyList()
    EventBus.$on('updateGoodsListPage', () => {
      this.getList()
    })
  },
  methods: {
    getClassifyList() {
      let params = {
        name: '',
        status: true
      }
      getClassifyList(params).then(res => {
        res.data.unshift({
          name: '全部',
          categoryId: '',
          children: null
        })
        this.classifyList = res.data
      })
    },

    getList() {
      this.listLoading = true

      let categoryId = ''
      if (this.screenForm.classify) {
        categoryId = this.screenForm.classify[1]
      }

      let params = {
        flag: this.screenForm.type,
        keyword: this.screenForm.keyword,
        categoryId: categoryId,
        status: this.screenForm.status,
        isTrade: this.screenForm.isTrade,
        startPrice: this.screenForm.price1,
        endPrice: this.screenForm.price2,
        startShare: this.screenForm.amount1,
        endShare: this.screenForm.amount2,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }

      getGoodsList(params).then(res => {
        console.log('-----------', res.data.records)
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })

      getGoodsStateCount({}).then(res => {
        this.goodsStateCount = res.data
      })
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1
      this.getList()
    },

    // 切换类型
    changeType(type) {
      this.screenForm.type = type
      this.getListByScreen()
    },

    // 删除商品
    delItem(goodsId, goodsSpecId) {
      deleteGoods({
        goodsId,
        goodsSpecId
      }).then(res => {
        this.getList()
        this.$successMsg()
      })
    },

    // 添加商品
    addOrEdit(type, id) {
      if (type == 'add') {
        this.$router.push({
          name: 'goods_add',
          query: { type }
        })
      } else {
        this.$router.push({
          name: 'goods_add',
          query: {
            id,
            type
          }
        })
      }
    },

    // 克隆
    clone(id) {
      cloneGoods({
        goodsId: id
      }).then(res => {
        this.getList()
      })
    },

    copy() {
      const clipboard = new Clipboard('.tag-read')
      // clipboard.on('success', e => {
      //   this.$successMsg('复制成功');
      // })
      clipboard.on('error', e => {
        console.log('该浏览器不支持复制')
        return false
      })
      this.$successMsg('复制成功')
    },

    // 编辑数据
    async editData(type, item) {
      const typeMap = {
        goodsName: '商品名称',
        price: '销售价格',
        shareAmount: '分销金额',
        sharePercent: '佣金比例',
        innerShareAmount: '内部分销金额',
        innerSharePercent: '内部佣金比例',
        stockNum: '商品库存',
        sortNum: '排序'
      }
      await getGoodsDetail({ goodsId: item.goodsId }).then(res => {
        this.editGoodsDetail = res.data
      })
      if (['sortNum', 'goodsName'].includes(type)) {
        let promptObj = {}
        if (['sortNum'].includes(type)) {
          promptObj = {
            inputType: 'number',
            inputValidator: function (value) {
              if (!value && value !== 0) return '请输入' + typeMap[type]
              if (value * 1 < 0) return typeMap[type] + '不能小于0'
            }
          }
        } else {
          promptObj = {
            inputValidator: function (value) {
              if (!value) return '请输入' + typeMap[type]
            }
          }
        }
        this.$prompt('请输入' + typeMap[type], '编辑', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: this.editGoodsDetail[type],
          ...promptObj
        })
          .then(({ value }) => {
            let params = this.editGoodsDetail
            params[type] = value
            editGoods(params).then(res => {
              this.$successMsg('编辑成功')
              this.getList()
            })
          })
          .catch(() => {})
      } else {
        if (type == 'shareAmount' && item.sharePercent != 0) {
          return this.$errorMsg('佣金比例不为0的时候无法修改分销金额')
        }
        if (type === 'innerShareAmount' && item.innerSharePercent !== 0) {
          return this.$errorMsg('内部佣金比例不为0的时候无法修改内部分销金额')
        }
        this.editType = type
        this.editSpecVisible = true
      }
    },

    // 取消 编辑规格数据
    cancelEditSpecForm() {
      this.editSpecVisible = false
    },

    // 提交 编辑规格数据
    submitEditSpecForm() {
      let specList = this.editGoodsDetail.goodsSpecs
      for (let i = 0; i < specList.length; i++) {
        if (specList[i].shareAmount / specList[i].price > 0.4) {
          this.formLoading = false
          this.$errorMsg('单个规格的分销金额不能超过销售价的40%')
          return
        }
        if (Number(specList[i].sharePercent) < 0 || Number(specList[i].sharePercent) > 40) {
          this.formLoading = false
          this.$errorMsg('单个规格的佣金比例范围在0-40')
          return
        }
        if (specList[i].innerShareAmount / specList[i].price > 0.4) {
          this.formLoading = false
          this.$errorMsg('单个规格的内部分销金额不能超过销售价的40%')
          return
        }
        if (Number(specList[i].innerSharePercent) < 0 || Number(specList[i].innerSharePercent) > 40) {
          this.formLoading = false
          this.$errorMsg('单个规格的内部佣金比例范围在0-40')
          return
        }
      }

      let allPrice = []
      specList.forEach(item => {
        allPrice.push(item.price)
      })
      this.editGoodsDetail.goodsPrice = Math.min(...allPrice)

      let params = this.editGoodsDetail
      editGoods(params).then(res => {
        this.editSpecVisible = false
        this.$successMsg('编辑成功')
        this.getList()
      })
    },

    // 表格选择列
    handleTableSelection(val) {
      this.tableSelection = val
    },

    // 批量操作
    batchOperation(type, status) {
      if (this.tableSelection.length < 1) {
        return this.$errorMsg('至少选择一个商品')
      }

      // 批量上架/批量下架
      if (type == 'status') {
        this.$confirm(`您确定要批量${{ on: '上架', off: '下架' }[status]}选中商品吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let goodsIds = []
            this.tableSelection.forEach(item => {
              goodsIds.push(item.goodsId)
            })
            // 批量上架
            if (status == 'on') {
              goodsPutOn(goodsIds).then(res => {
                this.$successMsg()
                this.getList()
              })
            }
            // 批量下架
            else if (status == 'off') {
              checkSeckill(goodsIds).then(res => {
                if (res.data && res.data.length > 0) {
                  let goodsNames = []
                  res.data.forEach(item => {
                    let index = this.$findElem(this.tableSelection, 'goodsId', item)
                    goodsNames.push('【' + this.tableSelection[index].goodsName + '】')
                  })
                  this.$confirm('你所选中的商品' + goodsNames.join('、') + '正在参与秒杀活动，是否确定下架？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  })
                    .then(() => {
                      goodsPutOff(goodsIds).then(res => {
                        this.$successMsg()
                        this.getList()
                      })
                    })
                    .catch(() => {})
                } else {
                  goodsPutOff(goodsIds).then(res => {
                    this.$successMsg()
                    this.getList()
                  })
                }
              })
            }
          })
          .catch(() => {})
      }

      // 批量开启关闭以旧换新
      else if (type == 'isTrade') {
        this.$confirm(`您确定要批量${{ YES: '开启', NO: '关闭' }[status]}以旧换新吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let goodsIds = []
            this.tableSelection.forEach(item => {
              goodsIds.push(item.goodsId)
            })
            batchTrade({
              goodsIds: goodsIds.join(','),
              isTrade: status
            }).then(res => {
              this.$successMsg()
              this.getList()
            })
          })
          .catch(() => {})
      }

      // 批量设置模块
      else if (type == 'module') {
        this.getModuleList()
        this.setModuleVisible = true
      }

      // 批量设置运费
      else if (type == 'freight') {
        this.getFreightList()
        this.setFreightVisible = true
      }
    },

    // 获取模块列表
    getModuleList() {
      getModuleList({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.moduleList = res.data.records
      })
    },

    // 取消 设置模块
    cancelSetModuleForm() {
      this.setModuleVisible = false
      this.$refs.setModuleForm.resetFields()
    },

    // 提交 设置模块
    submitSetModuleForm() {
      let goodsIds = []
      this.tableSelection.forEach(item => {
        goodsIds.push(item.goodsId)
      })
      setCommomModule({
        goodsIdList: goodsIds,
        templateId: this.setModuleForm.module
      }).then(res => {
        this.cancelSetModuleForm()
        this.$successMsg()
        this.getList()
      })
    },

    // 获取运费模版列表
    getFreightList() {
      getFreightList({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.freightList = res.data.records
      })
    },

    // 取消 设置运费
    cancelSetFreightForm() {
      this.setFreightVisible = false
      this.$refs.setFreightForm.resetFields()
    },

    // 提交 设置运费
    submitSetFreightForm() {
      let goodsIds = []
      this.tableSelection.forEach(item => {
        goodsIds.push(item.goodsId)
      })
      setFreight({
        goodsIdList: goodsIds,
        freightTemplateId: this.setFreightForm.freight
      }).then(res => {
        this.cancelSetFreightForm()
        this.$successMsg()
        this.getList()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tab-container {
  .tab-list {
    .item {
      float: left;
      font-size: 14px;
      margin-right: 20px;
      cursor: pointer;
      line-height: 32px;
      &.current {
        color: #409eff;
      }
    }
  }
}

.screen2-container {
  .search {
    margin-top: 30px;
  }
  .screen {
    margin-top: 20px;
    .el-input {
      width: 40%;
    }
    span {
      width: 20%;
      display: inline-block;
      text-align: center;
      color: #666666;
    }
  }
}

.pointer {
  cursor: pointer;
  color: #409eff;
}
</style>

<style lang="scss">
.screen2-container {
  .el-form-item__label {
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 32px;
  }
}

.el-image-viewer__wrapper .el-icon-circle-close {
  color: #ffffff !important;
  font-size: 60px;
}
</style>
