<template>
    <span>
      <el-button icon="el-icon-download" @click="dialogVisible = true" size="small" plain>导入</el-button>
      <el-dialog title="导入" :visible.sync="dialogVisible" width="30%" :modal-append-to-body="false" append-to-body center>
        <div style="text-align: center;">
          <el-button style="margin-right: 10px;" icon="el-icon-download" size="small" plain @click="download">下载模板</el-button>

          <el-upload
            :show-file-list="false"
            :multiple="false"
            :auto-upload="false"
            :before-upload="beforeUpload"
            :on-success="onSuccess"
            :on-error="onError"
            :disabled="importDisabled"
            :on-change="selectFile"

            style="display: inline-flex;margin-right: 10px;"
            action="/api/common/excel/importExcel">

            <el-button slot="trigger" size="small" type="primary" icon="el-icon-document-add">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" :disabled="!file" :icon="importDataIcon" @click="submitUpload">{{importDataText}}</el-button>
          </el-upload>
          </div>
      </el-dialog>

    </span>
</template>

<script>
  import {exportClientInfoExcel, importExcel} from "./excel-import";
  import {util} from "@/api/util/util";

  export default {
    name: "cy-excel-import",
    data(){
      return {
        dialogVisible: false,
        importDisabled: false,
        importDataText: '导入数据',
        importDataIcon: 'el-icon-upload2',
        file: '',
      }
    },
    props: {
      flag: {
        type: String
      },
      fileName: {
        type: String,
        default: "信息导入表模板"
      }
    },
    mounted() {

    },
    methods: {
      download(){
        exportClientInfoExcel(this.flag).then(res => {
          util.downloadFile(res.data, this.fileName);
        });
      },
      submitUpload(){
        this.beforeUpload();
        importExcel(this.file, this.flag).then(res => {
          this.onSuccess(res);
        });
      },
      selectFile(file, fileList) {
        this.file = file;
      },

// 导入文件失败后回调
      onError() {
        this.$message.success("导入失败！");
      },
// 导入文件成功后回调
      onSuccess(res) {

        // 调用刷新数据的方法
        // this.initEmps();
        // message 弹出消息
        if (res.status == 200){
          // 成功后文本修改为原来的导入数据
          this.importDataText = '导入数据';
          // 图标修改
          this.importDataIcon = 'el-icon-upload2';
          // 将上传组件改为允许使用
          this.importDisabled = false;
          this.$message.success('导入成功！');
          this.dialogVisible = false;
        }else{
          this.$message.error("导入失败！");
        }
        this.$emit("success")
      },
// 上传文件调用
      beforeUpload() {
        // 将文本修改为正在导入
        this.importDataText = '正在导入';
        // 修改其图标
        this.importDataIcon = 'el-icon-loading';
        // 将其上传组件暂时禁用
        this.importDisabled = true;
      }
    }
  }
</script>

<style scoped>

</style>
