<!--
 * @Description : 产品目录清单 -- 列表组件 -- vxe-table
 * @Author      : jinxin
 * @Date        : 2022-10-14 19:18:07
-->

<template>
  <div class="table">
    <vxe-table ref="getDom" border resizable :scroll-x="{enabled: false}" :row-config="{isHover: true}"
      :scroll-y="{enabled: false}" height="600" :data="data.list" @checkbox-change="getSelectRow"
      @checkbox-all="getSelectRow">
      <div v-for="(item,index) in data.listHeader" :key="index">
        <vxe-column v-if="item.type == 'checkbox'" :type="item.type" :fixed="item.fixed" :align="item.align"
          :width="item.width"></vxe-column>
        <vxe-colgroup v-if="item.type == 'group'" :fixed="item.fixed" :align="item.align" :title="item.title">
          <div v-for="(itemChild,indexChild) in item.children" :key="indexChild">
            <vxe-column v-if="itemChild.type == 'col'" :field="itemChild.field" :title="itemChild.title"
              :width="itemChild.width" :align="itemChild.align" show-header-overflow show-overflow></vxe-column>
            <vxe-column v-if="itemChild.type == 'img'" :field="itemChild.field" :title="itemChild.title"
              :width="itemChild.width" :align="itemChild.align">
              <template #default="scope">
                <!-- <img :src="scope.row.image ? data.cdn + scope.row.image : defaulImg" class="avatar"
                  @error="e => {e.target.src = defaulImg}" /> -->
                <img :src="scope.row.image ? data.cdn + scope.row.image : defaulImg" class="avatar"
                  @mousemove="entryCellShowImg($event, scope.row)" @mouseout="leaveCellBlurImg(scope.row)" />
                <view v-show="scope.row.showImg" class="img-show position-f" v-if="data.showImgUrl" :style="data.top">
                  <img :src="data.cdn +  data.showImgUrl" />
                </view>
              </template>
            </vxe-column>

          </div>
        </vxe-colgroup>
        <vxe-colgroup v-if="item.type == 'group-allow'" :fixed="item.fixed" :align="item.align" :title="item.title"
          :width="item.width" v-allow="'NewCost.NewCostFinance'">
          <div v-for="(itemChild,indexChild) in item.children" :key="indexChild">
            <vxe-column v-if="itemChild.type == 'col'" :field="itemChild.field" :title="itemChild.title"
              :width="itemChild.width" :align="itemChild.align" show-header-overflow show-overflow></vxe-column>
            <vxe-column v-if="itemChild.type == 'img'" :field="itemChild.field" :title="itemChild.title"
              :width="itemChild.width" :align="itemChild.align">
              <template #default="scope">
                <img :src="scope.row.package_img ? data.cdn + scope.row.package_img : defaulImg" class="avatar"
                  @error="e => {e.target.src = defaulImg}" />
              </template>
            </vxe-column>
          </div>
        </vxe-colgroup>
        <vxe-column v-if="item.type == 'col'" :field="item.field" :title="item.title" :width="item.width"
          :align="item.align" show-header-overflow show-overflow></vxe-column>
        <vxe-column v-if="item.type == 'col-allow'" :field="item.field" :title="item.title" :width="item.width"
          v-allow="'NewCost.AddSpu'" :align="item.align" show-header-overflow show-overflow></vxe-column>
        <vxe-column v-if="item.type == 'group-all'" :field="item.field" :title="item.title" :width="item.width"
          v-allow="'NewCost.NewCostFinance'" :align="item.align" show-header-overflow show-overflow></vxe-column>
        <vxe-column v-if="item.type == 'template'" :title="item.title" :width="item.width" :align="item.align"
          :fixed="item.fixed">
          <template #default="scope">
            <el-switch v-if="item.son == 'switch'" @change="switchChange(scope.row)" v-model="scope.row.status"
              class="ml-2" :active-value=1 :inactive-value=0 />
            <el-button v-if="item.son == 'edit'" type="text" @click="editCom(scope.row,'spu')">编辑SPU</el-button>
            <el-button v-if="item.son == 'edit'" type="text" @click="editCom(scope.row,'sku')">编辑SKU</el-button>
          </template>
        </vxe-column>
        <vxe-column v-if="item.type == 'template-allow'" :title="item.title" :width="item.width" :align="item.align"
          v-allow="'NewCost.EditSku'" :fixed="item.fixed">
          <template #default="scope">
            <el-switch v-if="item.son == 'switch'" @change="switchChange(scope.row)" v-model="scope.row.status"
              class="ml-2" :active-value=1 :inactive-value=0 />
            <el-button v-if="item.son == 'edit'" type="text" @click="editCom(scope.row,'spu')">编辑SPU</el-button>
            <el-button v-if="item.son == 'edit'" type="text" @click="editCom(scope.row,'sku')">编辑SKU</el-button>
          </template>
        </vxe-column>
      </div>
    </vxe-table>
    <div class=" d-play">
      <el-row>
        <el-col :span="24">
          <el-row :gutter="10">
            <el-col :span="3">
              <div class="d-st">
                <span class="m-r-10">SPU：{{data.spu_count}}条</span>
                <span>SKU：{{data.sku_count}}条</span>
              </div>
            </el-col>
            <el-col :span="19">
              <el-pagination class="m-t-20 m-b-20" :current-page="data.page" :page-sizes="[50, 100, 150]"
                :page-size="data.size" layout=" sizes, prev, pager, next, jumper" :total="data.count"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" small>
              </el-pagination>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!-- 编辑 SPU SKU -->
    <EditSpuSkuDiaLog v-model:isEditSpuSkuShow="data.isEditSpuSkuShow" v-model:selectList="data.selectList"
      v-model:excludespulist="data.excludespulist" @getSpuSkuValue="getSpuSkuValue">
    </EditSpuSkuDiaLog>
    <!-- 语言选择 -->
    <!-- <LanguageSelect v-model:isShow="data.isLanguageShow" @getLanguageId="getLanguageId"></LanguageSelect> -->
    <!-- 语言提示 -->
    <LanguageTiptool v-model:isShowLanguageTipTool="data.isLanguageShow" @noticeShowBatch="noticeShowBatch">
    </LanguageTiptool>
    <!-- 批量修改 -->
    <BatchEdit v-model:isBatchEditShow="data.isBatchEditShow" v-model:attrlist="data.muleditAttr"
      v-model:cusTitle="data.cusTitle" @getBatchEditObj="getBatchEditObj"></BatchEdit>
    <!-- 下载导入模板 -->
    <DownLoadImportTemplate v-model:isDownloadShow="data.isDownloadShow"></DownLoadImportTemplate>
    <!-- 确定删除 -->
    <el-dialog :model-value="data.isShowDelete" :close-on-click-modal="false" :close-on-press-escape="false"
      :show-close="false" title="删除提示" width="440px" center>
      <span>{{'确定删除所选产品吗？'}}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteCommon('cancel')">取消</el-button>
          <el-button type="primary" @click="deleteCommon('sure')">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, watch, getCurrentInstance, ref, inject, onUpdated } from 'vue'
import EditSpuSkuDiaLog from '@/views/components/EditSpuSkuDiaLog/EditSpuSkuDiaLog.vue'
import LanguageSelect from '@/views/components/LanguageSelect/LanguageSelect.vue'
import BatchEdit from '@/views/components/BatchEdit/BatchEdit.vue'
import DownLoadImportTemplate from '@/views/components/ProductListCom/DownLoadImportTemplate.vue'
import LanguageTiptool from '@/views/components/ProductListCom/LanguageTiptool.vue'
import defaulImg from '@/assets/defaulImg.jpg'
import Request from '@/utils/request.js'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'ProductListCom',
  props: {
    prolist: Object,
    getlistSearch: Object,
    noticedata: Number,
    searchComVal: Object,
    searchChangeVal: Object
  },
  emits: ['update:prolist', 'clearParaBtn', 'update:getlistSearch', 'update:noticedata', 'update:searchComVal', 'update:searchChangeVal', 'getSizeValue', 'getPageValue'],
  components: {
    EditSpuSkuDiaLog,
    LanguageSelect,
    LanguageTiptool,
    BatchEdit,
    DownLoadImportTemplate
  },
  setup (props, context) {
    // 实例
    const request = new Request()
    let router = useRouter()
    let store = useStore()
    const { proxy } = getCurrentInstance()
    const reload = inject('reload')
    let getDom = ref(null)
    // 生命周期 - 获取数据
    onMounted(() => {
      // 定义表头
      // console.log('route.currentRoute.value --- >',router.currentRoute.value)
      data.cdn = store.state.user.cdn
      data.listHeader = [
        { type: 'checkbox', fixed: 'left', align: 'center', width: '36' },
        {
          type: 'group', fixed: 'left', align: 'center', title: 'SPU信息', children: [
            { type: 'col', field: 'name', title: '名称', width: '120', align: 'left' },
            { type: 'img', field: 'image', title: '图片', width: '50', align: 'center' },
            { type: 'col', field: 'spu', title: 'SPU', width: '180', align: 'left' },
            { type: 'col', field: 'spec', title: '规格参数', width: '180', align: 'left' },
            { type: 'col', field: 'series', title: '所属系列', width: '100', align: 'left' },
            { type: 'col', field: 'cate_path_name', title: '产品分类', width: '137', align: 'left' },
          ]
        },
        { type: 'col', field: 'is_temp', title: '是否暂存', width: '64', align: 'center' },
        { type: 'col', field: 'sku', title: '规格型号（sku）', width: '280', align: 'left' },
        { type: 'col', field: 'attribute_name', title: '属性', width: '90', align: 'left' },
        { type: 'col', field: 'fast', title: '是否211', width: '62', align: 'center' },
        { type: 'col', field: 'opd_team_name', title: 'OPD团队', width: '128', align: 'left' },
        { type: 'col', field: 'form_buy', title: '物料属性', width: '70', align: 'center' },
        { type: 'col', field: 'supply_chain', title: '供应链', width: '70', align: 'center' },
        { type: 'col', field: 'FBARCODE', title: '69码', width: '120', align: 'left' },
        { type: 'col-allow', field: 'supplier_name', title: '默认供应商', width: '172', align: 'left' },
        { type: 'col', field: 'FUseOrgId_name', title: '默认供应组织', width: '172', align: 'left' },
        { type: 'template', title: 'SKU状态', field: 'status', width: '64', align: 'center', son: 'switch' },
        {
          type: 'group', align: 'center', title: '价格信息', children: [
            { type: 'col', field: 'factory_price', title: '出厂价（TCO成本）', width: '120' },
            { type: 'col', field: 'agent_price', title: '代理价(￥)', width: '90' },
            { type: 'col', field: 'agent_special_offer', title: '代理特价(￥)', width: '110' },
            { type: 'col', field: 'agency_price_diff', title: '代理价差额(￥)', width: '120' },
            { type: 'col', field: 'partner_gross_margin', title: '渠道毛利率', width: '100' },
            { type: 'col', field: 'retail_price', title: '零售指导价(￥)', width: '120' },
            { type: 'col', field: 'retail_special_offer', title: '零售特价(￥)', width: '110' },
            { type: 'col', field: 'retail_price_diff', title: '零售价差额(￥)', width: '100' },
            { type: 'col', field: 'b2c_gross_margin', title: 'B2C毛利率', width: '70' },
            { type: 'col', field: 'dealer_gross_margin', title: '经销商毛利率', width: '100' },
            { type: 'col', field: 'minimum_activity_price', title: '最低活动价(￥)', width: '100' },
            { type: 'col', field: 'overseas_retail_price', title: '海外零售指导价(￥)', width: '130' },
            { type: 'col', field: 'overseas_minimum_activity_price', title: '海外零售最低活动价(￥)', width: '150' },
            { type: 'col', field: 'discount_begin_time', title: '特价开始时间', width: '100' },
            { type: 'col', field: 'discount_end_time', title: '特价结束时间', width: '100' },
          ]
        },
        { type: 'group-all', field: 'material_total_price', title: '物料成本价', width: '100', align: 'center' },
        {
          type: 'group-allow', align: 'center', title: '成本构成', isShow: false, children: [
            { type: 'col', field: 'clinker_cost', title: '结构本体', width: '80' },
            { type: 'col', field: 'metal_cost', title: '电子', width: '80' },
            { type: 'col', field: 'electron_cost', title: '电源', width: '80' },
            { type: 'col', field: 'wire_cost', title: '线材', width: '80' },
            { type: 'col', field: 'accessories_cost', title: '配料/配件', width: '100' },
            { type: 'col', field: 'packing_cost', title: '包材', width: '80' },
            { type: 'col', field: 'process_cost', title: '加工费', width: '80' },
            { type: 'col', field: 'other_cost', title: '硬盘/运费其他', width: '120' },
          ]
        },
        { type: 'col', field: 'moq', title: 'MOQ', width: '100', align: 'center' },
        {
          type: 'group', align: 'center', title: 'SKU尺寸重量信息mm/g', children: [
            { type: 'col', field: 'FLENGTH', title: '长', width: '80', align: 'center' },
            { type: 'col', field: 'FWIDTH', title: '宽', width: '80', align: 'center' },
            { type: 'col', field: 'FHEIGHT', title: '高', width: '80', align: 'center' },
            { type: 'col', field: 'FNETWEIGHT', title: '重量', width: '80', align: 'center' },
          ]
        },
        {
          type: 'group-allow', align: 'center', title: 'SKU尺寸重量信息mm/g', children: [
            { type: 'col', field: 'packing', title: '包装方式', width: '80', align: 'center' },
            { type: 'col', field: 'FPACKAGE1', title: '包装版本名称', width: '80', align: 'center' },
            { type: 'col', field: 'FLENGTHP1', title: '包装长', width: '80', align: 'center' },
            { type: 'col', field: 'FWIDTHP1', title: '包装宽', width: '80', align: 'center' },
            { type: 'col', field: 'FHEIGHTP1', title: '包装高', width: '80', align: 'center' },
            { type: 'col', field: 'FNETWEIGHTP1', title: '包装重量', width: '80', align: 'center' },
            { type: 'col', field: 'FQtyC1', title: '数量', width: '80', align: 'center' },
            { type: 'img', field: 'package_img', title: '包装图', width: '80', align: 'center' },
          ]
        },
        {
          type: 'group', align: 'center', title: '装箱信息(mm/Kg)', children: [
            { type: 'col', field: 'FLENGTHC1', title: '装箱长', width: '80', align: 'center' },
            { type: 'col', field: 'FWIDTHC1', title: '装箱宽', width: '80', align: 'center' },
            { type: 'col', field: 'FHEIGHTC1', title: '装箱高', width: '80', align: 'center' },
            { type: 'col', field: 'FNETWEIGHTC1', title: '装箱净重', width: '80', align: 'center' },
            { type: 'col', field: 'FGROSSWEIGHTC1', title: '装箱毛重', width: '80', align: 'center' },
          ]
        },
        { type: 'col', field: 'create_time', title: '首批入库时间', width: '128', align: 'center' },
        { type: 'col', field: 'update_time', title: '上次更新时间', width: '128', align: 'center' },
        { type: 'template-allow', title: '操作', width: '120', align: 'center', fixed: 'right', son: 'edit' }
      ]
      data.listHeader.reverse()
      data.listHeader.forEach(el => {
        if (el.children) {
          el.children.reverse()
        }
      });
      getList()
    })
    // 处理语言切换
    onUpdated(() => {
      data.cdn = store.state.user.cdn
      if (store.state.user.isShowBatchEditVuex) {
        data.isBatchEditShow = store.state.user.isShowBatchEditVuex
      }
    })
    // 变量
    let data = reactive({
      cdn: '',
      cusTitle: '批量修改',
      excludespulist: [],
      isShowDelete: false,
      parentPara: {},
      listHeader: [],
      list: [],
      selectList: [],
      page: 1,
      size: 50,
      count: 0,
      isLanguageShow: false,
      isEditSpuSkuShow: false,
      isBatchEditShow: false,
      muleditAttr: [
        { id: '1', name: '是否211', field: 'fast', type: 'sel', list: [{ id: 0, name: '否' }, { id: 1, name: '是' }] },
        { id: '2', name: 'OPD团队', field: 'opd_team_id', type: 'selmh', list: [], url: 'v1/opd_team' },
        { id: '3', name: '物料属性', field: 'form_buy', type: 'sel', list: [{ id: 1, name: '自制' }, { id: 2, name: '委外' }, { id: 3, name: '外购' }] },
        { id: '4', name: '供应链', field: 'supply_chain', type: 'sel', list: [{ id: 1, name: '深圳' }, { id: 2, name: '东莞' }, { id: 3, name: '长沙' }] },
        { id: '5', name: '默认供应商', field: 'supplier', type: 'selmh', list: [], url: 'v1/product/get_supplier_list' },
        { id: '7', name: '默认供应组织', field: 'FUseOrgId', type: 'selmh', list: [], url: 'v1/product/get_org_list' },
        { id: '8', name: 'SKU状态', field: 'status', type: 'sel', list: [{ id: 0, name: '关' }, { id: 1, name: '开' }] },
        { id: '9', name: '特价开始时间', field: 'discount_begin_time', type: 'date' },
        { id: '10', name: '特价结束时间', field: 'discount_end_time', type: 'date' }
      ],
      searchQueryExport: {},
      isDownloadShow: false,
      showImgUrl: '',
      top: '',
      sku_count: null,
      spu_count: null
    })
    // 移入
    const entryCellShowImg = (e, row) => {
      data.showImgUrl = row.image
      row.showImg = true
      data.top = 'top:' + e.clientY + 'px'
    }
    // 移出
    const leaveCellBlurImg = (row) => {
      row.showImg = false
      data.showImgUrl = ''
    }
    // 获取选中的行
    const getSelectRow = (selectList) => {
      data.selectList = selectList.records
    }
    // 条目
    const handleSizeChange = (val) => {
      data.size = val
      context.emit('getSizeValue', data.size)
      getList()
    }
    // 页码
    const handleCurrentChange = (val) => {
      data.page = val
      context.emit('getPageValue', data.page)
      getList()
    }
    // 获取列表数据
    const getList = () => {
      let query = {}
      query.language_id = store.state.user.language.id || 1
      query.page = data.page
      query.size = data.size
      data.searchQueryExport.page = data.page
      data.searchQueryExport.size = data.size

      console.log('data.searchQueryExport', data.searchQueryExport)
      let assignQuery = Object.assign(query, data.searchQueryExport)
      // console.log('assignQuery',assignQuery)
      request.get('v1/product', assignQuery).then(res => {
        if (res.status == 200) {
          data.list = res.data.data
          if (data.list.length > 0) {
            data.list.forEach(el => {
              el.fast = el.fast == 1 ? '是' : '否'
              el.is_temp = el.is_temp == 1 ? '是' : '否'
              el.form_buy = el.form_buy == 1 ? '自制' : el.form_buy == 2 ? '委外' : el.form_buy == 3 ? '外购' : ''
              el.supply_chain = el.supply_chain == 1 ? '深圳' : el.supply_chain == 2 ? '东莞' : el.supply_chain == 3 ? '长沙' : ''
              el.status = el.status ? el.status : 0
            });
            data.count = res.data.count
            data.spu_count = res.data.spu_count
            data.sku_count = res.data.sku_count
          }
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    // sku状态
    const switchChange = (row) => {
      let query = {
        status: '0',
        id: '',
        language_id: store.state.user.language.id
      }
      query.status = row.status
      query.id = row.id
      let msg = query.status == '0' ? '禁用' : '启用'
      proxy.$http.post('v1/product/change_status', query).then(res => {
        if (res.status == 200) {
          proxy.$message.success(`SKU状态${msg}成功`)
        }
      })
    }
    // 编辑
    const editCom = (row, type) => {
      if (type == 'spu') {
        // 关闭页签 如果存在 editSpu 先关闭
        let index = null
        store.state.topNavTag.tags.forEach((el, inde) => {
          el.fullPath.indexOf('editSpu') != -1 ? index = inde : false
        });
        if (index) {
          store.dispatch('topNavTag/removeNavTag', index)
        }

        router.push({ path: '/index/editSpu', query: { id: row.product_id } })
      }
      if (type === 'sku') {
        // 关闭页签 如果存在 editSku 先关闭
        let index = null
        store.state.topNavTag.tags.forEach((el, inde) => {
          el.fullPath.indexOf('editSku') != -1 ? index = inde : false
        });
        if (index) {
          store.dispatch('topNavTag/removeNavTag', index)
        }

        router.push({ path: '/index/editSku', query: { id: row.product_id } })
      }
    }
    // 获取语言 - 下跳
    const getLanguageId = (val) => {
      if (val) {
        store.state.user.language.id = val.id
        store.state.user.language.name = val.name
        data.isBatchEditShow = true
        store.state.user.isShowBatchEditVuex = true
        reload()
      }
    }
    // 提示确定下跳
    const noticeShowBatch = (val) => {
      if (val) {
        data.isBatchEditShow = true
      }
    }
    // 获取批量修改
    const getBatchEditObj = (val) => {
      let query = {
        product_sku_id: [],
        key: val.attrkey,
        value: val.editContent,
        language_id: store.state.user.language.id || 1
      }
      data.selectList.forEach(el => {
        query.product_sku_id.push(el.product_sku_id)
      });
      proxy.$http.post('v1/product/change_sku_common', query).then(res => {
        if (res.status == 200) {
          data.selectList = []
          ElMessage({
            type: 'success',
            message: '批量修改成功',
            duration: 4000
          })
          getList()
        }
      })
    }
    // 获取更改spu值
    const getSpuSkuValue = (val) => {
      let query = {
        product_id: null,
        product_sku_id: []
      }
      query.product_id = val.editValue
      query.product_sku_id = val.oldSkuId
      proxy.$http.post('v1/product/change_spu_id', query).then((res) => {
        if (res.status == 200) {
          proxy.$message.success('更换SPU成功')
          setTimeout(() => {
            getList()
          }, 1000);
        }
      })
    }
    // 确定删除
    const deleteCommon = (type) => {
      if (type == 'cancel') {
        data.isShowDelete = false
      } else {
        let delidlist = []
        let joinId = ''
        data.selectList.forEach(el => {
          //   console.log('删除行 --> ', el)
          delidlist.push(el.product_sku_id)
        });
        delidlist.forEach(el => {
          joinId = joinId + el + ','
        });
        if (joinId.charAt(joinId.length - 1) == ',') {
          joinId = joinId.slice(0, joinId.length - 1)
        }
        proxy.$http.post('v1/product/delete', { id: joinId }).then(res => {
          if (res.status == 200) {
            data.isShowDelete = false
            proxy.$message.success('删除产品成功')
            getList()
          }
        })
      }
    }
    // 监听 按钮组
    watch(() => props.prolist.clickType, (newVal, oldVal) => {
      data.parentPara.clickType = newVal
      if (data.parentPara.clickType) {
        // 点击 顶部 删除产品 批量修改 更改SPU 
        if (data.parentPara.clickType == 'mulEdit' || data.parentPara.clickType == 'editSpu' || data.parentPara.clickType == 'delete') {
          if (data.selectList.length > 0) {
            if (data.parentPara.clickType == 'mulEdit') {
              data.isLanguageShow = true
            }
            if (data.parentPara.clickType == 'editSpu') {
              // 获取所有spu 去掉已选spu
              let idlist = []
              let requestStr = ''
              data.selectList.forEach(el => {
                if (!idlist.includes(el.product_id)) {
                  idlist.push(el.product_id)
                }
              });

              idlist.forEach(el => {
                requestStr = requestStr + el + ','
              });

              if (requestStr.charAt(requestStr.length - 1) == ',') {
                requestStr = requestStr.slice(0, requestStr.length - 1)
              }

              proxy.$http.showLoading(false).get('v1/product/spu_list', { except: requestStr }).then(res => {
                if (res.status == 200) {
                  data.excludespulist = res.data
                }
              })

              data.isEditSpuSkuShow = true
            }
            if (data.parentPara.clickType == 'delete') {
              data.isShowDelete = true
            }
            // if(data.parentPara.clickType == 'delete'){}
          } else {
            ElMessage({
              type: 'error',
              message: '请先选择操作行'
            })
          }
        }
        // 下载导入模板
        if (data.parentPara.clickType == 'download') {
          data.isDownloadShow = true
        }
        // 导入
        if (data.parentPara.clickType == 'import') {
          getList()
        }
        // 导入
        if (data.parentPara.clickType == 'exportExcelSku') {
          getList()
        }

        // 导出
        if (data.parentPara.clickType == 'out') {
          const loading = proxy.$loading.service({
            lock: true,
            text: '导出列表，可能需要时间较长，请耐心等待...'
          })
          let query = {
            language_id: data.searchQueryExport.language_id || 1,
            spu: data.searchQueryExport.spu || '',
            sku: data.searchQueryExport.sku || '',
            status: data.searchQueryExport.status || '0',
            spec: data.searchQueryExport.spec || '',
            series: data.searchQueryExport.series || '',
            category_id: data.searchQueryExport.category_id || '',
            opd_team_id: data.searchQueryExport.opd_team_id || '',
            supplier: data.searchQueryExport.supplier || '',
            FUseOrgId: data.searchQueryExport.FUseOrgId || '',
            name: data.searchQueryExport.name || ''
          }
          proxy.$http.showLoading(false).get('v1/product/export', query).then(res => {
            if (res.status == 200) {
              // console.log('导出成功',res)
              let path = res.data.url
              let tag_A = document.createElement('a')
              tag_A.style.display = 'none'
              tag_A.href = path
              tag_A.download = ''
              tag_A.click()
              // 判断是否存在说 body
              if (document.body.contains(tag_A)) {
                document.body.removeChild(tag_A)
              }
              loading.close()
            } else {
              // console.log('导出失败')
              loading.close()
            }
          })
        }
        // 新增SPU
        if (data.parentPara.clickType == 'addSpu') {
          router.push({ path: '/index/addSpu' })
        }
        // 同步ERP
        // if(data.parentPara.clickType == 'setupErp'){
        //   if (data.selectList.length > 0) {
        //     let prodskulist = data.selectList.map(it => {return it.product_sku_id})
        //     let query = {
        //       language_id:store.state.user.language.id,
        //       product_sku_id:prodskulist
        //     }
        //     proxy.$http.showLoading(true).post('v1/product/async_to_erp',query).then(r => {
        //       if(r.status == 200){
        //         // console.log('同步成功 --> ',r)
        //         ElMessage({
        //           type: 'success',
        //           message: r.message
        //         })
        //       }
        //     })
        //   }else{
        //     ElMessage({
        //       type: 'error',
        //       message: '请先选择需要同步的SKU'
        //     })
        //   }
        // }
        // 同步任务列表
        if (data.parentPara.clickType == 'setupErp') {
          // alert('同步任务列表 --->')
          router.push({ path: '/index/syncLogin' })
        }
        // 同步成本信息
        if (data.parentPara.clickType == 'synChronize') {
          proxy.$http.showLoading(true).post('v1/product/manual_async_cost').then(r => {
            if (r.status == 200) {
              ElMessage({
                type: 'success',
                message: r.message
              })
            }
          })
        }
      }
      // 清空 clickType
      context.emit('clearParaBtn')
    })
    watch(() => props.getlistSearch, (v1, v2) => {
      data.list = v1.data
      data.list.forEach(el => {
        el.fast = el.fast == 1 ? '是' : '否'
        el.is_temp = el.is_temp == 1 ? '是' : '否'
        el.form_buy = el.form_buy == 1 ? '自制' : el.form_buy == 2 ? '委外' : el.form_buy == 3 ? '外购' : ''
        el.supply_chain = el.supply_chain == 1 ? '深圳' : el.supply_chain == 2 ? '东莞' : el.supply_chain == 3 ? '长沙' : ''
      });
      data.count = v1.count
      getDom.value.loadData(data.list)
      data.spu_count = v1.spu_count
      data.sku_count = v1.sku_count
    })
    // 搜索回车
    watch(() => props.searchComVal, (v1, v2) => {
      data.searchQueryExport = v1
    })
    // 搜索输入值时
    watch(() => props.searchChangeVal, (v1, v2) => {
      data.searchQueryExport[v1.queryValue] = v1.value
    }, {
      deep: true
    })
    // 更新列表
    watch(() => props.noticedata, (v1, v2) => {
      getList()
    })
    return {
      props,
      data,
      getDom,
      getList,
      handleSizeChange,
      handleCurrentChange,
      switchChange,
      getSelectRow,
      getLanguageId,
      noticeShowBatch,
      getBatchEditObj,
      editCom,
      defaulImg,
      getSpuSkuValue,
      deleteCommon,
      leaveCellBlurImg,
      entryCellShowImg
    }
  }
})
</script>
<style scoped>
::v-deep(.vxe-table--render-default) {
  font-size: 12px;
}

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

.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;
  width: 150px;
  height: 150px;
  vertical-align: middle;
}
.d-st {
  font-size: 13px;
  padding-top: 23px;
}
.m-r-10 {
  margin-right: 10px;
}
::v-deep(.vxe-cell--title) {
  min-width: 70px;
}
</style>