<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :width="'500px'" :footerBtnShow="false"
                 :editModel="editModel" :title="$t('common.importResult')" :form="form" >
      <el-row class="elRowClass" v-for="(tem,index) in componentList" :key="index">
        <el-col :span="12" class="grid-content1">
          <span>{{tem.label}}:</span>
        </el-col>
        <el-col  :span="10" class="grid-content2">
          <span v-text="spanValue(tem)"></span>
        </el-col>
      </el-row>
      <template slot="footer">
        <Json-Excel :fetch="downloadImportCount" :name="fileName" class="excel">
          <el-button type="primary"  size="medium" icon="el-icon-download">
            {{$t('common.downImportResult')}}
          </el-button>
        </Json-Excel>
        <auth-button size="medium" :label="$t('common.close')" @click="dialogVisible = false"></auth-button>
      </template>
    </dialog-edit>
  </div>
</template>

<script>
import { DialogEdit, dymForm, DataTable, authButton } from 'newepoch-components'
import BaseEdit from '@/pages/baseEditPage.js'
import bpoTaskDistributionListApi from '@/api/renwufenpei/bpoTaskDistributionListApi.js'
import * as format from '@/filters/index.js'
import JsonExcel from 'vue-json-excel'
export default {
  extends: new BaseEdit(),
  components: { DataTable, DialogEdit, dymForm, authButton, JsonExcel },
  props: {
    importResultDto: {
      type: Object,
      default: null
    }
  },
  methods: {
    spanValue (tem) {
      var importName = tem.prop
      return this.importResultDto[importName]
    },
    async downloadImportCount () {
      // console.log(this.importResultDto)
      let newList = []
      let newObj = {}
      // 下载成功之后，通过文件的uuid，调用接口，下载list，做成文件
      if (this.importResultDto.importUuid) {
        let impObj = { 'importUuid': this.importResultDto.importUuid }
        await bpoTaskDistributionListApi.bpoSpecialSupplier.supplierImportResult(impObj).then(res => {
          if (res && res.data) {
            if (res.data.length === 0) {
              newObj = {
                // '导入批次号': '',
                '核心企业': '',
                '供应商名称': '',
                '计划管理人/再保理银行': '',
                '导入结果': ''
              }
              newList.push(newObj)
            } else {
              res.data.forEach(item => {
                newObj = {
                  // '导入批次号': item.importUuid,
                  '核心企业': item.coreEnterpriseName,
                  '供应商名称': item.suppliersName,
                  '计划管理人/再保理银行': item.planningManagerName,
                  '导入结果': item.importResult
                }
                newList.push(newObj)
              })
            }
            this.fileName = 'BPO特殊供应商-导入结果' + '-' + format.formatDatetime(new Date())
          } else {
            this.error(this.$i18n.messages[this.$i18n.locale].common.exportFail)
            return []
          }
        })
        return newList
      }
    }
  },
  data () {
    return {
      canDownload: false,
      fileName: '',
      componentList: [
        // 本次导入
        {
          label: this.$i18n.messages[this.$i18n.locale].bpoTask.currentImportCount,
          value: 'currentImportCount',
          disabled: false,
          componentName: 'el-import',
          cols: [8, 8, 8, 8],
          labelWidth: '70px',
          prop: 'currentImportCount'
        },
        // 忽略数
        {
          label: this.$i18n.messages[this.$i18n.locale].bpoTask.ignoreCount,
          value: 'ignoreCount',
          disabled: false,
          componentName: 'el-select',
          cols: [8, 8, 8, 8],
          labelWidth: '50px',
          prop: 'ignoreCount'
        },
        // 失败数
        {
          label: this.$i18n.messages[this.$i18n.locale].bpoTask.failCount,
          value: 'failCount',
          disabled: false,
          componentName: 'el-select',
          cols: [8, 8, 8, 8],
          labelWidth: '50px',
          prop: 'failCount'
        },
        // 成功数
        {
          label: this.$i18n.messages[this.$i18n.locale].bpoTask.successCount,
          value: 'successCount',
          disabled: false,
          componentName: 'el-select',
          cols: [8, 8, 8, 8],
          labelWidth: '50px',
          prop: 'successCount'
        }
      ]
    }
  },
  computed: {}
}
</script>

<style scoped lang="scss" src="@/styles/renwufenpei/importResPop.scss">
</style>
