<template>
  <BasicModal
    @register="registerModal"
    width="500px"
    title="导入数据"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <Card style="background-color: rgb(240 240 240)" v-if="statsUpload == 'done'">
      <h2 style="text-align: center">数据导入中...</h2>
      <h5 style="text-align: center">请不要离开此页面</h5>
      <Progress :percent="percentProgress" :showInfo="false" status="active" />
    </Card>
    <Card style="background-color: rgb(240 240 240)" v-else-if="statsUpload == 'success'">
      <h2 style="text-align: center">成功</h2>
      <h2 style="text-align: center"><a @click="goOnImport">继续导入</a></h2>
    </Card>
    <Card style="background-color: rgb(240 240 240)" v-else-if="statsUpload == 'fail'">
      <h2 style="text-align: center">失败</h2>
      <h5 style="text-align: center"><a @click="getExportExcel">下载失败文件</a></h5>
      <div style="text-align: center">
        <span> 失败: {{ importExcelInfo.fail }}</span>
        <span> 成功: {{ importExcelInfo.success }}</span>
        <span> 总数: {{ importExcelInfo.total }}</span>
      </div>
    </Card>
    <Card style="background-color: rgb(240 240 240)" v-else>
      <h2 style="text-align: center">选择需要导入的文件</h2>
      <h5 style="text-align: center"
        >若您是第一次上传文件，可先下载<a @click="downloadFile">文件模板</a>，文件大小不超过5M</h5
      >
      <div class="flex flex-col justify-center">
        <Upload
          class="button-style"
          name="file"
          :beforeUpload="handleBeforeUpload"
          :maxCount="1"
          :action="uploadApi"
          @change="onChange"
        >
          <Button type="primary"> 点击上传 </Button>
        </Upload>
      </div>
      <!-- //v-auth="['dialysis:patientbasic:import']" -->
    </Card>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { Progress } from 'ant-design-vue';
  import { Upload } from 'ant-design-vue';
  import { Button } from '/@/components/Button';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useGlobSetting } from '/@/hooks/setting';
  import { excelSheetDetail, getDownloadUrl } from '/@/api/common/index';
  import { archivesPatientBasicExport } from '/@/api/biz/archives/patientBasicApi';
  const globSetting = useGlobSetting();
  import { listDictModel } from '/@/api/common';
  import { downloadByBase64, downloadByUrl } from '/@/utils/file/download';
  const uploadApi = globSetting.apiUrl + '/archives/patientBasic/import/batch';
  const fileUpload = ref();
  const typeOptions = ref();
  const statsUpload = ref('default');
  const timer = ref(null);
  const exportFileId = ref('');
  const percentProgress = ref(0);
  const importExcelInfo = reactive({
    success: 0,
    fail: 0,
    total: 0,
  });

  onBeforeMount(async () => {
    typeOptions.value = await listDictModel({ dictCode: 'sys_login_log_type' });
    fileUpload.value = '';
  });
  // closeModal
  const [registerModal, { setModalProps }] = useModalInner(async data => {
    console.log('🚀 ~ file: code.vue:21 ~ data:', data);
    setModalProps({ confirmLoading: false });
  });
  async function handleBeforeUpload(file) {
    console.log('file', file);
    fileUpload.value = file;
  }
  async function handleSubmit() {
    console.log('11111');
  }
  function handleCancel() {
    statsUpload.value = 'default';
  }
  function goOnImport() {
    statsUpload.value = 'default';
  }
  async function onChange(file) {
    if (file.file.status === 'done') {
      statsUpload.value = 'done';
      const id = file.file.response.data;
      if (id) {
        timer.value = setInterval(async function () {
          const importStats = await excelSheetDetail(id);
          console.log('importStats', importStats);
          importExcelInfo.fail = importStats.failCount;
          importExcelInfo.success = importStats.successCount;
          importExcelInfo.total = importStats.totalCount;
          // 进度条
          percentProgress.value =
            ((importStats.failCount + importStats.successCount) / importStats.totalCount) * 100;
          console.log('进度条：', percentProgress.value);
          const isFinish =
            importStats.failCount + importStats.successCount == importStats.totalCount;
          if (isFinish) {
            clearInterval(timer.value);
            setTimeout(() => {
              if (importStats.failCount) {
                statsUpload.value = 'fail';
                exportFileId.value = importStats.exportFileId;
                percentProgress.value = 0;
              } else {
                statsUpload.value = 'success';
                percentProgress.value = 0;
              }
            }, 3000);
          }
        }, 1000);
      }
    }
  }

  async function getExportExcel() {
    const res = await getDownloadUrl(exportFileId.value);
    console.log('res', res);
    downloadByUrl({ url: res });
  }
  async function downloadFile() {
    const res = await archivesPatientBasicExport([]);
    downloadByBase64(res.base64, res.fileName + '.xlsx');
  }
  onUnmounted(() => {
    timer.value ? clearInterval(timer.value) : null;
  });
</script>
<style lang="less" scoped>
  .button-style {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
</style>
