<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message, UploadDragger, type UploadFile } from 'ant-design-vue';

import { importMedicalDeviceApi } from '../api';

const gridApi = ref();
const fileList = ref<UploadFile[]>([]);
const selectedFile = ref<File | null>(null);
const isFileSelected = ref(false);

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    selectedFile.value = null;
    isFileSelected.value = false;
    fileList.value = [];
    modalApi.close();
  },
  onConfirm: async () => {
    if (!selectedFile.value) {
      message.warning('请先选择要上传的文件');
      return;
    }

    modalApi.setState({ loading: true, confirmLoading: true });

    try {
      await importMedicalDeviceApi({
        file: selectedFile.value,
      });

      message.success('导入成功');
      gridApi.value?.reload();

      selectedFile.value = null;
      isFileSelected.value = false;
      fileList.value = [];

      modalApi.close();
    } catch {
      message.error('导入失败');
    } finally {
      modalApi.setState({ loading: false, confirmLoading: false });
    }
  },
  onOpenChange(isOpen: boolean) {
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    selectedFile.value = null;
    isFileSelected.value = false;
    fileList.value = [];
  },
});

const handleChange = (info: { file: UploadFile }) => {
  const { file } = info;

  if (file.status === 'removed') {
    selectedFile.value = null;
    isFileSelected.value = false;
    return;
  }

  if (file) {
    selectedFile.value = file;
    isFileSelected.value = true;
    message.success('文件已选择，请点击确认按钮上传');
  }
};
</script>
<template>
  <Modal class="w-[30%]" title="上传Excel">
    <div
      v-if="isFileSelected"
      class="mb-4 rounded border border-green-200 bg-green-50 p-3"
    >
      <p class="text-sm text-green-700">已选择文件：{{ selectedFile?.name }}</p>
      <p class="mt-1 text-xs text-green-600">
        文件已准备就绪，点击确认按钮开始上传
      </p>
    </div>

    <UploadDragger
      v-model:file-list="fileList"
      :before-upload="() => false"
      :max-count="1"
      :on-change="handleChange"
      accept=".xlsx,.xls"
      name="file"
    >
      <p class="flex justify-center">
        <svg
          height="64"
          viewBox="0 0 32 32"
          width="64"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>
            <linearGradient
              id="vscodeIconsFileTypeExcel0"
              gradientTransform="translate(0 2100)"
              gradientUnits="userSpaceOnUse"
              x1="4.494"
              x2="13.832"
              y1="-2092.086"
              y2="-2075.914"
            >
              <stop offset="0" stop-color="#18884f" />
              <stop offset=".5" stop-color="#117e43" />
              <stop offset="1" stop-color="#0b6631" />
            </linearGradient>
          </defs>
          <path
            d="M19.581 15.35L8.512 13.4v14.409A1.19 1.19 0 0 0 9.705 29h19.1A1.19 1.19 0 0 0 30 27.809V22.5Z"
            fill="#185c37"
          />
          <path
            d="M19.581 3H9.705a1.19 1.19 0 0 0-1.193 1.191V9.5L19.581 16l5.861 1.95L30 16V9.5Z"
            fill="#21a366"
          />
          <path d="M8.512 9.5h11.069V16H8.512Z" fill="#107c41" />
          <path
            d="M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 0 0 1.194-1.191V9.391A1.2 1.2 0 0 0 16.434 8.2"
            opacity="0.1"
          />
          <path
            d="M15.783 8.85H8.512V25.1h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
            opacity="0.2"
          />
          <path
            d="M15.783 8.85H8.512V23.8h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
            opacity="0.2"
          />
          <path
            d="M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
            opacity="0.2"
          />
          <path
            d="M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85"
            fill="url(#vscodeIconsFileTypeExcel0)"
          />
          <path
            d="m5.7 19.873l2.511-3.884l-2.3-3.862h1.847L9.013 14.6c.116.234.2.408.238.524h.017q.123-.281.26-.546l1.342-2.447h1.7l-2.359 3.84l2.419 3.905h-1.809l-1.45-2.711A2.4 2.4 0 0 1 9.2 16.8h-.024a1.7 1.7 0 0 1-.168.351l-1.493 2.722Z"
            fill="#fff"
          />
          <path
            d="M28.806 3h-9.225v6.5H30V4.191A1.19 1.19 0 0 0 28.806 3"
            fill="#33c481"
          />
          <path d="M19.581 16H30v6.5H19.581Z" fill="#107c41" />
        </svg>
      </p>
      <p class="ant-upload-text">点击或拖动文件到此区域进行选择</p>
      <p class="ant-upload-hint">
        支持单个上传，xlsx格式文件。选择文件后需要点击确认按钮进行上传。
      </p>
    </UploadDragger>
  </Modal>
</template>








