<template>
  <div class="batch-import-com">
    <!-- 导入弹窗 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.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">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!--导入结果-->
    <el-dialog title="导入结果" :visible.sync="upload.showResult" width="500px" class="batch-import-upload-dialog-container"
      custom-class="batch-import-upload-dialog" @close="importResultClose">
      <div class="batch-import-upload-inner">
        <div class="result-count">
          <span class="success">导入成功：</span>
          <span>{{uploadResult.successCount}} 条</span>
        </div>
        <div class="result-count">
          <span class="error">导入失败：</span>
          <span>{{uploadResult.errorCount}} 条</span>
        </div>
        <el-table :data="uploadResult.errorMsg" border stripe v-if="uploadResult.errorMsg.length" class="error-msg-list-table">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="导入失败原因">
            <template slot-scope="scope">
              <span>{{scope.row}}</span>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "batchImportCom",
  props: {
    uploadOptions: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    "uploadOptions": {
      handler(newValue, oldValue) {
        this.upload = newValue;
      },
      deep: true
    }
  },
  data() {
    return {
      // 导入参数
      upload: this.uploadOptions,
      // 导入结果
      uploadResult: {
        successCount: 0,
        errorCount: 0,
        errorMsg: []
      }

    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      if (response.code == 200) {
        this.$message.success('上传成功!');
        if (response.data) {
          this.uploadResult.successCount = response.data.sucessCount;
          this.uploadResult.errorCount = response.data.errorCount;
          response.data.errorMsg ? this.uploadResult.errorMsg = response.data.errorMsg : null;
          this.upload.showResult = true;
        }
      } else {
        this.$message.success(`上传失败,${response.msg ? response.msg : "请根据模板正确填写表格内容!"}`);
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 下载模板操作 */
    importTemplate() {
      let a = document.createElement("a");
      a.setAttribute("href", this.upload.fileTemplateUrl);
      a.setAttribute("download", `${this.upload.fileName}_${new Date().getTime()}.xlsx`);
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    importResultClose() {
      this.upload.showResult = false;
      this.uploadResult = this.$options.data.call(this).uploadResult;
    },
  },
}
</script>
<style lang="scss" scoped>
.batch-import-com {
  ::v-deep.batch-import-upload-dialog-container {
    .batch-import-upload-dialog {
      width: 100%;
      max-height: 85%;
      overflow: auto;

      .el-dialog__header {
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 99;
      }
      .batch-import-upload-inner {
        width: 100%;
        display: flex;
        flex-direction: column;

        .result-count {
          line-height: 32px;

          .success {
            color: #67c23a;
          }

          .error {
            color: #f56c6c;
          }
        }

        .error-msg-list-table {
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
