<template>
  <div class="m-b-16px">
    <qm-button type="primary" :icon="h(SettingOutlined)"
      >设置扫描点代码</qm-button
    >
    <a-tag v-if="scanSiteCode" class="m-l-12px" color="blue"
      >扫描点代码：{{ scanSiteCode }}</a-tag
    >
  </div>
  <a-table
    :columns="columns"
    :row-key="(record) => record.subjectCode"
    :data-source="dataList"
    :pagination="false"
    :loading="loading"
    bordered
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operation'">
        <qm-button type="text" @click="onExportAnswer(record)"
          >导出扫描答案DBF</qm-button
        >
        <qm-button type="text" @click="onExportPackage(record)"
          >导出打包DBF</qm-button
        >
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from "vue";
import { SettingOutlined } from "@ant-design/icons-vue";
import type { TableProps } from "ant-design-vue";
import { SubjectItem } from "@/ap/types/base";

import { subjectList } from "@/ap/base";
import { markSiteCodeInfo } from "@/ap/resultExport";

defineOptions({
  name: "DbfExport",
});

const loading = ref(false);
const dataList = ref<SubjectItem[]>([]);

const columns: TableProps["columns"] = [
  {
    title: "科目代码",
    dataIndex: "subjectCode",
  },
  {
    title: "科目名称",
    dataIndex: "subjectName",
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: "180px",
  },
];

const scanSiteCode = ref("");
async function getScanSiteCode() {
  const res = await markSiteCodeInfo();
  scanSiteCode.value = res.scanSite;
}

async function getData() {
  const res = await subjectList();
  dataList.value = res || [];
}

async function onExportAnswer(record: SubjectItem) {
  console.log(record);
}

async function onExportPackage(record: SubjectItem) {
  console.log(record);
}

onMounted(() => {
  // getScanSiteCode()
  // getData()
});
</script>
