<!-- -规格定义表格-->
<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <div class="ggdy-bts" v-if="ggdybts == 'all'">
          <div @click="checkhide" class="l-button">选择显示字段</div>
          <div class="l-button">
            <el-upload action :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="exportSkU"
              :file-list="data.fileList"> 导入SKU </el-upload>
          </div>
          <div @click="debounceMethods(deriveSKU, 1)" class="l-button">导出SKU</div>
          <div class="l-button">
            <el-upload action :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="deriveJG"
              :file-list="data.fileList"> 导入结构BOM表 </el-upload>
          </div>
          <div @click="debounceMethods(deriveSKU, 3)" class="l-button">导出结构BOM表</div>
          <div class="l-button" v-if="nobts.indexOf('bzbom') !== -1">
            <el-upload action :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="deriveBZ"
              :file-list="data.fileList"> 导入包装BOM表 </el-upload>
          </div>
          <div @click="debounceMethods(deriveSKU, 4)" class="l-button" v-if="nobts.indexOf('bzbom') !== -1">导出包装BOM表</div>
          <div class="l-button" @click="skucheck" v-if="pageTag == 'ggdy'">sku检测</div>

          <div class="l-button" @click="syncPRlist" v-if="pageTag == 'xxlr'">同步到产品目录</div>
          <div class="l-button" @click="syncTCOsys" v-if="pageTag == 'xxlr'">同步到成本系统</div>

          <div @click="additem" class="l-button" v-if="nobts.indexOf('add') == -1">新增行</div>
          <div @click="deletitem" class="l-button" v-if="nobts.indexOf('delet') == -1">删除行</div>
        </div>
        <div class="ggdy-bts" v-else>
          <div @click="checkhide" class="l-button" v-if='ggdybts !== "add"'>选择显示字段</div>
        </div>
      </template>
    </vxe-toolbar>
    <vxe-table ref="xTable1" :loading="data.ggdyloading" :data="data.ggdyTableData" class="ggdycss" max-height="400"
      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" @checkbox-change="selectionChange" keep-source
      @checkbox-all="selectAllChange" @click="touchTable" border>
      <template v-for="(item, index) in data.zdkeylist" :key='item.key'>
        <vxe-column v-if="item.value && item.key == 'indxs'" type="checkbox" width="50" align="center"></vxe-column>
        <vxe-column v-if="item.value && item.key == 'seq'" type="seq" title="序号" width="50" align="center"></vxe-column>
        <vxe-column v-if="item.value && item.key == 'brand'" field="brand" title="品牌"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="140" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.brand" maxlenth='255' @blur="textinput($event, row.indextb, 'brand')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'name'" field="name" title="产品名称"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="140" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.name" maxlenth='255' @blur="textinput($event, row.indextb, 'name')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'image'" field="image" title="产品图片" width="130" align="center">
          <template #default="{ row }">
            <el-upload ref='uploadRef' :action="data.upLoadUrl" :with-credentials="true" :on-success="function (res, file, file_list) {
              return handleSuccess(res, file, file_list, row, row.indextb)
            }" :show-file-list="false" name="file" :limit="1" accept=".png, .jpg">
              <el-image v-if="row.image" :src="row.image" class="avatar">
                <template #error>
                  <div class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </template>
              </el-image>
              <el-icon v-else class="el-icon-plus"></el-icon>
            </el-upload>
            <div v-show="row.enlargeImgShow" class="img-show position-f" v-if="data.enlargeImg" :style="data.top">
              <img :src="data.enlargeImg" />
            </div>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'spu'" field="spu" title="产品SPU"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="250" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.spu" maxlenth='255' @blur="textinput($event, row.indextb, 'spu')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'sku'" field="sku" title="产品规格型号(SKU)"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="260" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.sku" maxlenth='255' @blur="textinput($event, row.indextb, 'sku')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'params'" field="params" title="规格参数"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="260" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.params" maxlenth='255' @blur="textinput($event, row.indextb, 'params')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'jgbom'" title="结构BOM清单" width="130" align="center">
          <template #default="{ row, checked }">
            <vxe-button type="text" status="primary" content="查看" @click="getRoutebomInfo(row, 'jgbom')"></vxe-button>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'bzbom'" title="包装BOM清单" width="130" align="center">
          <template #default="{ row, checked }">
            <vxe-button type="text" status="primary" content="查看" @click="getRoutebomInfo(row, 'bzbom')"></vxe-button>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'material'" field="material" title="产品材质"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim.trim="row.material" maxlenth='255'
              @blur="textinput($event, row.indextb, 'material')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'protocol'" field="protocol" title="协议"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="180" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.protocol" maxlenth='255' @blur="textinput($event, row.indextb, 'protocol')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'rate'" field="rate" title="速率"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.rate" maxlenth='255' @blur="textinput($event, row.indextb, 'rate')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'package'" field="package" title="包装"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
          <template #default="{ row }">
            <span>{{ row.package }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.package" :transfer="true" @change="textinput($event, row.indextb, 'package')">
              <vxe-option v-for="it in data.paklist" :key="it.key" :value="it.value" :label="it.value"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'safe'" field="safe" title="安规"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
          <template #default="{ row }">
            <span>{{ row.safe }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.safe" :transfer="true" @change="textinput($event, row.indextb, 'safe')">
              <vxe-option v-for="it in data.aglist" :key="it.key" :value="it.value" :label="it.value"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'interface'" field="interface" title="接口(输入)"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.interface" maxlenth='255' @blur="textinput($event, row.indextb, 'interface')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'other'" field="other" title="尺码/数量/长度"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.other" maxlenth='255' @blur="textinput($event, row.indextb, 'other')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'color'" field="color" title="产品颜色"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
          <template #default="{ row }">
            <span>{{ row.color }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.color" :transfer="true" @change="textinput($event, row.indextb, 'color')">
              <vxe-option v-for="it in data.colorlist" :key="it.key" :value="it.value" :label="it.value"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'version'" field="version" title="功能/版本"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.version" maxlenth='255' @blur="textinput($event, row.indextb, 'version')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'output'" field="output" title="输出接口"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="170" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.output" maxlenth='255' @blur="textinput($event, row.indextb, 'output')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'code69'" field="code69" title="69码"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="170" align="left">
          <template #edit="{ row }">
            <vxe-input v-model.trim="row.code69" maxlenth='255' @blur="textinput($event, row.indextb, 'code69')" />
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'material_num'" field="material_num" title="备料数量"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
          <template #edit="{ row }">
            <vxe-input v-model="row.material_num" type="integer" min="0" max="99999999"
              @blur="textinput($event, row.indextb, 'material_num')"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'order_num'" field="order_num" title="首批订单数量" width="120"
          align="left ">
          <template #default="{ row }">
            <span @click="openXDmx(row.id, row.sku)" v-if="pageTag == 'spxdmx' && row.order_num"
              style="color:#409EFF;cursor: pointer;">{{ row.order_num ? row.order_num : 0 }}</span>
            <span v-else>{{ row.order_num ? row.order_num : 0 }}</span>
          </template>
          <!-- <template #edit="{ row }">
            <vxe-input v-model="row.order_num" type="integer" min="0" max="99999999"
              @blur="textinput($event, row.indextb, 'order_num')"></vxe-input>
          </template> -->
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'mould_fare_sj' && data.userInfo.isall == 1" field="mould_fare_sj"
          title="模具费(塑胶)" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="center">
          <template #default="{ row }">
            <span>¥{{ row.mould_fare_sj ? row.mould_fare_sj : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.mould_fare_sj" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'mould_fare_sj', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'mould_fare_wj' && data.userInfo.isall == 1" field="mould_fare_wj"
          title="模具费(五金)" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="center">
          <template #default="{ row }">
            <span>¥{{ row.mould_fare_wj ? row.mould_fare_wj : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.mould_fare_wj" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'mould_fare_wj', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'electron_fare' && data.userInfo.isall == 1" field="electron_fare"
          title="电子" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="center">
          <template #default="{ row }">
            <span>¥{{ row.electron_fare ? row.electron_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.electron_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'electron_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'structure_fare' && data.userInfo.isall == 1" field="structure_fare"
          title="结构/本体" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="center">
          <template #default="{ row }">
            <span>¥{{ row.structure_fare ? row.structure_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.structure_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'structure_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'power_fare' && data.userInfo.isall == 1" field="power_fare"
          title="电源" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="center">
          <template #default="{ row }">
            <span>¥{{ row.power_fare ? row.power_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.power_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'power_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'line_fare' && data.userInfo.isall == 1" field="line_fare" title="线材"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="center">
          <template #default="{ row }">
            <span>¥{{ row.line_fare ? row.line_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.line_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'line_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'package_fare' && data.userInfo.isall == 1" field="package_fare"
          title="包材" :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.package_fare ? row.package_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.package_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'package_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'parts_fare' && data.userInfo.isall == 1" field="parts_fare"
          title="辅料/配件" :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.parts_fare ? row.parts_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.parts_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'parts_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'other_fare' && data.userInfo.isall == 1" field="other_fare"
          title="硬盘/运费/其他" :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.other_fare ? row.other_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.other_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'other_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'process_fare' && data.userInfo.isall == 1" field="process_fare"
          title="加工费用" :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.process_fare ? row.process_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.process_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'process_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'auth_test_fare' && data.userInfo.isall == 1" field="auth_test_fare"
          title="认证/测试费用" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="center">
          <template #default="{ row }">
            <span>¥{{ row.auth_test_fare ? row.auth_test_fare : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.auth_test_fare" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'auth_test_fare', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'total_cost' && data.userInfo.isall == 1" field="total_cost"
          title="总成本(未摊模具)" :edit-render="{ autofocus: '.vxe-input--inner' }" width="200" align="center">
          <template #default="{ row }">
            <span>¥{{ row.total_cost ? row.total_cost : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.total_cost" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'total_cost', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'mould_cost'" field="mould_cost" title="出厂价(TCO成本)"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.mould_cost ? row.mould_cost : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.mould_cost" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'mould_cost', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'tco_cost' && data.userInfo.isall == 1" field="tco_cost" title="物料成本价"
          width="130" align="center">
          <template #default="{ row }">
            <!--结构/本体+硬盘/运费/其他+电子+电源+线材+配料/配件+加工费+包材-->
            <span>¥{{
              setNums83((
                parseFloat(row.structure_fare ? row.structure_fare : 0) +
                parseFloat(row.power_fare ? row.power_fare : 0) +
                parseFloat(row.line_fare ? row.line_fare : 0) +
                parseFloat(row.parts_fare ? row.parts_fare : 0) +
                parseFloat(row.other_fare ? row.other_fare : 0) +
                parseFloat(row.process_fare ? row.process_fare : 0) +
                parseFloat(row.package_fare ? row.package_fare : 0) +
                parseFloat(row.electron_fare ? row.electron_fare : 0)) || 0, 8, 4, row.indextb, 'tco_cost') }}</span>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'tco_rate' && data.userInfo.isall == 1" title="TCO毛利率" width="130"
          align="center">
          <template #default="{ row }">
            <!--tco毛利率 = 出厂价(TCO成本)- 物料成本价/ 出厂价(TCO成本)-->
            <span>{{
              setNums83(((parseFloat(row.mould_cost ? row.mould_cost : 0) -
                (parseFloat(row.structure_fare ? row.structure_fare : 0) +
                  parseFloat(row.power_fare ? row.power_fare : 0) +
                  parseFloat(row.line_fare ? row.line_fare : 0) +
                  parseFloat(row.parts_fare ? row.parts_fare : 0) +
                  parseFloat(row.other_fare ? row.other_fare : 0) +
                  parseFloat(row.process_fare ? row.process_fare : 0) +
                  parseFloat(row.package_fare ? row.package_fare : 0) +
                  parseFloat(row.electron_fare ? row.electron_fare : 0))) / (parseFloat(row.mould_cost ? row.mould_cost :
                    0)) * 100) || 0, 8, 4, row.indextb, 'tco_rate')
            }}%</span>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'agent_price'" field="agent_price" title="代理商价"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.agent_price ? row.agent_price : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.agent_price" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'agent_price', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'channel_rate'" field="channel_rate" title="渠道毛利润率" width="130"
          align="center">
          <template #default="{ row }">
            <!--渠道毛利率=（代理商价格-出厂价(TCO成本)）/代理商-->
            <span v-if="!row.agent_price || parseFloat(row.agent_price) == 0">0%</span>
            <span v-else>{{ setNums83((((parseFloat(row.agent_price) ? parseFloat(row.agent_price) : 0) -
              parseFloat(row.mould_cost ? row.mould_cost : 0)) / (parseFloat(row.agent_price) ?
                parseFloat(row.agent_price)
                : 0) * 100) || 0, 8, 4, row.indextb, 'channel_rate') }} %</span>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'distribution_price'" field="distribution_price" title="经销价"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.distribution_price ? row.distribution_price : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.distribution_price" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'distribution_price', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'distribution_rate'" title="经销商毛利率" width="120" align="center">
          <template #default="{ row }">
            <!--经销商毛利率=（最低零售价-经销商价格）/最低零售价-->
            <span>{{
              setNums83(((parseFloat(row.min_retail_price ? row.min_retail_price : 0) -
                parseFloat(row.distribution_price ? row.distribution_price :
                  0)) / parseFloat(row.min_retail_price ? row.min_retail_price : 0)) * 100, 8, 4, row.indextb,
                'distribution_rate')
            }}%</span>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'retail_price'" field="retail_price" title="建议零售价"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.retail_price ? row.retail_price : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.retail_price" type="number" min='0'
              @blur="checkNum($event, row.indextb, 'retail_price', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'min_retail_price'" field="min_retail_price" title="最低零售价"
          :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="center">
          <template #default="{ row }">
            <span>¥{{ row.min_retail_price ? row.min_retail_price : '0.000' }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-model="row.min_retail_price" type="number" min="0"
              @blur="checkNum($event, row.indextb, 'min_retail_price', 8, 4)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="item.value && item.key == 'b2c_rate'" field="b2c_rate" title="B2C毛利润率" width="130"
          align="center">
          <template #default="{ row }">
            <!--B2C毛利率=（最低零售价-TCO成本价）/最低零售价-->
            <span>{{ setNums83(((parseFloat(row.min_retail_price ? row.min_retail_price : 0) - parseFloat(row.mould_cost ?
              row.mould_cost : 0)) / parseFloat(row.min_retail_price ? row.min_retail_price
                : 0) * 100) || 0, 8, 4, row.indextb, 'b2c_rate')
            }}%</span>
          </template>
        </vxe-column>
      </template>
    </vxe-table>
    <!-- 选择显示隐藏弹框-->
    <!-- 显示隐藏列 -->
    <el-dialog v-model="data.isShowColTable" :close-on-click-modal="false" destroy-on-close :append-to-body="false"
      width="20%" title="字段选择弹窗" center>
      <el-table ref="multipleTable" border :data="data.keytableData" @selection-change="handleSelectionChange_zd"
        header-row-class-name="zdhead" cell-class-name="zdcell" :max-height="350" class="zdtable"
        :row-class-name="tableRowClassName">
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column prop="name" label="字段名称" align="center"> </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <div class="l-button" @click="setFields" style="float: right;">确 定</div>
        </span>
      </template>
    </el-dialog>
    <!--提示-->
    <el-dialog title="提示" v-model="data.errorPromptShow" width="30%" :before-close="handleClose">
      <div style="max-height:500px;overflow-y: auto;" v-html="data.errorMsg"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="data.errorPromptShow = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { defineComponent, reactive, ref, getCurrentInstance, computed, onMounted, inject, defineExpose } from 'vue';
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { ggdykeytable, ggdykeytable1, addggdyitem, zdlist } from '../../utils/lc_data'// 获取人员
import { exportlist } from '../../utils/lc'
export default defineComponent({
  props: {
    pageTag: {
      type: String,
      default: ''
    },
    prtaskId: {
      type: String,
      default: ''
    },
    ggdyTableData: {
      type: Array,
      default: []
    },
    ggdybts: {
      type: String,
      default: 'all'
    },
    nobts: {
      type: Array,
      default: []
    },
    projectId: {
      type: Number,
      default: null
    },
    skufield: {
      type: String,
      default: ''
    }
  },
  emits: ["update:ggdyTableData", 'openXDmxModel'],
  setup (props, context) {
    let multipleTable = ref(null)
    const apiVersion = process.env.VUE_APP_API_VERSION.replace(/\./g, '_')
    const baseUrl = process.env.VUE_APP_API_BASEURL + apiVersion + '/'
    // const emit = defineEmits(['getPageInfo'])
    let { proxy } = getCurrentInstance()
    let router = useRouter()
    const data = reactive({
      withCredentials: true,
      ggdyTableData: [],
      enlargeImg: '',
      projectId: JSON.parse(JSON.stringify(inject('project_id'))),
      isShowColTable: false,
      loading: '',
      ggdyloading: false,
      top: '',
      upLoadUrl: baseUrl + 'project/upload/file',
      upLoadQuery: { type: 'images' },
      fileList: [], //上传的文件列表
      multipleSelectionzd: [],// 字段选择显示选中结合
      selectList: [],//规格定义表格选中
      zdkeylist: [],// 用于控制表格的显示隐藏
      keytableData: JSON.parse(JSON.stringify(ggdykeytable)),// 规格定义数据
      aglist: [],//安规list
      colorlist: [],// 颜色list
      paklist: [],// 包装list
      userInfo: {},
      errorPromptShow: false,
      errorMsg: '',
    })
    const store = useStore()
    onMounted(() => {
      data.userInfo = store.state.user.userInfo
      if (data.userInfo.isall == 1) {
        data.keytableData = JSON.parse(JSON.stringify(ggdykeytable))
      } else {
        data.keytableData = JSON.parse(JSON.stringify(ggdykeytable1))
      }
      console.log(data.userInfo)
      init()
    })
    async function init () {
      data.ggdyloading = true
      getSKUbaselist()
      await getggdyTableList()
      data.ggdyloading = false
    }
    // 获取规格定义数据
    function getggdyTableList () {
      data.ggdyloading = true
      proxy.$http.showLoading(false).get('project/sku/list', { project_id: data.projectId }).then(res => {
        if (res.errno == 200) {
          const startTime = Date.now()
          data.ggdyTableData = JSON.parse(JSON.stringify(res.data))
          listIDX()
          proxy.$nextTick(() => {
            if (proxy.$refs.xTable1) {
              proxy.$refs.xTable1.loadData(JSON.parse(JSON.stringify(data.ggdyTableData)))
            }
            context.emit('update:ggdyTableData', JSON.parse(JSON.stringify(data.ggdyTableData)))
            getkeys()
            data.ggdyloading = false
            console.log(`渲染完成 ${Date.now() - startTime} 毫秒`)
          })
        } else {
          ElMessage({ type: 'error', message: res.errmsg })
          data.ggdyloading = false
        }
      })
    }
    // sku检测
    function skucheck () {
      proxy.$http.showLoading(false).get('project/sku/check', { project_id: data.projectId }).then(res => {
        if (res.errno !== 200) {
          data.errorPromptShow = true
          data.errorMsg = res.errmsg.replace(/\r\n/g, "<br>")
        } else {
          ElMessage({ type: 'success', message: res.errmsg })
        }
      })
    }
    // 获取sku显示的字段
    function getkeys () {
      data.ggdyloading = true
      proxy.$http.showLoading(false).get('project/sku/get_fields', { project_id: data.projectId }).then(res => {
        if (res.errno == 200) {
          data.zdkeylist = JSON.parse(JSON.stringify(zdlist))
          if (res.data.sku_field && res.data.sku_field != 'init') {
            let arr = []
            arr = res.data.sku_field.split(',')
            data.zdkeylist.forEach(it => {
              if (arr.includes(it.key)) {
                it.value = true
              } else {
                it.value = false
              }
            })
          }
          if (res.data.sku_field == 'init') {
            data.zdkeylist = JSON.parse(JSON.stringify(zdlist))
          }
          proxy.$refs.xTable1.loadData(JSON.parse(JSON.stringify(data.ggdyTableData)))
          data.ggdyloading = false
        } else {
          ElMessage({ type: 'error', message: res.errmsg })
          data.ggdyloading = false
        }
      })
    }
    // 重置下标
    function listIDX () {
      if (data.ggdyTableData && data.ggdyTableData.length > 0) {
        data.ggdyTableData.forEach((it, index) => {
          it.indextb = index
        })
      }
    }
    // 新增行
    async function additem () {
      data.ggdyTableData.unshift(JSON.parse(JSON.stringify(addggdyitem)))
      await proxy.$refs.xTable1.loadData(data.ggdyTableData)
      await listIDX()
      context.emit('update:ggdyTableData', data.ggdyTableData)
    }
    // 删除行
    function deletitem () {
      if (data.selectList && data.selectList.length > 0) {
        proxy.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            let newlist = JSON.parse(JSON.stringify(data.ggdyTableData))
            data.selectList.forEach(it => {
              newlist.forEach((k, theindex) => {
                if (it.indextb == k.indextb) {
                  newlist.splice(theindex, 1)
                }
              })
            })
            data.ggdyTableData = newlist
            listIDX()
            proxy.$refs.xTable1.loadData(data.ggdyTableData)
            context.emit('update:ggdyTableData', data.ggdyTableData)
            proxy.$message({
              type: 'success',
              message: '删除成功',
            })
          }).catch(() => { })
      } else {
        proxy.$message({
          type: 'error',
          message: '请先选择你要删除的行',
        })
      }
    }
    // 导出sku
    function deriveSKU (type) {
      if (type == 1) {
        // 导出sku
        exportlist('', data.projectId, 'projectList', 'sku', '规格定义表')
      }
      if (type == 3) {
        // 导出结构bom表
        exportlist('', data.projectId, 'structure')
      }
      if (type == 4) {
        // 导出包装bom表
        exportlist('', data.projectId, 'packing')
      }
    }
    // 显示隐藏弹框权限
    function handleSelectionChange_zd (val) {
      data.multipleSelectionzd = val
    }
    // 输入校验前8侯三
    function checkNum (event, index, key, integerMax, digits) {
      let reg;
      if (integerMax) {
        reg = new RegExp(`^(\\-)*(\\d{${integerMax}}).*$`); // 通过 integerMax 限制整数位,
        if (!event.value.includes('.')) {
          event.value = event.value.replace(reg, '$1$2');
        }
      }
      if (digits) {
        reg = new RegExp(`^(-)*(\\d*)\\.(\\d{0,${digits}}).*$`); // 通过 digits 限制小数位,
        event.value = event.value.replace(reg, '$1$2.$3');
      }
      if (integerMax && digits) {
        reg = new RegExp(`^(-)*(\\d{${integerMax}}).*\\.(\\d{0,${digits}}).*$`);
      } else {
        reg = new RegExp(`^(-)*(\\d*).*\\.(\\d{0,2}).*$`);
      }
      event.value = event.value.replace(reg, '$1$2.$3');
      if (event.value) (
        data.ggdyTableData[index][key] = parseFloat(event.value).toFixed(3)
      )
      /**可输入值的相关计算变化*/


      context.emit('update:ggdyTableData', data.ggdyTableData)
      proxy.$refs.xTable1.loadData(JSON.parse(JSON.stringify(data.ggdyTableData)))
      // return event.value ? parseFloat(event.value).toFixed(3) : 0
    }
    // 获取sku下拉列表集合
    function getSKUbaselist () {
      proxy.$http.get('project/sku/sku_config').then(r => {
        if (r.errno == 200) {
          data.aglist = r.data.safe
          data.colorlist = r.data.color
          data.paklist = r.data.packing
        }
      })
    }
    //查看bom
    function getRoutebomInfo (item, type) {
      console.log(props)
      if (item.id) {
        if (type == 'jgbom') {
          router.push({ path: '/lcProject/structureBom/structureBom', query: { project_id: item.project_id, id: item.id, sku: item.sku, task_id: props.prtaskId } })
        }
        if (type == 'bzbom') {
          router.push({ path: '/lcProject/packingBom/packingBom', query: { project_id: item.project_id, id: item.id, sku: item.sku, task_id: props.prtaskId } })
        }
      } else {
        proxy.$message({
          type: 'error',
          message: '请先保存在查看',
        })
      }
    }
    //选择显示字段
    function checkhide () {
      data.isShowColTable = true
      setTimeout(() => {
        if (data.zdkeylist !== '' && data.zdkeylist !== undefined) {
          data.multipleSelectionzd = []
          data.zdkeylist.forEach(it => {
            data.keytableData.forEach(i => {
              if (it.key == i.field && it.value) {
                data.multipleSelectionzd.push(i)
                proxy.$refs.multipleTable.toggleRowSelection(i)
              }
            })
          })
        }
      }, 1000)
    }
    // 设置显示隐藏
    function setFields () {
      let fields = []
      data.multipleSelectionzd.forEach(it => {
        fields.push(it.field)
      })
      let newfields = Array.from(new Set(fields.concat(['indxs', 'seq', 'jgbom', 'bzbom'])))
      if (data.multipleSelectionzd && data.multipleSelectionzd.length > 0) {
        proxy.$http.showLoading(false).get('project/sku/set_fields', { 'project_id': data.projectId, 'fields': newfields.join() }).then(res => {
          if (res.errno == 200) {
            data.zdkeylist.forEach(it => {
              data.multipleSelectionzd.forEach(item => {
                if (it.field == item.key) {
                  it.value = true
                } else {
                  if (it.field == 'indxs' || it.field == 'seq' || it.field == 'jgbom' || it.field == 'bzbom') {
                    it.value = true
                  } else {
                    it.value = false
                  }

                }
              })
            })
            data.isShowColTable = false
            getggdyTableList()
            ElMessage({ type: 'success', message: res.errmsg })
          } else {
            ElMessage({ type: 'error', message: res.errmsg })
          }
        })
      } else {
        ElMessage({ type: 'error', message: '请至少选中着一个有效字段查看显示，在确认!' })
      }
    }
    // 选中单行
    function selectionChange (value) {
      data.selectList = value.records
    }
    // 选中全部
    function selectAllChange (value) {
      data.selectList = value.records
    }
    // 显示隐藏选择
    function handleSelectionChange (arry) {
      data.keytableData.forEach(it => {
        arry.forEach(i => {
          if (it.field == i.field) { }
        })
      })
    }
    // 关闭弹框
    function handleClose () {
      data.xzshow = false
      data.errorPromptShow = false
    }
    //文件校验方法
    function beforeAvatarUpload (file) {
      // 通过split方法和fileArr方法获取到文件的后缀名
      let fileArr = file.name.split('.')
      let suffix = fileArr[fileArr.length - 1]
      //只能导入.xls和.xlsx文件
      if (!/(xls|xlsx)/i.test(suffix)) {
        ElMessage({ type: 'error', message: '文件格式不正确' })
        data.loading.close()
        return false
      }
      //不能导入大小超过20Mb的文件
      if (file.size > 20 * 1024 * 1024) {
        ElMessage({ type: 'error', message: '文件过大，请上传小于20MB的文件〜' })
        data.loading.close()
        return false
      }
      return true
    }
    //导入包装
    function deriveBZ (file) {
      deriveJG(file, 'bz')
    }
    //导入结构bom
    function deriveJG (file, type) {
      data.loading = ElLoading.service({
        lock: true,
        text: '此操作需要一段时间请耐心等待...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      //判断是否符合beforeAvatarUpload方法中的条件
      if (beforeAvatarUpload(file)) {
        data.fileList.name = file.name
        data.fileList.url = ''
        var formdata = new FormData()
        formdata.append('file', file.raw)
        formdata.append('project_id', data.projectId)
        if (props && props.prtaskId) {
          formdata.append('task_id', props.prtaskId)
        }
        if (type && type == 'bz') {
          formdata.append('type', 'packing')
        } else {
          formdata.append('type', 'structure')
        }
        proxy.$http.post('/project/sku/import_bom', formdata).then(res => {
          if (res.errno == 200) {
            ElMessage({ type: 'success', message: res.errmsg })
            data.loading.close()
          } else {
            let str = ''
            if (res.data.length > 0) {
              res.data.forEach(it => {
                str = str + '<span>' + it + '</span><br>'
              })
            }
            proxy.$alert('<div style="max-height:450px;overflow:auto">' + res.errmsg + '</br>' + str + '</div>', '导入失败提示', {
              confirmButtonText: '确定',
              customClass: 'msgbox',
              dangerouslyUseHTMLString: true
            })
          }
          // 导出新老sku 导出预加载
          data.loading.close()
        })
      }
    }
    function formatMulti (list, key) {
      let it = []
      if (list && list.length > 0 && key) {
        it = list.filter(i => {
          return i.key == key
        })
        return it && it.length > 0 ? it[0].value : ''
      }
    }
    //  同步到成本系统
    function syncTCOsys () {
      proxy.$http.showLoading(true).get('project/sku/sync_to_cost', { project_id: data.projectId }).then(res => {
        if (res.errno !== 200) {
          data.errorPromptShow = true
          data.errorMsg = res.errmsg.replace(/\r\n/g, "<br>")
        } else {
          ElMessage({ type: 'success', message: res.errmsg })
        }
      })
    }
    // 同步到产品目录
    function syncPRlist () {
      proxy.$http.showLoading(true).get('project/sku/sync_to_product', { project_id: data.projectId }).then(res => {
        if (res.errno !== 200) {
          data.errorPromptShow = true
          data.errorMsg = res.errmsg.replace(/\r\n/g, "<br>")
        } else {
          ElMessage({ type: 'success', message: res.errmsg })
        }
      })
    }
    //导入sku
    function exportSkU (file) {
      data.loading = ElLoading.service({
        lock: true,
        text: '此操作需要一段时间请耐心等待...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      //判断是否符合beforeAvatarUpload方法中的条件
      if (beforeAvatarUpload(file)) {
        data.fileList.name = file.name
        data.fileList.url = ''
        var formdata = new FormData()
        formdata.append('file', file.raw)
        formdata.append('project_id', data.projectId)
        if (props && props.prtaskId) {
          formdata.append('task_id', props.prtaskId)
        }
        data.ggdyloading = true
        proxy.$http.post('/project/sku/import_sku', formdata).then(res => {
          if (res.errno == 200) {
            ElMessage({ type: 'success', message: res.errmsg })
            data.loading.close()
            getggdyTableList()
          } else {
            let str = ''
            if (res.data.length > 0) {
              res.data.forEach(it => {
                str = str + '<span>' + it + '</span><br>'
              })
            }
            proxy.$alert('<div style="max-height:450px;overflow:auto">' + res.errmsg + '</br>' + str + '</div>', '导入失败提示', {
              confirmButtonText: '确定',
              customClass: 'msgbox',
              dangerouslyUseHTMLString: true
            })
          }
          // 导出新老sku 导出预加载
          data.loading.close()
          data.ggdyloading = false
        })
      }
    }
    // 上传成功
    function handleSuccess (res, file, files, row, index) {
      if (res.status == 200) {
        row.image = res.data.fileurl
        data.ggdyTableData[index].image = res.data.fileurl
        proxy.$nextTick(() => {
          proxy.$refs.uploadRef[index].clearFiles()
          proxy.$refs.xTable1.loadData(JSON.parse(JSON.stringify(data.ggdyTableData)))
          context.emit('update:ggdyTableData', JSON.parse(JSON.stringify(data.ggdyTableData)))
        })
      }
    }
    function enlarge (e, row) {
      data.enlargeImg = row.image
      row.enlargeImgShow = true
      data.top = 'top:' + e.clientY + 'px'
    }
    function enlargeOut (row) {
      row.enlargeImgShow = false
      data.enlargeImg = ''
    }
    function touchTable () {
      context.emit('update:ggdyTableData', data.ggdyTableData)
    }
    const setNums83 = computed(() => (numvValue, integerMax, digits, index, field) => {
      if (numvValue) {
        let reg;
        numvValue = numvValue + ''
        if (integerMax) {
          reg = new RegExp(`^(\\-)*(\\d{${integerMax}}).*$`); // 通过 integerMax 限制整数位,
          if (!numvValue.includes('.')) {
            numvValue = numvValue.replace(reg, '$1$2');
          }
        }
        if (digits) {
          reg = new RegExp(`^(-)*(\\d*)\\.(\\d{0,${digits}}).*$`); // 通过 digits 限制小数位,
          numvValue = numvValue.replace(reg, '$1$2.$3');
        }
        if (integerMax && digits) {
          reg = new RegExp(`^(-)*(\\d{${integerMax}}).*\\.(\\d{0,${digits}}).*$`);
        } else {
          reg = new RegExp(`^(-)*(\\d*).*\\.(\\d{0,2}).*$`);
        }
        numvValue = numvValue.replace(reg, '$1$2.$3');
        if ((index || index == 0) && data.ggdyTableData.length > 0) {
          data.ggdyTableData[index][field] = (parseFloat(numvValue) ? Math.round(parseFloat(numvValue) * Math.pow(10, 3)) / Math.pow(10, 3) : 0)
          return parseFloat(numvValue) ? Math.round(parseFloat(numvValue) * Math.pow(10, 3)) / Math.pow(10, 3) : 0
        }
      } else {
        if (index || index == 0) {
          data.ggdyTableData[index][field] = numvValue ? numvValue : 0
        }
        return 0
      }
    })
    function tableRowClassName ({ row, rowIndex }) {
      if (["indxs", 'seq', "jgbom", 'bzbom'].includes(row.field)) {
        return 'hidden_row'  //可以动态添加class样式
      }
      return ''
    }
    function textinput (event, index, field) {
      data.ggdyTableData[index][field] = event.value
      context.emit('update:ggdyTableData', data.ggdyTableData)
    }
    // 点击首批订单数量查看该下单详情
    function openXDmx (skuId, skuName) {
      context.emit('openXDmxModel', { skuId: skuId, skuName: skuName })
    }
    /* 曝露方法或者属性值给父组件或者其他子组件用 */
    defineExpose({
      data
    })
    return {
      data,
      multipleTable,
      setNums83,
      openXDmx,
      textinput,
      tableRowClassName,
      touchTable,
      getggdyTableList,
      additem,
      deletitem,
      syncTCOsys,
      syncPRlist,
      skucheck,
      getkeys,
      deriveJG,
      deriveBZ,
      deriveSKU,
      formatMulti,
      getSKUbaselist,
      checkNum,
      getRoutebomInfo,
      checkhide,
      selectionChange,
      selectAllChange,
      setFields,
      handleSelectionChange,
      handleSelectionChange_zd,
      handleClose,
      beforeAvatarUpload,
      exportSkU,
      handleSuccess,
      enlarge,
      enlargeOut,
      listIDX
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../../assets/style/lc.scss';

.zdtable {
  ::v-deep(.el-table__cell) {
    font-size: 12px !important;
    padding: 5px 0 !important;

  }

  ::v-deep(.hidden_row) {
    display: none !important;
  }

  ::v-deep(.vxe-select--panel) {
    position: fixed !important;
    min-width: 10% !important;
    left: auto !important;
  }

  .has-gutter {
    ::v-deep(.el-table__cell) {
      font-size: 12px;
      background: #e8eaec !important;
    }
  }
}
</style>
