<template>
  <el-main class="bg_white">
    <div class="m-t-10 table_90 border-r-10 text-black">
      <el-row>
        <el-col :span="8" style="align-items: center;display: flex;flex-direction: row;">
          <!-- <el-button type="primary" size="mini" @click="getList(1)">搜索</el-button>
          <el-button type="primary" size="mini" @click="reset()">重置</el-button>-->
          <el-button type="primary" size="mini" @click="save">保存修改</el-button>
        </el-col>
        <el-col :span="16" class="text-r">
          <el-button style="border: 0;padding: 0;">
            <el-upload action :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="uploadByJsqd"
              :file-list="fileList">
              <el-button type="primary" size="mini">导入</el-button>
            </el-upload>
          </el-button>
          <!-- <el-button type="primary" size="mini" @click="batchExport(2)">导出新老sku</el-button> -->
          <el-button type="primary" size="mini" @click="batchExport">导出</el-button>
          <el-button type="primary" size="mini" @click="clickLog">日志</el-button>
          <el-button type="primary" size="mini" @click="synchronizeErp">同步ERP数据</el-button>
        </el-col>
      </el-row>
    </div>
    <!--表格-->
    <div class="bg_white table_90 m-t-10 border-r-10 text-black f-12">
      <vxe-table border resizable show-overflow :height="tableHeight" :scroll-x="{ enabled: false }"
        :scroll-y="{ enabled: false }" :header-row-style="header_style" :data="tableData" :edit-config="editConfig">
        <vxe-colgroup title="基本信息" header-align="center" fixed="left" resizable>
          <vxe-column field="picture" title="图片" width="80" header-align="center" align="center" class="position-r">
            <template #default="{ row }">
              <el-upload :action="api_upload_url" :with-credentials="true" :on-success="function (res, file, file_list) {
                  return handleSuccess(res, file, file_list, row)
                }" :show-file-list="false" name="file" accept=".png, .jpg" :on-change="handleChange">
                <img v-if="row.picture" :src="row.picture" class="avatar" @mousemove="enlarge($event, row)"
                  @mouseout="enlargeOut(row)" />
                <el-icon v-else>
                  <plus />
                </el-icon>
                <view v-show="row.enlargeImgShow" class="img-show position-f" v-if="enlargeImg" :style="top">
                  <img :src="enlargeImg" />
                </view>
              </el-upload>
            </template>
          </vxe-column>
          <vxe-colgroup title="规格型号（sku）" header-align="center">
            <vxe-column field="model" width="150">
              <template #header>
                <el-input size="mini" v-model="form_requst.model" @keydown.enter.native="getList"></el-input>
              </template>
            </vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="产品名称" header-align="center">
            <vxe-column field="name" width="120" header-align="center">
              <template #header>
                <el-input size="mini" v-model="form_requst.name" @keydown.enter.native="getList"></el-input>
              </template>
            </vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="生命周期" header-align="center">
            <vxe-column field="F_PAEZ_Combo2" width="100" header-align="center">
              <template #header>
                <el-select v-model="form_requst.F_PAEZ_Combo2" placeholder clearable filterable size="mini"
                  @clear="clear('F_PAEZ_Combo2')">
                  <el-option v-for="(item, index) in F_PAEZ_Combo2" :key="index" :label="item" :value="item"
                    @click="getList"></el-option>
                </el-select>
              </template>
            </vxe-column>
          </vxe-colgroup>
        </vxe-colgroup>
        <vxe-colgroup title="产品分类" header-align="center">
          <vxe-colgroup title="一级分类" header-align="center">
            <vxe-column field="category_one" width="100">
              <template #header>
                <el-select v-model="form_requst.category_one" placeholder clearable filterable size="mini"
                  @clear="clear('category_one')" ref="select_one">
                  <el-option v-for="(item1, index) in category_one" :key="index" :label="item1" :value="item1"
                    @click="getList"></el-option>
                </el-select>
              </template>
            </vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="二级分类" header-align="center">
            <vxe-column field="category_two" width="100">
              <template #header>
                <el-select v-model="form_requst.category_two" placeholder clearable filterable size="mini"
                  @clear="clear('category_two')">
                  <el-option v-for="(item2, index) in category_two" :key="index" :label="item2" :value="item2"
                    @click="getList"></el-option>
                </el-select>
              </template>
            </vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="三级分类" header-align="center">
            <vxe-column field="category_three" width="100">
              <template #header>
                <el-select v-model="form_requst.category_three" placeholder clearable filterable size="mini"
                  @clear="clear('category_three')">
                  <el-option v-for="(item3, index) in category_three" :key="index" :label="item3" :value="item3"
                    @click="getList"></el-option>
                </el-select>
              </template>
            </vxe-column>
          </vxe-colgroup>
        </vxe-colgroup>
        <vxe-colgroup header-align="center">
          <vxe-colgroup title="项目负责团队" header-align="center">
            <vxe-column field="team_user" width="100" header-align="center">
              <template #header>
                <el-select v-model="form_requst.team_user" placeholder clearable filterable size="mini"
                  @clear="clear('team_user')">
                  <el-option v-for="(items, index) in opd_list" :key="index" :label="items" :value="items"
                    @click="getList"></el-option>
                </el-select>
              </template>
            </vxe-column>
          </vxe-colgroup>
        </vxe-colgroup>
        <vxe-column field="cost" title="物料成本价" width="80" header-align="center" align="right"
          v-allow="'NewCost.NewCostFinance'"></vxe-column>
        <vxe-column field="factory_price" title="出厂价(TCO成本)" width="80" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.factory_price" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="agent_price" title="代理价" width="75" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.agent_price" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="retail_price" title="零售指导价" width="70" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.retail_price" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="minimum_activity_price" title="最低活动价" width="70" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.minimum_activity_price" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="overseas_retail_price" title="海外零售指导价($)" width="70" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.overseas_retail_price" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="overseas_minimum_activity_price" title="海外零售最低活动价($)" width="75" header-align="center"
          align="right" :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.overseas_minimum_activity_price" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-colgroup title="产品成本构成" header-align="center" v-allow="'NewCost.NewCostFinance'">
          <vxe-column field="clinker_cost" title="结构/本体" width="70" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.clinker_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="metal_cost" title="电子" width="62" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.metal_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="electron_cost" title="电源" width="62" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.electron_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="wire_cost" title="线材" width="62" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.wire_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="accessories_cost" title="辅料/配件" width="68" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.accessories_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="packing_cost" title="包材" width="62" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.packing_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="process_cost" title="加工费" width="" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.process_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="other_cost" title="硬盘/运费/其他/DDR" width="80" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.other_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="auth_cost" title="模具费/认证费等费用" width="80" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.auth_cost" type="text"></vxe-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-column field="moq" title="MOQ" width="60" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.moq" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="packing" title="包装方式" width="80" header-align="center"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.packing" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-colgroup title="产品尺寸重量（mm/g）">
          <vxe-column field="FLENGTH" title="长" width="60" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.FLENGTH" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="FWIDTH" title="宽" width="60" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.FWIDTH" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="FHEIGHT" title="高" width="60" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.FHEIGHT" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="FNETWEIGHT" title="重量" width="120" header-align="center" align="right"
            :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.FNETWEIGHT" type="text"></vxe-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="包装版本1" header-align="center">
          <vxe-colgroup title="包装尺寸重量（mm/g）" header-align="center">
            <vxe-column field="FPACKAGE1" title="包装版本名称" width="60" header-align="center"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FPACKAGE1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FLENGTHP1" title="长" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FLENGTHP1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FWIDTHP1" title="宽" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FWIDTHP1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FHEIGHTP1" title="高" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FHEIGHTP1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FNETWEIGHTP1" title="重量" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FNETWEIGHTP1" type="text"></vxe-input>
              </template>
            </vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="装箱信息(mm/Kg)" header-align="center">
            <vxe-column field="FQtyC1" title="数量" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FQtyC1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FLENGTHC1" title="长" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FLENGTHC1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FWIDTHC1" title="宽" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FWIDTHC1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FHEIGHTC1" title="高" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FHEIGHTC1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FNETWEIGHTC1" title="净重" width="60" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FNETWEIGHTC1" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="FGROSSWEIGHTC1" title="毛重" width="120" header-align="center" align="right"
              :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row }">
                <vxe-input v-model="row.FGROSSWEIGHTC1" type="text"></vxe-input>
              </template>
            </vxe-column>
          </vxe-colgroup>
        </vxe-colgroup>
        <vxe-column field="FITEMPPROPERTY" title="物料属性" width="80" header-align="center" align="right"></vxe-column>
        <vxe-column field="bom_version"  title="BOM版本" width="140" header-align="center" align="right"></vxe-column>
        <vxe-column field="remark1" title="绩效提成经营分析品线(一级)" width="80" header-align="center" align="right">
          <template #default="{ row }">
            {{ row.remark1 }}
          </template>
        </vxe-column>
        <vxe-column field="remark2" title="绩效提成经营分析品线(二级)" width="100" header-align="center" align="right"
          :edit-render="{}">
          <template #default="{ row }">
            {{ row.remark2}}
          </template>
          <template #edit="{ row, $rowIndex }">
            <vxe-select v-model="row.remark2" @change="val => updateRemark(val, $rowIndex)" clearable>
               <vxe-option v-for="item in remark_level" :key="item.remark_two" :value="item.remark_two" :label="item.remark_two"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="remark3" title="业绩/回款统计品线" width="80" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.remark3" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="line" title="交付管理品线" width="60" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.line" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="is_fm" title="是否闪存" width="60" header-align="center" align="right"
          :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.is_fm" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="first_warehousing" title="首批入库时间" width="120" header-align="center" align="right">
        </vxe-column>
        <vxe-column field="edit_time" title="上次更新" width="120" header-align="center" align="right"></vxe-column>
      </vxe-table>
      <el-pagination :current-page="form_requst.page" :page-sizes="[10, 20, 30]" :page-size="form_requst.size"
        layout="total, sizes, prev, pager, next, jumper" :total="count" class="m-t-10 m-b-20 table_90"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>
    <!--价格修改-->
  </el-main>
</template>

<script>
import { mapState } from 'vuex'
import { ElMessage, ElLoading } from 'element-plus'
import axios from 'axios'

export default {
  data () {
    return {
      loading: null,
      fileList: [], //上传的文件列表
      header_style: {
        'background-color': '#F5F7FA',
        color: '#606266',
        fontSize: '10px',
        fontWeight: '600',
        textAlign: 'center'
      },
      brand_list: [],
      sku_list: [],
      name_list: [],
      F_PAEZ_Combo2: [],
      one_cate_list: [],
      two_cate_list: [],
      three_cate_list: [],
      is_211: [],
      supplier_list: [],
      form_requst: {
        page: 1,
        size: 20,
        model: '',
        name: '',
        F_PAEZ_Combo2: '',
        category_one: '',
        category_two: '',
        category_three: '',
        team_user: ''
      },
      model: '',
      name: '',
      F_PAEZ_Combo2: '',
      category_one: '',
      category_two: '',
      category_three: '',
      opd_list: '',
      form_buy: '',
      fast: '',
      supplier: '',
      count: 0,
      tableData: null,
      save_form: [],
      add_form: {
        id: '',
        key: '',
        value: ''
      },
      CostFinance: '',
      listLoading: '',
      old_value: '',
      enlargeImgShow: false,
      enlargeImg: '',
      top: '',
      tableHeight: 700, // 表格高度，会动态计算
      remark_level: [] // 绩效提成经营分析品线等级下拉选择
    }
  },
  computed: {
    ...mapState({
      // 取出页面标签
      userInfo: state => state.user.userInfo
    }),
    editConfig () {
      if (this.userInfo.isall == 1) {
        return { trigger: 'click', mode: 'cell' }
      }
    },
    api_upload_url () {
      return process.env.VUE_APP_API_BASEURL + 'admin/Upload/uploadImgDemo'
    }
  },
  created () {
    this.getList()
  },
  mounted() {
    // 组件挂载后计算表格高度
    this.calculateTableHeight();
    // 监听窗口大小变化，动态调整表格高度
    window.addEventListener('resize', this.calculateTableHeight);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.calculateTableHeight);
  },
  methods: {
    updateRemark(val, rowIndex){
      // 根据选中的二级品线查找对应的一级品线
      const item = this.remark_level.find(i => i && i.remark_two === val.value);
      this.tableData[rowIndex].remark1 = val.value==null|| !val.value?'' :item.remark_one;
    },
    // 计算表格自适应高度
    calculateTableHeight() {
      // 获取浏览器窗口高度
      const windowHeight = window.innerHeight;
      // 获取表格容器上方元素的高度（这里需要根据实际情况调整）
      // 假设上方操作栏和标题区域大约占用200px
      const headerHeight = 200;
      // 计算表格可用高度，减去一些边距和预留空间
      this.tableHeight = windowHeight - headerHeight - 30; // 30px作为底部边距预留
      // 确保表格高度不会太小
      if (this.tableHeight < 300) {
        this.tableHeight = 300;
      }
    },
    enlarge (e, row) {
      console.log(e)
      this.enlargeImg = row.picture
      row.enlargeImgShow = true
      this.top = 'top:' + e.clientY + 'px'
    },
    enlargeOut (row) {
      row.enlargeImgShow = false
      this.enlargeImg = ''
    },
    //成本列表
    getList (type) {
      if (type == 1) {
        this.form_requst.page = 1
        this.exportlist(type)
      }
      this.listLoading = true
      this.$http
        .get('cost/list', this.form_requst)
        .then(res => {
          if (res.errno == 200) {
            res.data.list.forEach((item, index) => {
              item.enlargeImgShow = false
            })
            this.tableData = res.data.list
            this.brand = res.data.brand
            this.F_PAEZ_Combo2 = res.data.F_PAEZ_Combo2
            this.category_one = res.data.category_one
            this.category_two = res.data.category_two
            this.category_three = res.data.category_three
            this.supplier = res.data.supplier
            this.count = res.data.count
            this.form_buy = res.data.form_buy
            this.fast = res.data.fast
            this.opd_list = res.data.opd
            this.remark_level = res.data.remark_level
            this.tableData.forEach(item => {
              item.is_show = 1
            })
          } else {
            ElMessage({
              type: 'error',
              message: res.errmsg
            })
          }
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    //clear select
    clear (item) {
      if (item == 'F_PAEZ_Combo2') {
        this.form_requst.F_PAEZ_Combo2 = ''
      }
      if (item == 'category_one') {
        this.form_requst.category_one = ''
      }
      if (item == 'category_two') {
        this.form_requst.category_two = ''
      }
      if (item == 'category_three') {
        this.form_requst.category_three = ''
      }
      if (item == 'team_user') {
        this.form_requst.team_user = ''
      }
      this.getList()
    },
    //重置
    reset () {
      this.form_requst = {
        page: 1,
        size: 20,
        model: '',
        name: '',
        F_PAEZ_Combo2: '',
        category_one: '',
        category_two: '',
        category_three: '',
        team_user: ''
      }
      this.getList()
    },
    //分页
    handleSizeChange (new_size) {
      this.form_requst.size = new_size
      this.getList()
    },
    handleCurrentChange (new_page) {
      this.form_requst.page = new_page
      this.getList()
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex == this.rowClassName) {
        return this.classNameRow
      }
      return ''
    },
    //编辑
    handleClick (index, row) {
      this.rowClassName = index
      this.classNameRow = 'current-row'
      row.is_show = 0
      this.buttonEdit = false
      this.buttonSave = true
    },

    //保存修改
    save () {
      console.log(this.tableData, 'this.tableData')
      this.$http
        .post('cost/edit', this.tableData)
        .then(res => {
          if (res.errno == 200) {
            ElMessage({
              type: 'success',
              message: res.errmsg
            })
            this.getList()
          } else {
            ElMessage({
              type: 'error',
              message: res.errmsg
            })
          }
        })
    },

    //同步ERP
    synchronizeErp () {
      const listLoading = ElLoading.service({
        lock: true,
        text: '同步ERP，可能需要几分钟，请耐心等待...'
      })
      this.$http
        .get('cost/geterpinfo')
        .then(res => {
          if (res.errno == 200) {
            ElMessage({
              type: 'success',
              message: res.errmsg
            })
            this.getList()
          } else {
            ElMessage({
              type: 'error',
              message: res.errmsg
            })
          }
        })
        .finally(() => {
          listLoading.close()
        })
    },
    //文件校验方法
    beforeAvatarUpload (file) {
      // 通过split方法和fileArr方法获取到文件的后缀名
      let fileArr = file.name.split('.')
      let suffix = fileArr[fileArr.length - 1]
      //只能导入.xls和.xlsx文件
      if (!/(xls|xlsx)/i.test(suffix)) {
        this.$message('文件格式不正确')
        return false
      }
      //不能导入大小超过2Mb的文件
      if (file.size > 20 * 1024 * 1024) {
        this.$message('文件过大，请上传小于20MB的文件〜')
        return false
      }
      return true
    },
    //文件发生改变就会触发的事件
    uploadByJsqd (file) {
      this.loading = ElLoading.service({
        lock: true,
        text: '此操作需要一段时间请耐心等待...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      //判断是否符合beforeAvatarUpload方法中的条件
      if (this.beforeAvatarUpload(file)) {
        this.fileList.name = file.name
        this.fileList.url = ''
        var formdata = new FormData()
        formdata.append('file', file.raw)
        this.$http.post('cost/import', formdata).then(res => {
          if (res.errno == 200) {
            this.$message({
              message: '导入成功',
              type: 'success'
            })
            this.getList() //调用表格方法，刷新页面
          } else {
            let str = ''
            if (res.data.length > 0) {
              res.data.forEach(it => {
                str = str + '<span>' + it + '</span><br>'
              })
            }
            this.$alert('<div style="max-height:450px;overflow:auto">' + res.errmsg + '</br>' + str + '</div>', '导入失败提示', {
              confirmButtonText: '确定',
              customClass: 'msgbox',
              dangerouslyUseHTMLString: true
            })
          }
          // 导出新老sku 导出预加载
          this.loading.close()
        })
      }
    },
    //导出
    exportlist (type) {
      // 导出新老sku 导出预加载
      this.loading = ElLoading.service({
        lock: true,
        text: '此操作需要一段时间请耐心等待...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const apiVersion = process.env.VUE_APP_API_VERSION.replace(/\./g, '_')
      //导出添加搜索条件拼字段
      var pathtest = ''
      pathtest = process.env.VUE_APP_API_BASEURL + apiVersion + '/' + 'cost/export?isall=' + this.userInfo.isall + '&model=' + this.form_requst.model + '&name=' + this.form_requst.name + '&F_PAEZ_Combo2=' + this.form_requst.F_PAEZ_Combo2 + '&category_one=' + this.form_requst.category_one + '&category_two=' + this.form_requst.category_two + '&category_three=' + this.form_requst.category_three + '&team_user=' + this.form_requst.team_user + (type === 2 ? '&is_new=2' : '')
      axios
        .get(pathtest, {
          responseType: 'blob',
          headers: {
            /*'X-Token': getToken(),*/
            'Content-Type': 'application/json;charset=utf-8'
          }
        }
        )
        .then(res => {
          if (!res) {
            this.$message.error('下载模板文件失败')
            return false
          }
          const stream = res.data // 后端用stream返回Excel文件
          const blob = new Blob([stream])
          // 前端获取业务码，成功执行正常业务
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          const timeStamp = new Date().toString()
          const nameStr = decodeURI(escape(JSON.parse(res.headers['content-disposition'].split(';')[1].split('=')[1])))
          downloadElement.download = nameStr // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
          // 导出新老sku 导出预加载
          this.loading.close()
        })
    },
    //批量导出
    batchExport (type) {
      /* this.batchExportShow = true*/
      if (type === 2) {
        this.$confirm('导出所有sku数据量较大，可能需要较多时间是否确认导出', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          if (type === 2) {
            this.exportlist(type)
          }
        })
      } else {
        this.exportlist()
      }
    },
    //日志
    clickLog () {
      this.$router.push({
        path: '/index/log'
      })
    },
    //上传图片
    handleSuccess (res, file, file_list, item) {
      console.log(item, 'item')
      if (res.status == 200) {
        // ElMessage({
        //   type: 'success',
        //   message: res.message,
        // })
        item.picture = res.data.imgpath
        const formQuery = {
          id: item.id,
          picture: item.picture
        }
        this.$http.post('cost/saveImg', formQuery).then(ress => {
          if (ress.errno == 200) {
            ElMessage({
              type: 'success',
              message: ress.errmsg
            })
          } else {
            ElMessage({
              type: 'error',
              message: ress.errmsg
            })
          }
        })
      } else {
        file_list.splice(file_list.length - 1, 1)
        ElMessage({
          type: 'error',
          message: res.errmsg
        })
      }
    },
    //上传前色子
    //上传文件限制
    handleChange (file, fileList) {
      const isLt5M = file.size / 1024 / 1024 < 1
      if (!isLt5M) {
        ElMessage({
          type: 'error',
          message: '上传文件大小不能超过 1MB'
        })
        file = null
        fileList = []
        this.$refs.upload.clearFiles() // 清除前端显示的文件列表
      } else {
        if (file.status === 'ready') {
          this.uploadFile = file.raw
        }
      }
    }
  }
}
</script>
<style scoped>
/*新样式*/
.vxe-table--render-default {
  font-size: 12px;
}

::v-deep(.vxe-header--column, .vxe-table--render-default) {
  padding: 5px 0 !important;
}

::v-deep(.vxe-body--column) {
  height: 32px !important;
}

::v-deep(.vxe-table--render-default .vxe-cell) {
  padding: 0 2px !important;
  font-size: 12px;
  min-height: auto !important;
}

.select-class {
  z-index: 10 !important;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -14px;
}

::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
  margin-bottom: 0px !important;
  width: 40px !important;
  height: 40px !important;
}

::v-deep(.el-upload-list__item),
::v-deep(.vxe-body--row) {
  width: 40px !important;
  height: 50px !important;
  line-height: 40px !important;
}

::v-deep(.el-upload-list__item) {
  position: absolute;
}

::v-deep(.avatar) {
  width: 40px;
  height: 40px;
  padding-top: 5px;
  padding-bottom: 5px;
}

::v-deep(.el-icon-plus) {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  line-height: 40px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
}

.img-show {
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 9;
  background-color: #fff;
  vertical-align: middle;
  margin-top: -60px;
  text-align: center;
}

.img-show img {
  z-index: 10;
  max-width: 150px;
  vertical-align: middle;
}

</style>
