<template>
  <div class="part-box is-filter">
    <a-space class="filter-line" :size="12" wrap>
      <SelectTask
        v-model="searchModel.taskId"
        placeholder="请选择"
        allow-clear
        prefix
      />
      <SelectTeaching
        v-model="searchModel.teachingId"
        placeholder="请选择"
        allow-clear
        prefix
      />
      <SelectAgent
        v-model="searchModel.agentId"
        placeholder="请选择"
        allow-clear
        prefix
        :teaching-id="searchModel.teachingId"
      />
      <a-input v-model.trim="searchModel.name" placeholder="请输入" allow-clear>
        <template #prefix>姓名</template>
      </a-input>
      <a-input
        v-model.trim="searchModel.identityNumber"
        placeholder="请输入"
        allow-clear
      >
        <template #prefix>证件号</template>
      </a-input>
      <a-input
        v-model.trim="searchModel.studentCode"
        placeholder="请输入"
        allow-clear
      >
        <template #prefix>学号</template>
      </a-input>

      <a-button type="primary" @click="toPage(1)">查询</a-button>
    </a-space>
  </div>
  <div class="part-box">
    <a-table
      class="page-table"
      :columns="columns"
      :data="dataList"
      :pagination="pagination"
      :scroll="{ x: 1200 }"
      :bordered="false"
    >
      <template #status="{ record }">
        {{ record.cancel ? '已取消' : '正常' }}
      </template>
      <template #action="{ record }">
        <a-button
          v-if="!record.cancel"
          type="text"
          class="btn-danger"
          @click="toCancel(record)"
          >取消</a-button
        >
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { Message, TableColumnData } from '@arco-design/web-vue';
  import { orderRecordCancel, orderRecordListPage } from '@/api/order';
  import { OrderRecordItem } from '@/api/types/order';
  import useTable from '@/hooks/table';
  // import useLoading from '@/hooks/loading';
  import { modalConfirm } from '@/utils/arco';
  import { useAppStore } from '@/store';

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

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

  // const { getLabel: getAbleLabel } = useDictOption('ABLE_TYPE');

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

  const columns: TableColumnData[] = [
    {
      title: '姓名',
      dataIndex: 'name',
      width: 120,
    },
    {
      title: '证件号',
      dataIndex: 'identityNumber',
      width: 200,
    },
    {
      title: '学号',
      dataIndex: 'studentCode',
      width: 160,
    },
    {
      title: '教学点',
      dataIndex: 'teachingName',
      width: 160,
    },
    {
      title: '可约次数',
      dataIndex: 'agentName',
      width: 160,
    },
    {
      title: '操作',
      slotName: 'action',
      width: 80,
      fixed: 'right',
      cellClass: 'action-column',
    },
  ];
  const { dataList, pagination, toPage, getList } = useTable<OrderRecordItem>(
    orderRecordListPage,
    searchModel,
    true
  );

  // table action
  // 取消
  async function toCancel(row: OrderRecordItem) {
    const confirmRes = await modalConfirm(
      '提示',
      `确定要取消【${row.name}】的预约吗?`
    ).catch(() => false);
    if (confirmRes !== 'confirm') return;

    await orderRecordCancel(row.id);
    Message.success('操作成功！');
    getList();
  }
</script>
