<script setup lang="ts">
import { ref } from 'vue';
import type { UploadFileInfo } from 'naive-ui';
import { commonExport } from '@/utils/common';
import { useModal } from '../Modal/hooks/useModal';
import BasicModal from '../Modal/basic-modal.vue';
const emit = defineEmits<{ (e: 'submit', file: File): void }>();
const fileList = ref<UploadFileInfo[]>([]);
const props = defineProps<{ url: string; modalText: string; templateText: string }>();
const [registerModalImport, { openModal, setSubLoading, closeModal: closeModalImport }] = useModal({
  title: props.modalText,
  subBtuText: '确定导入'
});
defineExpose({
  openModal,
  setSubLoading,
  closeModal
});
function closeModal() {
  closeModalImport();
  fileList.value = [];
}
function handleSubmitImport() {
  setSubLoading(false);
  if (!fileList.value.length) {
    window.$message?.error('请上传文件');
    return;
  }
  emit('submit', fileList.value[0].file as File);
  setSubLoading(true);
}
function handleDownloadTemplate() {
  if (!props.url) {
    window.$message?.error('请传入下载模版URL');
    return;
  }
  // window.open(`${import.meta.env.VITE_SERVICE_BASE_URL}${props.url}`, '_blank');
  commonExport(`${import.meta.env.VITE_SERVICE_BASE_URL}${props.url}`, '', props.templateText);
  // downloadTemplate();
}
</script>

<template>
  <BasicModal @register="registerModalImport" @ok="handleSubmitImport">
    <div class="p2">
      <NSteps vertical>
        <NStep title="下载模版并填写">
          <div class="text-gray">请按照模版格式填写Excel表格内容，表格数据最多支持1000条</div>
          <NCard class="mt-3">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <icon-file-icons:microsoft-excel class="text-icon"></icon-file-icons:microsoft-excel>
                <div class="ml3 text-gray">{{ templateText }}</div>
              </div>
              <NButton type="primary" @click="handleDownloadTemplate">下载模版</NButton>
            </div>
          </NCard>
        </NStep>
        <NStep title="上传文件并提交系统">
          <div class="mb3 text-gray">提交后系统需要一段时间进行处理，请耐心等候</div>
          <NUpload
            v-model:file-list="fileList"
            multiple
            directory-dnd
            :default-upload="false"
            :max="1"
            accept=".xlsx,.xls,.excel"
          >
            <NUploadDragger>
              <div class="mb3">
                <icon-icon-park-twotone:mail-download
                  class="text-48px text-gray"
                ></icon-icon-park-twotone:mail-download>
              </div>
              <NText>点击或者拖动文件到该区域来上传</NText>
              <NP depth="3">支持.xls,.xlsx,.excel格式的文件</NP>
            </NUploadDragger>
          </NUpload>
        </NStep>
      </NSteps>
    </div>
  </BasicModal>
</template>

<style scoped></style>
