<template>
  <div class="stu-import">
    <qm-low-form :fields="fields">
      <template #tip>
        <div class="tip">导入参数设置为：考试年度 - 2024；考次 - 1</div>
      </template>
    </qm-low-form>
    <a-table :data-source="tableData" :columns="columns" size="middle" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <qm-button type="link" @click="">导入</qm-button>
          <qm-button type="link" @click="clear(record)">清空</qm-button>
        </template>
      </template>
    </a-table>
    <SetImportParamsDialog
      v-model="showSetParamsDialog"
      v-if="showSetParamsDialog"
    ></SetImportParamsDialog>
  </div>
</template>
<script name="StuImport" lang="ts" setup>
import { ref } from "vue";
import SetImportParamsDialog from "./SetImportParamsDialog.vue";
import type { TableColumnsType } from "@qmth/ui";

const showSetParamsDialog = ref(false);
const fields = ref([
  {
    type: "button",
    text: "设置导入参数",
    attrs: {
      onClick: () => {
        showSetParamsDialog.value = true;
      },
    },
  },
  {
    cell: "tip",
  },
]);
const tableData = ref([{ a: 1, b: 2, c: 3, d: 4, e: 5 }]);
const columns: TableColumnsType = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 100,
    customRender: ({ index }) => `${index + 1}`,
  },
  {
    title: "科目代码",
    dataIndex: "a",
  },
  {
    title: "科目名称",
    dataIndex: "b",
  },
  {
    title: "已导入考生数",
    dataIndex: "c",
  },
  {
    title: "操作",
    key: "operation",
    width: 300,
  },
];
const deleteRow = (row: any) => {
  window.$confirm({
    title: () => "系统通知",
    content: () => "请确认是否立即删除？",
    onOk() {
      //todo 执行删除接口
    },
  });
};
</script>
<style lang="less" scoped>
.stu-import {
  padding: 0 20px 20px 20px;
  .tip {
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    background: #e8f3ff;
    margin-left: 8px;
    padding: 0 12px;
    color: #165dff;
  }
}
</style>
