<template>
  <div class="">
    <div class="content_box">
      <div class="left">
        <img class="rotate" src="@/assets/images/index/loading.png" alt="" />
        <p>请您耐心等待！如果您发现导入数据问题较多，可以取消导入</p>
        <div>
          <el-button
            style="margin-left: 10px"
            size="small"
            type="primary"
            @click="handelClickBackList"
            >返回任务列表</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            class="diy-button--white"
            plain
            @click="handelClickBack"
            >取消导入</el-button
          >
        </div>
      </div>
      <div class="right">
        <h4>
          <el-icon
            class="el-icon-warning-outline"
            style="color: #0056d6; font-size: 18px; font-weight: 600"
          ></el-icon>
          操作说明
        </h4>
        <p>1、导入数据多大，系统需要一定事件处理。</p>
        <p>
          2、导入过程中可查看导入明细，如果发现导入数据问题较多，可以取消本次导入，重新整理数据后，重新创建任务导入。
        </p>
        <p>3、导入失败的数据，您可以下载失败文件，修改后重新创建任务导入</p>
      </div>
    </div>
    <h3 class="title-small">数据导入明细</h3>
    <el-row type="flex" justify="">
      <el-col :span="24">
        <i class="el-icon-circle-check" style="color: #1cc58c; font-size: 15px;font-weight: 600;"></i>  {{ this.importSuccessNum || "--" }}条数据已导入。<el-button
          type="text"
          @click="handelClickLook('success')"
          >查看</el-button
        >
      </el-col>
    </el-row>
    <el-row type="flex" justify="">
      <el-col :span="24">
        <i class="el-icon-circle-close" style="color: #ff5b5d;font-size: 15px;font-weight: 600;"></i> {{ this.importFailNum || "--" }}条问题数据导入失败。<el-button
          type="text"
          @click="handelClickLook('fail')"
          >查看</el-button
        >
      </el-col>
    </el-row>
    <el-dialog
      title="列表"
      :visible.sync="showTable"
      width="50%"
      v-if="showTable"
    >
      <el-table
        :data="tableData"
        row-key="fileCode"
        border
        style="width: 100%"
      >
        <el-table-column
          v-for="item in tableHeader"
          :key="item.columnName"
          :prop="item.columnName"
          :label="item.label"
          :align="item.align"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ handleFilterSpan(scope.row, item) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageNo"
        :page-size="pageSize"
        :total="total"
        layout=" prev, pager, next"
        @current-change="pageCurrentChangeHandle"
        >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTable = false">取 消</el-button>
        <el-button type="primary" @click="showTable = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
    <script>
import { requestPost, requestGet } from "@/js/dai/request";

export default {
  data() {
    return {
      rules: {
        importCategory: [
          { required: true, message: "请选择任务类型", trigger: "change" },
        ],
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "change" },
        ],
      },
      resident_category_import_list: [],
      taskId: null,
      timerId: null,
      importSuccessNum: null,
      importFailNum: null,
      importCategory: null,
      showTable: false,
      tableHeader: [],
      tableData:[],
      pageNo:1,
      pageSize:20,
      total:0,
      tableType:null,
    };
  },
  props: {
    fileCode: {
      type: String,
      default: "",
    },
    fileCodeP: {
      type: String,
      default: "",
    },
  },
  async created() {
    await this.getTaskInfo();
    await this.startTimer();
  },
  methods: {
    handleFilterSpan(row, item) {
      let _val = "";
      if (item.options && item.options.length > 0) {
        item.options.forEach((n) => {
          if (n.value === row[item.columnName]) _val = n.label;
        });
      }
      return _val || row[item.columnName];
    },
    startTimer() {
      if (!this.timerId) {
        this.timerId = setInterval(this.getProcessRate, 500);
      }
    },
    // 停止定时器
    stopTimer() {
      clearInterval(this.timerId);
      this.timerId = null;
    },
    async getProcessRate() {
      let url = "/actual/base/intelligentImportData/processRate";
      let parm = {
        fileCode: this.fileCode,
      };
      let res = await requestPost(url, parm);
      if (res.code == 0) {
        if (res.data === 100) {
          this.stopTimer();
          this.$emit('successImport')
        }else{
          this.$emit('updateProgress',res.data)
        }
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    async getTaskInfo() {
      let url = "/actual/base/intelligentImportData/getTaskInfo";
      let parm = {
        fileCode: this.fileCodeP || this.fileCode,
      };
      let { data, code, msg } = await requestPost(url, parm);
      if (code == 0) {
        this.taskId = data.taskId;
        this.importFailNum = data.importFailNum.toString();
        this.importSuccessNum = data.importSuccessNum.toString();
        this.importCategory = data.importCategory;
        this.$emit('updateoperatorName',{operatorName:data.operatorName,createdTime:data.createdTime})
        if (data.processStatus != "processing") {
          this.stopTimer();
        }
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    async handelClickLook(type) {
      this.showTable = true;
      this.tableType = type;
      this.pageNo = 1;
      this.getTable()
    },
    async getTable(){
      let url = "/actual/base/excelDataShow/quaryExcelDataList";
      const {pageNo,pageSize,importCategory,tableType} = this;
      let parm = {
        taskId: this.taskId,
        boolranFlag: tableType == "success" ? "1" : "0",
        pageNo,
        pageSize,
        fileCategory:importCategory,
      };
      let { data, code, msg } = await requestPost(url, parm);
      if (code == 0) {
        this.showTable = true;
        this.tableHeader = Object.entries(data.columnsDict).map((item) => ({
          label: item[0],
          columnName: item[1],
        })); //属性名和属性值
        this.tableData = data.excelDataShowDTOList.list;
        this.total = data.excelDataShowDTOList.total;
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },

    async cancelTask() {
      let url = "/actual/base/intelligentImportData/cancelTask";
      let parm = {
        fileCode: this.fileCode,
        taskId: this.taskId,
      };
      let { data, code, msg } = await requestPost(url, parm);
      if (code == 0) {
        console.log(data);
        this.$message.info("任务已取消");
        this.$emit("handelClickBack");
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    handelClickBack() {
      this.$confirm(`您确定要取消本次数据导入任务吗`, {
        confirmButtonText: "确定",
        cancelButtonText: "再想想",
        type: "warning",
      })
        .then(() => {
          this.cancelTask();
        })
        .catch(() => {});
    },

    handelClickBackList() {
      this.$emit("handelClickBack");
    },
  },
  destroyed() {
    this.stopTimer();
  },
  components: {},
  computed: {},
  watch: {},
};
</script>
    <style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";
@import "@/assets/scss/modules/management/detail-main.scss";
@import "@/assets/scss/pages/smartImport.scss";
.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #838383;
}
</style>
    