<template>
  <div class="stu-info h-full">
    <qm-low-form :params="params" :fields="fields" :label-width="80">
      <template #subjectCode>
        <SelectSubject
          v-model="params.subjectCode"
          :exam-id="userStore.curExam?.id as number"
        ></SelectSubject>
      </template>
    </qm-low-form>
    <a-table
      :data-source="dataList"
      :columns="columns"
      size="middle"
      bordered
      :loading="loading"
      :pagination="pagination"
    >
    </a-table>
  </div>
</template>
<script name="StuInfo" lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { useUserStore } from "@/store";
import { useRequest } from "vue-request";
import useTable from "@/hooks/useTable";
import SelectSubject from "@/components/SelectSubject/index.vue";
import { getSiteList, getCampusList, getStuPage } from "@/ap/scanManage";
import type { TableColumnsType } from "@qmth/ui";
const userStore = useUserStore();
//考点下拉
const { data: examSiteOptions, run: runSite } = useRequest(getSiteList);
const { data: examCampusOptions, run: runCampus } = useRequest(getCampusList);
runSite({ examId: userStore.curExam?.id });
runCampus({ examId: userStore.curExam?.id });
const params = reactive({
  subjectCode: "",
  examNumber: "",
  name: "",
  examSite: "",
  campusCode: "",
  packageCode: "",
});
const transParams = computed(() => {
  return { ...params, examId: userStore.curExam?.id };
});
const { dataList, pagination, loading, getList, toPage } = useTable(
  getStuPage,
  transParams,
  true
);
const fields = computed(() => {
  return [
    {
      cell: "subjectCode",
      type: "select",
      colSpan: 3,
      label: "科目",
    },
    {
      prop: "examNumber",
      colSpan: 3,
      label: "准考证号",
      attrs: { allowClear: true },
    },
    {
      prop: "name",
      colSpan: 3,
      label: "姓名",
      attrs: { allowClear: true },
    },
    {
      prop: "examSite",
      type: "select",
      colSpan: 3,
      label: "考点",
      attrs: {
        options: examSiteOptions.value || [],
        fieldNames: { label: "name", value: "code" },
        allowClear: true,
      },
    },
    {
      prop: "campusCode",
      type: "select",
      colSpan: 3,
      label: "校区",
      attrs: {
        options: examCampusOptions.value || [],
        fieldNames: { label: "name", value: "code" },
        allowClear: true,
      },
    },
    {
      prop: "packageCode",
      colSpan: 3,
      label: "卷袋号",
      attrs: { allowClear: true },
    },
    {
      type: "buttons",
      colSpan: 5,
      children: [
        {
          text: "查询",
          onClick: () => {
            toPage(1);
          },
        },
        {
          text: "导出",
          attrs: {
            type: "default",
          },
        },
      ],
    },
  ];
});

const columns: TableColumnsType = [
  {
    title: "科目",
    dataIndex: "subjectCode",
  },
  {
    title: "准考证号",
    dataIndex: "examNumber",
  },
  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "考点",
    dataIndex: "examSiteName",
  },
  {
    title: "校区",
    dataIndex: "campusName",
  },
  {
    title: "考场",
    dataIndex: "examRoom",
  },
  {
    title: "卷袋号",
    dataIndex: "packageCode",
  },
  {
    title: "扫描状态",
    dataIndex: "scanned",
  },
  {
    title: "扫描账号",
    dataIndex: "device",
  },
];
</script>
<style lang="less" scoped>
.stu-info {
  padding: 20px;
}
</style>
