<!--
 * @Description : 产品目录清单 -- 按钮组子组件 -- 列表 -- 按钮组
 * @Author      : jinxin
 * @Date        : 2022-10-14 18:28:21
-->

<template>
  <div class="p-l-12 m-t-16" :key="data.isRefrsh">
    <el-button class="m-l-10 cus-point" type="primary" @click="commonBtnClick('mulEdit')"
      v-allow="'NewCost.NewCostFinance'" v-if="data.isDisabled == 1">批量修改</el-button>
    <el-button class="m-l-10 cus-point" type="primary" @click="commonBtnClick('download')"
      v-if="data.isDisabled == 1">下载导入模板</el-button>
    <el-button class="m-l-10 cus-point" type="primary" @click="commonBtnClick('delete')"
      v-if="data.isDisabled == 1">删除产品</el-button>
    <el-button class="m-l-10 cus-point" type="primary" size="mini" v-if="data.isDisabled == 1"
      v-allow="'NewCost.NewCostFinance'">
      <el-upload action :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="uploadByJsqd"
        :file-list="data.fileList">
        <span class="wt-cl">导入</span>
      </el-upload>
    </el-button>
    <el-button class="m-l-10 cus-point" type="primary" @click="commonBtnClick('out')">导出</el-button>
    <el-button class="m-l-10 cus-point" type="primary" @click="commonBtnClick('info')">日志</el-button>
    <!-- v-if="data.isShow" -->
    <el-button class="cus-point" type="primary" @click="commonBtnClick('addSpu')" v-allow="'NewCost.NewCostFinance'"
      v-if="data.isDisabled == 1">新增SPU</el-button>
    <el-button class="cus-point" type="primary" @click="commonBtnClick('editSpu')"
      v-if="data.isDisabled == 1">更改SPU</el-button>
    <!-- 同步ERP 改成 日志 查看没同步到ERP的数据 v-if="false" -->
    <el-button class="m-l-10 cus-point" type="primary" @click="commonBtnClick('setupErp')"
      v-allow="'NewCost.SyncLogin'">同步任务列表</el-button>
    <!-- <el-button class="m-l-10 cus-point" type="primary" @click="commonBtnClick('exportExcelSku')">导入规格参数</el-button> -->
    <el-button class="m-l-10 cus-point" type="primary" size="mini">
      <el-upload action :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="uploadByJsqdExcel"
        :file-list="data.fileList1">
        <span class="wt-cl">导入规格参数</span>
      </el-upload>
    </el-button>
    <el-button class="m-l-10 cus-point" type="primary" @click="commonBtnClick('synChronize')"
      v-if="data.isDisabled == 1">同步成本信息</el-button>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, getCurrentInstance, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'ProductBtnList',
  emits: ['getClickBtnType'],
  setup (props, context) {
    // 生命周期
    onMounted(() => {
      // data.isShow = store.state.user.userInfo.isall
      // 查看权限
      console.log('router -->', route.currentRoute.value)
      // console.log('language id == 1',store.state.user.language.id)
      data.isDisabled = store.state.user.language.id
    })
    // 实例
    let store = useStore()
    const { proxy } = getCurrentInstance()
    let route = useRouter()
    // 变量
    let data = reactive({
      isShow: false,
      fileList: [],
      fileList1: [],
      isDisabled: 1,
      isRefrsh: 1
    })
    //文件校验方法
    const beforeAvatarUpload = (file) => {
      // 通过split方法和fileArr方法获取到文件的后缀名
      let fileArr = file.name.split('.')
      let suffix = fileArr[fileArr.length - 1]
      //只能导入.xls和.xlsx文件
      if (!/(xls|xlsx)/i.test(suffix)) {
        proxy.$message('文件格式不正确')
        return false
      }
      return true
    }
    //文件发生改变就会触发的事件
    const uploadByJsqd = async (file) => {
      const loading = proxy.$loading.service({
        lock: true,
        text: '此操作需要一段时间请耐心等待...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      //判断是否符合beforeAvatarUpload方法中的条件
      if (beforeAvatarUpload(file)) {
        // console.log('file',file)
        data.fileList.name = file.name
        data.fileList.url = ''
        var formdata = new FormData()
        formdata.append('file', file.raw)
        formdata.append('type', 'documents')
        formdata.append('language_id', 1)
        try {
          await proxy.$http.post('v1/product/import', formdata).then(res => {
            if (res.status == 200) {
              proxy.$message({
                message: '导入成功',
                type: 'success'
              })
              context.emit('getClickBtnType', 'import')
              // this.getList() //调用表格方法，刷新页面
            } 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.message + '</br>' + str + '</div>', '导入失败提示', {
                confirmButtonText: '确定',
                customClass: 'msgbox',
                dangerouslyUseHTMLString: true
              })
            }
            loading.close()
          })
        } catch (error) {
          loading.close()
          proxy.$message({
            message: '模板参数有误',
            type: 'error'
          })
        }
      } else {
        loading.close()
      }
    }
    //文件发生改变就会触发的事件
    const uploadByJsqdExcel = (file) => {
      const loading = proxy.$loading.service({
        lock: true,
        text: '此操作需要一段时间请耐心等待...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      //判断是否符合beforeAvatarUpload方法中的条件
      if (beforeAvatarUpload(file)) {
        // console.log('file',file)
        data.fileList1.name = file.name
        data.fileList1.url = ''
        var formdata = new FormData()
        formdata.append('file', file.raw)
        formdata.append('type', 'documents')
        formdata.append('language_id', 1)
        proxy.$http.post('v1/product/spu_import', formdata).then(res => {
          if (res.status == 200) {
            proxy.$message({
              message: '导入成功',
              type: 'success'
            })
            context.emit('getClickBtnType', 'exportExcelSku')
            // this.getList() //调用表格方法，刷新页面
          } 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.message + '</br>' + str + '</div>', '导入失败提示', {
              confirmButtonText: '确定',
              customClass: 'msgbox',
              dangerouslyUseHTMLString: true
            })
          }
          loading.close()
        })
      } else {
        loading.close()
      }
    }
    // 通知父组件 - 点击类型
    const commonBtnClick = (type) => {
      context.emit('getClickBtnType', type)
    }
    // 监听
    watch(() => data.isDisabled, (v1, v2) => {
      // console.log('change value',v1)
      data.isRefrsh = data.isRefrsh + 1
    })
    return {
      data,
      commonBtnClick,
      uploadByJsqd,
      beforeAvatarUpload,
      uploadByJsqdExcel
    }
  }
})
</script>
<style scoped>
.p-l-12 {
  padding-left: 12px;
}
.wt-cl {
  color: #fff;
}
</style>