<template>
  <div class="part-box">
    <a-space class="part-action" :size="6">
      <a-button type="text" @click="toImport">
        <template #icon>
          <svg-icon name="icon-import" />
        </template>
        导入
      </a-button>
    </a-space>
    <a-table
      class="page-table"
      :columns="columns"
      :data="dataList"
      :pagination="pagination"
      :scroll="{ x: 1200 }"
      :bordered="false"
    >
      <template #status="{ record }">
        <status-tag type="taskStatus" :value="record.status" />
      </template>
      <template #uploadTime="{ record }">
        {{ timestampFilter(record.uploadTime) }}
      </template>
      <template #action="{ record }">
        <a-button type="text" class="btn-danger" @click="toDownload(record)"
          >下载文件</a-button
        >
        <a-button type="text" class="btn-danger" @click="toExportReport(record)"
          >导出报告</a-button
        >
      </template>
    </a-table>

    <!-- ImportDialog -->
    <ImportDialog
      ref="importStudentDialogRef"
      title="导入考生信息"
      upload-url="/api/admin/std/upload"
      :format="['xls', 'xlsx']"
      :download-handle="downloadTemplate"
      download-filename="考生信息导入模板.xlsx"
      :auto-upload="false"
      @upload-success="getList"
    />
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { Message, TableColumnData } from '@arco-design/web-vue';
  import { studentImportListPage, studentInfoTemplate } from '@/api/order';
  import { StudentExportItem } from '@/api/types/order';
  import useTable from '@/hooks/table';
  // import useLoading from '@/hooks/loading';
  import { timestampFilter } from '@/utils/filter';
  import { downloadByApi } from '@/utils/download';

  import ImportDialog from '@/components/import-dialog/index.vue';
  import { useAppStore } from '@/store';

  defineOptions({
    name: 'StudentImport',
  });

  const appStore = useAppStore();
  appStore.setInfo({ breadcrumbs: ['考试预约管理', '考生信息导入'] });

  const searchModel = reactive({
    taskId: '',
    teachingId: '',
    agentId: '',
    name: '',
    identityNumber: '',
    studentCode: '',
  });

  const columns: TableColumnData[] = [
    {
      title: '任务名称',
      dataIndex: 'name',
    },
    {
      title: '文件名',
      dataIndex: 'fileName',
    },
    {
      title: '状态',
      slotName: 'status',
      width: 100,
    },
    {
      title: '异常',
      dataIndex: 'message',
    },
    {
      title: '上传时间',
      slotName: 'uploadTime',
      width: 170,
    },
    // {
    //   title: '操作',
    //   slotName: 'action',
    //   width: 160,
    //   fixed: 'right',
    //   cellClass: 'action-column',
    // },
  ];
  const { dataList, pagination, getList } = useTable<StudentExportItem>(
    studentImportListPage,
    searchModel,
    true
  );

  async function downloadTemplate() {
    const res = await downloadByApi(() => studentInfoTemplate()).catch((e) => {
      Message.error(e || '下载失败，请重新尝试！');
    });
    if (!res) return;
    Message.success('下载成功！');
  }

  // table action
  // 导入
  const importStudentDialogRef = ref();
  function toImport() {
    importStudentDialogRef.value?.open();
  }

  // 下载文件
  function toDownload(row: StudentExportItem) {
    console.log(row);
  }
  // 导出报告
  function toExportReport(row: StudentExportItem) {
    console.log(row);
  }
</script>
