<template>
  <div class="outside">
    <div class="title">学生查询</div>
    <div class="queryContent">
      <a-form :model="search" layout="inline" ref="formRef" class="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="search.name" placeholder="请输入学生姓名" />
        </a-form-item>
        <a-form-item label="学号" name="id">
          <a-input v-model:value="search.id" placeholder="请输入学生学号" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="handleClear">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="infoContent" v-if="isShow">
      <a-row>
        <a-col :span="6">
          <span>学生姓名：{{ tableData[tableData.length - 1]?.name }}</span>
        </a-col>
        <a-col :span="6">
          <span>学生学号：{{ tableData[tableData.length - 1]?.id }}</span>
        </a-col>
        <a-col :span="6">
          <span>所在学院：{{ tableData[tableData.length - 1]?.college }}</span>
        </a-col>
        <a-col :span="6">
          <span>所属专业：{{ tableData[tableData.length - 1]?.majorname }}</span>
        </a-col>
      </a-row>
    </div>
    <div class="tableContent" v-if="isShow">
      <a-table :dataSource="tableData" :columns="tableLabel" bordered :loading="loadding" size="middle" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defHttp } from '/@/utils/http/axios';
import { reactive, ref } from 'vue';
import type { UnwrapRef } from 'vue';
import { message } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
interface FormState {
  name: string;
  id: string;
}

const search: UnwrapRef<FormState> = reactive({
  name: '',
  id: '',
});
const isShow = ref(false);
const loadding = ref(false);
const tableData = ref([]);
const tableLabel = ref([
  {
    title: '考试批次',
    dataIndex: 'batch',
    align: 'center',
    key: 'batch',
  },
  {
    title: '总分',
    dataIndex: 'result',
    align: 'center',
    key: 'result',
  },
  {
    title: '听力',
    align: 'center',
    dataIndex: 'listen',
    key: 'listen',
  },
  {
    title: '阅读',
    dataIndex: 'reading',
    align: 'center',
    key: 'reading',
  },
  {
    title: '写作',
    dataIndex: 'writing',
    align: 'center',
    key: 'writing',
  },
]);
const rules: Record<string, Rule[]> = {
  name: [
    { required: true, message: '请输入学生姓名', trigger: 'change' },
    { required: true, message: '请输入学生姓名', trigger: 'blur' },
  ],
  id: [
    { required: true, message: '请输入学生学号', trigger: 'change' },
    { required: true, message: '请输入学生学号', trigger: 'blur' },
  ],
};
const url = ref({
  getData: 'cet/getData',
});
const formRef = ref();
const handleSearch = () => {
  formRef.value.validate().then(async () => {
    tableData.value = await defHttp.post({
      url: url.value.getData,
      params: search,
    });
    console.log(1231);
    if (tableData.value.length > 0) {
      isShow.value = true;
    } else {
      isShow.value = false;
      message.warn('未查询到相关信息');
    }
  });
};
const handleClear = () => {
  search.name = '';
  search.id = '';
};
</script>
<style lang="less" scoped>
.outside {
  // 白色
  background-color: #fff;
  height: 100%;
  .title {
    font-size: 20px;
    color: #333;
    padding: 20px 20px 0 20px;
  }
  .form {
    padding-top: 20px;
  }
  .tableContent {
    padding: 20px;
  }
  .infoContent {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
  }
}
</style>