<template>
  <el-dialog title="批量审核通过" :visible.sync="open" width="400px" append-to-body>
    <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="headers"
        :action="url"
        :disabled="isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip text-center" slot="tip">
        <div class="el-upload__tip" slot="tip">
          <p style="color: red">使用方法</p>
          <p style="color: #00afff">1、数据导出成excel</p>
          <p style="color: #00afff">2、根据excel中的数据进行手工打款</p>
          <p style="color: #00afff">3、将excel中的数据导回系统，即可自动对excel中的数据自动审核通过</p>
          <p style="color: red">删除excel中的数据，可选择性的过滤掉数据不进行审核通过</p>
        </div>
        <span>仅允许导入xls、xlsx格式文件。</span>
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'

export default {
  components: {
  },
  data () {
    return {
      open: false,
      headers: { Authorization: "Bearer " + getToken() },
      isUploading: false,
      url: process.env.VUE_APP_BASE_API + "/cai/accountCash/importAudit",
      buttonLoading: false,
    }
  },
  created() {
  },
  methods: {
    init () {
      this.open = true;
      this.$nextTick(() => {
      })
    },
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handleFileSuccess(response, file, fileList) {
      this.open = false;
      this.isUploading = false;
      this.$refs.upload.clearFiles();
      let resData = response.data
      let message =
          `<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>
             <span>总数据量：`+resData.allNum+`</span> <br/>
             <span style="color: #888a8e">无效数量：`+resData.ignoreNum+`</span> <br/>
             <span style="color: blue">成功数量：`+resData.successNum+`</span> <br/>
             <span style="color: red">失败数量：`+resData.failNum+`</span> <br/>
           </div>
          `
      this.$alert(message, "导入结果", { dangerouslyUseHTMLString: true });
      this.$emit('refreshDataList')
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.isUploading = true;
    },
  }
}
</script>
