<template>
  <el-dialog
    :visible="dialogVisible"
    width="50%"
    style="height: 98%"
    :before-close="handleClose"
    top="5vh"
    lock-scroll
  >
    <div class="title" slot="title">
      <div class="divider"></div>
      <div class="label">
        <span style="margin-right: 10px">批量上传文物</span>
        <el-button
          type="text"
          icon="el-icon-download"
          @click="handleDownloadTemplate"
          style="padding: 0"
          >下载模板文件</el-button
        >
      </div>
    </div>
    <div class="dialog-content">
      <el-upload
        class="upload-area"
        drag
        action="#"
        accept=".zip"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handleChange"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传.zip文件</div>
      </el-upload>
      <div class="upload-progress" v-if="isUpLoading">
        <div class="subtitle">
          <div class="divider"></div>
          <div class="label">上传进度</div>
        </div>
        <el-progress :percentage="percentState" :status="uploadStatus"></el-progress>
      </div>
      <div class="upload-records">
        <div class="subtitle">
          <div class="divider"></div>
          <div class="label">上传记录</div>
        </div>
        <TablePage :data="list.records" :tableTitle="tableTitle" />
      </div>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import TablePage from "@/components/Table/TablePage";
import { getImportListPage } from "@/api/culturalRelic";
import { importZip } from "@/utils/file";
export default {
  name: "MultiUploadDialog",
  components: {
    TablePage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // visible(value) {
    //   this.dialogVisible = value;
    // },
    visible: {
      handler: function (value) {
        this.dialogVisible = value;
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      isUpLoading: false,
      percentState: 0,
      uploadStatus:'primary',
      list: {
        records: [],
        current: 1,
        size: 10,
      },
      tableTitle: [
        {
          prop: "createTime",
          label: "导入时间",
          columnAlign: "center",
        },
        {
          prop: "batchNum",
          label: "导入批次",
          columnAlign: "center",
        },
        {
          prop: "fileName",
          label: "文件名称",
          columnAlign: "center",
        },
        {
          prop: "fileSize",
          label: "文件大小",
          columnAlign: "center",
        },
        {
          prop: "remark",
          label: "备注",
          columnAlign: "center",
        },
      ],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    // 取消编辑
    cancelForm() {
      this.$emit("handleClose");
    },
    async loadData() {
      const params = {
        limit: this.list.size,
        page: this.list.current,
      };
      let res = await getImportListPage(params);
      this.list = res.data;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.$emit("handleClose");
        })
        .catch((_) => {});
    },

    handleDownloadTemplate() {
      let a = document.createElement("a");
      a.href = "./static/upload_cr_template.zip";
      a.download = "批量上传文物模板.zip";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    async handleChange(file, fileList) {
      console.log("handleChange", file, fileList);
      if (file.status == "ready") {
        this.isUpLoading = true;
        // TODO:
        let formData = new FormData();
        formData.append("type", "biz_cultural_relic");
        formData.append("zipFile", file.raw);
        let res = await importZip(formData, this.updateProgress);
        if (res.code == 0) {
          this.$message.success("上传成功！");
        //   this.isUpLoading = false;
        } else {
          this.$message.error(res.msg);
        }
      }
    },

    updateProgress(e) {
      //e为回调回来的参数 通过进行和total的值来进行进度
      this.percentState = parseInt((e.loaded / e.total) * 100);
      if (this.percentState == 100) {
        // this.$message.success("上传成功！");
        // this.isUpLoading = false;
        this.uploadStatus = 'success'
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.title {
  .label {
    font-weight: bold;
  }
}
.subtitle {
  display: flex;
  margin-bottom: 16px;
  .divider {
    width: 8px;
    border-left: 4px solid #409eff;
    margin-right: 8px;
  }
  .label {
    font-weight: bold;
  }
}
.dialog-content {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  .upload-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 30px;
  }
  .upload-progress {
    margin-bottom: 30px;
  }
  .upload-records {
    margin-bottom: 30px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}

.el-dialog__body {
  padding: 0 20px 30px 20px;
}
</style>