<template>
  <el-dialog :title="title" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="400px" @close="closeDialog">
    <el-upload ref="upload" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?ydtData=' + ydtData" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">
        <el-link type="info" style="font-size: 12px" @click="importTemplate">下载模板</el-link>
      </div>
      <div slot="tip" class="el-upload__tip" style="color: red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { importTemplate } from '@/api/zs/clue';
import { importData } from '@/api/tool/common';
import { getToken } from '@/utils/auth'

export default {
  name: 'UploadDialog',
  data() {
    return {
      visible: false,
      canSubmit: true,
      isUploading: true,
      ydtData: false,
      title: '学员信息导入',
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/zs/clue/importData',
      },
    };
  },
  methods: {
    init(info = false) {
      this.visible = true;
      this.ydtData = false;
      this.$nextTick(() => {
        if (info) {
          this.ydtData = info;
          this.title = "一点通-" + this.title;
        }
      });
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('zs/clue/importTemplate?ydtData=' + this.ydtData, {}, `clue_template_${new Date().getTime()}.xlsx`);
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.visible = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
        dangerouslyUseHTMLString: true
      });
      this.$emit('update:dialog.batchUpdateVisible', false);
      this.$emit('refreshDataList');
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    closeDialog() {
      this.$emit('update:dialog.batchUpdateVisible', false);
    },

  }
};
</script>
    