<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="550px"
      center
      append-to-body
      @open="handleDialogOpen"
      @close="handleDialogClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="import-dialog-wrapper"
    >
      <div v-show="isUploading" class="import-loading-overlay">
        <i class="el-icon-loading"></i>
        <p>正在导入中,请稍候...</p>
      </div>

      <el-form label-position="top" size="medium">
        <el-form-item label="导入说明">
          <div class="scene-tips">
            <p v-for="item in sceneTips" :key="item">{{ item }}</p>
          </div>
        </el-form-item>

        <el-form-item label="选择文件">
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="headers"
            :action="uploadUrl"
            :disabled="isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :on-error="handleFileError"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">
              仅支持 .xls 和 .xlsx 格式,文件大小不超过 10MB
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-link type="primary" :underline="false" @click="handleDownloadTemplate">
            <i class="el-icon-download"></i>
            下载导入模板
          </el-link>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          icon="el-icon-upload2"
          :loading="isUploading"
          :disabled="!isFileSelected"
          @click="handleSubmit"
        >
          {{ isUploading ? '导入中...' : '开始导入' }}
        </el-button>
        <el-button :disabled="isUploading" icon="el-icon-close" @click="handleCancel">
          取 消
        </el-button>
      </div>
    </el-dialog>

    <import-result-dialog
      :visible.sync="importResultVisible"
      :content="importResultContent"
      title="导入结果"
      @close="handleImportResultClose"
    />
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  getEnterpriseRelationImportStatus,
  getPersonImportStatus
} from "@/api/ccdiIntermediary";
import ImportResultDialog from "@/components/ImportResultDialog.vue";

const PERSON_SCENE = "person";
const ENTERPRISE_RELATION_SCENE = "enterpriseRelation";

export default {
  name: "ImportDialog",
  components: { ImportResultDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "数据导入"
    },
    scene: {
      type: String,
      default: PERSON_SCENE
    }
  },
  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      isUploading: false,
      isFileSelected: false,
      importResultVisible: false,
      importResultContent: "",
      pollingTimer: null,
      currentTaskId: null
    };
  },
  computed: {
    sceneConfig() {
      if (this.scene === ENTERPRISE_RELATION_SCENE) {
        return {
          uploadPath: "/ccdi/intermediary/importEnterpriseRelationData",
          templatePath: "ccdi/intermediary/importEnterpriseRelationTemplate",
          templateName: "中介实体关联关系导入模板",
          statusApi: getEnterpriseRelationImportStatus,
          tips: [
            "只导入中介与机构关系；",
            "统一社会信用代码必须已存在于系统机构表。"
          ]
        };
      }
      return {
        uploadPath: "/ccdi/intermediary/importPersonData",
        templatePath: "ccdi/intermediary/importPersonTemplate",
        templateName: "中介信息导入模板",
        statusApi: getPersonImportStatus,
        tips: [
          "personSubType 为字典下拉；",
          "本人行 relatedNumId 为空；",
          "亲属行 relatedNumId 填关联中介本人证件号码。"
        ]
      };
    },
    uploadUrl() {
      const baseUrl = process.env.VUE_APP_BASE_API;
      return `${baseUrl}${this.sceneConfig.uploadPath}`;
    },
    sceneTips() {
      return this.sceneConfig.tips;
    }
  },
  methods: {
    handleDialogOpen() {
      this.isFileSelected = false;
    },
    handleDialogClose() {
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles();
      }
      this.isFileSelected = false;
      this.$emit("close");
    },
    handleCancel() {
      this.$emit("update:visible", false);
    },
    handleDownloadTemplate() {
      this.download(
        this.sceneConfig.templatePath,
        {},
        `${this.sceneConfig.templateName}_${new Date().getTime()}.xlsx`
      );
    },
    handleFileUploadProgress() {
      this.isUploading = true;
    },
    handleFileChange(file, fileList) {
      this.isFileSelected = fileList.length > 0;
    },
    handleFileRemove(file, fileList) {
      this.isFileSelected = fileList.length > 0;
    },
    handleFileSuccess(response) {
      this.isUploading = false;

      if (response.code === 200 && response.data && response.data.taskId) {
        const taskId = response.data.taskId;
        this.currentTaskId = taskId;

        this.$notify({
          title: "导入任务已提交",
          message: "正在后台处理中,处理完成后将通知您",
          type: "info",
          duration: 3000
        });

        this.$emit("task-created", {
          scene: this.scene,
          taskId,
          status: "PROCESSING"
        });
        this.$emit("update:visible", false);
        this.$emit("success", { scene: this.scene, taskId });

        if (this.$refs.upload) {
          this.$refs.upload.clearFiles();
        }

        this.startImportStatusPolling(taskId);
      } else {
        this.$modal.msgError(response.msg || "导入失败");
      }
    },
    handleImportResultClose() {
      this.importResultVisible = false;
      this.importResultContent = "";
    },
    handleFileError() {
      this.isUploading = false;
      this.$modal.msgError("导入失败,请检查文件格式是否正确");
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles();
      }
    },
    handleSubmit() {
      this.$emit("clear-import-history", this.scene);
      this.$refs.upload.submit();
    },
    startImportStatusPolling(taskId) {
      let pollCount = 0;
      const maxPolls = 150;

      this.pollingTimer = setInterval(async () => {
        try {
          pollCount++;
          if (pollCount > maxPolls) {
            clearInterval(this.pollingTimer);
            this.$modal.msgWarning("导入任务处理超时,请联系管理员");
            return;
          }

          const response = await this.sceneConfig.statusApi(taskId);
          if (response.data && response.data.status !== "PROCESSING") {
            clearInterval(this.pollingTimer);
            this.handleImportComplete(response.data);
          }
        } catch (error) {
          clearInterval(this.pollingTimer);
          this.$modal.msgError("查询导入状态失败: " + error.message);
        }
      }, 2000);
    },
    handleImportComplete(statusResult) {
      if (statusResult.status === "SUCCESS") {
        this.$notify({
          title: "导入完成",
          message: `全部成功!共导入${statusResult.totalCount}条数据`,
          type: "success",
          duration: 5000
        });
      } else if (statusResult.failureCount > 0) {
        this.$notify({
          title: "导入完成",
          message: `成功${statusResult.successCount}条,失败${statusResult.failureCount}条`,
          type: "warning",
          duration: 5000
        });
      }

      this.$emit("import-complete", {
        scene: this.scene,
        taskId: statusResult.taskId,
        hasFailures: statusResult.failureCount > 0,
        totalCount: statusResult.totalCount,
        successCount: statusResult.successCount,
        failureCount: statusResult.failureCount
      });
    }
  },
  beforeDestroy() {
    if (this.pollingTimer) {
      clearInterval(this.pollingTimer);
      this.pollingTimer = null;
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-form-item {
    margin-bottom: 22px;
  }

  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100% !important;
      height: 140px;
      box-sizing: border-box;

      .el-icon-upload {
        font-size: 50px;
        color: #409EFF;
        margin: 15px 0 10px;
      }

      .el-upload__text {
        font-size: 14px;
        color: #606266;

        em {
          color: #409EFF;
          font-style: normal;
        }
      }
    }
  }

  .el-upload__tip {
    font-size: 12px;
    color: #909399;
    margin-top: 8px;
    line-height: 1.5;
  }
}

.scene-tips {
  padding: 12px 14px;
  background: #f5f7fa;
  border-radius: 4px;
  color: #606266;
  line-height: 1.7;

  p {
    margin: 0;
  }
}

.dialog-footer {
  text-align: center;
  padding: 5px 0 0;

  .el-button {
    min-width: 110px;
    margin: 0 8px;
  }
}

.import-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;

  .el-icon-loading {
    font-size: 48px;
    color: #409EFF;
    animation: rotating 2s linear infinite;
  }

  p {
    margin-top: 15px;
    font-size: 14px;
    color: #606266;
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
