<template>
  <div class="scan-process h-full">
    <qm-low-form :params="params" :fields="searchFields">
      <template #subjectCode>
        <SelectSubject
          v-model="params.subjectCode"
          :exam-id="userStore.curExam?.id as number"
        ></SelectSubject>
      </template>
    </qm-low-form>
    <a-table :data-source="tableData" :columns="columns" size="middle" bordered>
      <template #summary>
        <a-table-summary-row>
          <a-table-summary-cell>整体进度</a-table-summary-cell>
          <a-table-summary-cell>
            <span class="blue">{{ totals.progress }}</span>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <span class="blue">{{ totals.studentCount }}</span>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <span class="blue">{{ totals.scannedCount }}</span>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <span class="blue">{{ totals.unexistCount }}</span>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <span class="blue">{{ totals.estimation }}</span>
          </a-table-summary-cell>
        </a-table-summary-row>
      </template>
    </a-table>
  </div>
</template>
<script name="ScanProcess" lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { scanProcessData } from "@/ap/scanManage";
import { useUserStore } from "@/store";
import SelectSubject from "@/components/SelectSubject/index.vue";
import type { TableColumnsType } from "@qmth/ui";
const userStore = useUserStore();
const params = reactive({
  subjectCode: "",
});
const tableData = ref([]);
const totals = ref<any>({});
const search = () => {
  scanProcessData({
    examId: userStore.curExam?.id,
    subjectCode: params.subjectCode,
  }).then((res: any) => {
    totals.value = res?.total || {};
    tableData.value = res?.subjects || [];
  });
};
onMounted(() => {
  search();
});
const searchFields = ref([
  {
    prop: "subjectCode",
    type: "select",
    colSpan: 4,
    label: "选择科目",
    cell: "subjectCode",
  },
  {
    type: "buttons",
    colSpan: 5,
    children: [
      {
        text: "查询",
        onClick: () => {
          search();
        },
      },
    ],
  },
]);

const columns: TableColumnsType = [
  {
    title: "科目",
    dataIndex: "subjectName",
  },
  {
    title: "进度",
    dataIndex: "progress",
  },
  {
    title: "考生总数",
    dataIndex: "studentCount",
  },
  {
    title: "已扫描",
    dataIndex: "scannedCount",
  },
  {
    title: "未扫描",
    dataIndex: "unexistCount",
  },
  {
    title: "预计剩余时间",
    dataIndex: "estimation",
  },
];
</script>
<style lang="less" scoped>
.scan-process {
  padding: 20px;
  .blue {
    color: #165dff;
  }
}
</style>
