<template>
  <a-modal
    v-model:visible="visible"
    :width="500"
    title-align="start"
    top="10vh"
    :align-center="false"
    :mask-closable="false"
    :esc-to-close="false"
    @before-open="modalBeforeOpen"
  >
    <template #title> 导出签到表 </template>
    <a-form ref="formRef" :model="formData" :rules="rules" auto-label-width>
      <a-form-item field="teachingId" label="教学点">
        <SelectTeaching
          v-model="formData.teachingId"
          placeholder="请选择"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="考点">
        <SelectAgent
          v-model="formData.agentId"
          placeholder="请选择"
          allow-clear
          :teaching-id="formData.teachingId"
        />
      </a-form-item>
      <a-form-item field="examDate" label="考试日期">
        <a-select
          v-model="formData.examDate"
          placeholder="请选择"
          :allow-clear="false"
          :options="optionList"
          allow-search
          popup-container="body"
        >
        </a-select>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="close">取消</a-button>
      <a-button type="primary" :disabled="loading" @click="confirm"
        >确认</a-button
      >
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { nextTick, reactive, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import type { FormInstance } from '@arco-design/web-vue/es/form';
  import { orderRecordPrintTimeListPage, orderRecordPrint } from '@/api/order';
  import useLoading from '@/hooks/loading';
  import useModal from '@/hooks/modal';
  import { formatDate, objAssign, objModifyAssign } from '@/utils/utils';
  import { OrderRecordPrintParam } from '@/api/types/order';
  import { FormRules, Options } from '@/types/global';
  import { downloadByApi } from '@/utils/download';

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

  /* modal */
  const { visible, open, close } = useModal();
  defineExpose({ open, close });

  const defaultFormData = {
    examDate: undefined,
    teachingId: null,
    agentId: null,
  };

  const formRef = ref<FormInstance>();
  const formData = reactive<OrderRecordPrintParam>({ ...defaultFormData });
  const rules: FormRules<keyof OrderRecordPrintParam> = {
    teachingId: [
      {
        required: true,
        message: '请选择教学点',
      },
    ],
    examDate: [
      {
        required: true,
        message: '请选择打印日期',
      },
    ],
  };

  const optionList = ref<Options[]>([]);
  async function getTimes() {
    if (optionList.value.length) return;

    const res = await orderRecordPrintTimeListPage();
    optionList.value = (res || []).map((item) => {
      return {
        value: item.examDate,
        label: formatDate('YYYY-MM-DD', new Date(item.examDate)),
      };
    });
  }

  /* confirm */
  const { loading, setLoading } = useLoading();
  async function confirm() {
    const err = await formRef.value?.validate();
    if (err) return;

    setLoading(true);
    const datas = objAssign(formData, {});
    const res = await downloadByApi(() => orderRecordPrint(datas)).catch(
      (e) => {
        Message.error(e || '下载失败，请重新尝试！');
      }
    );
    setLoading(false);
    if (!res) return;
    Message.success('操作成功，开始下载！');
    close();
  }
  /* init modal */
  function modalBeforeOpen() {
    getTimes();

    objModifyAssign(formData, defaultFormData);
    nextTick(() => {
      formRef.value?.clearValidate();
    });
  }
</script>
