<template>
  <div class="part-box is-filter">
    <el-form inline>
      <el-form-item label="准考证号">
        <el-input
          v-model="searchModel.examNo"
          placeholder="请输入准考证号"
          clearable
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item label="学号">
        <el-input
          v-model="searchModel.studentNo"
          placeholder="请输入学号"
          clearable
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item label="科目">
        <select-subject v-model="searchModel.subject"></select-subject>
      </el-form-item>
      <el-form-item label="层次">
        <el-select
          v-model="searchModel.filterType"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="请选择" value="" />
          <!-- TODO: 添加层次选项 -->
        </el-select>
      </el-form-item>
      <el-form-item label="专业类型">
        <el-select
          v-model="searchModel.college"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="请选择" value="" />
          <!-- TODO: 添加专业类型选项 -->
        </el-select>
      </el-form-item>
      <el-form-item label="是否缺考">
        <el-select
          v-model="searchModel.isAbsent"
          placeholder="请选择"
          clearable
          style="width: 100px"
        >
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否上传">
        <el-select
          v-model="searchModel.isUpload"
          placeholder="请选择"
          clearable
          style="width: 100px"
        >
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否违纪">
        <el-select
          v-model="searchModel.isDisciplinary"
          placeholder="请选择"
          clearable
          style="width: 100px"
        >
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="总分">
        <el-input-number
          v-model="searchModel.startScore"
          placeholder="最低分"
          style="width: 100px"
          :min="0"
          :max="999"
          :step="0.1"
          :precision="1"
          :controls="false"
          step-strictly
        />
        <span style="margin: 0 8px">-</span>
        <el-input-number
          v-model="searchModel.endScore"
          placeholder="最高分"
          style="width: 100px"
          :min="0"
          :max="999"
          :step="0.1"
          :precision="1"
          :controls="false"
          step-strictly
        />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input
          v-model="searchModel.name"
          placeholder="请输入姓名"
          clearable
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="学院">
        <el-input
          v-model="searchModel.college"
          placeholder="请输入学院"
          clearable
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="班级">
        <el-input
          v-model="searchModel.className"
          placeholder="请输入班级"
          clearable
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="任课老师">
        <el-input
          v-model="searchModel.teacher"
          placeholder="请输入任课老师"
          clearable
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="考点">
        <el-input
          v-model="searchModel.examSite"
          placeholder="请输入考点"
          clearable
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="考场">
        <el-input
          v-model="searchModel.examRoom"
          placeholder="请输入考场"
          clearable
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item>
        <el-space wrap>
          <el-button type="primary" @click="toPage(1)">查询</el-button>
          <el-button @click="exportData">导出</el-button>
        </el-space>
      </el-form-item>
    </el-form>
  </div>
  <div class="part-box">
    <el-table
      class="page-table"
      :data="dataList"
      :loading="loading"
      border
      stripe
      @sort-change="handleSortChange"
    >
      <el-table-column property="examNo" label="准考证号" width="120" />
      <el-table-column property="name" label="姓名" min-width="100" />
      <el-table-column property="studentNo" label="学号" width="120" sortable />
      <el-table-column property="subject" label="科目" min-width="200" />
      <el-table-column property="level" label="层次" min-width="100" />
      <el-table-column property="majorType" label="专业类型" width="100" />
      <el-table-column
        property="objectiveScore"
        label="客观总分"
        width="110"
        sortable
      />
      <el-table-column
        property="subjectiveScore"
        label="主观总分"
        width="110"
        sortable
      />
      <el-table-column
        property="totalScore"
        label="全卷总分"
        min-width="110"
        sortable
      />
      <el-table-column label="是否缺考" width="110" sortable>
        <template #default="scope">
          <el-tag :type="scope.row.isAbsent ? 'danger' : 'success'">
            {{ scope.row.isAbsent ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否上传" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.isUpload ? 'success' : 'warning'">
            {{ scope.row.isUpload ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否违纪" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.isDisciplinary ? 'danger' : 'success'">
            {{ scope.row.isDisciplinary ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        property="college"
        label="学院"
        min-width="100"
        sortable
      />
      <el-table-column property="className" label="班级" min-width="100" />
      <el-table-column property="teacher" label="任课老师" min-width="100" />
      <el-table-column
        property="examSite"
        label="考点"
        min-width="100"
        sortable
      />
      <el-table-column property="examRoom" label="考场" min-width="100" />
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            link
            size="small"
            @click="viewDetail(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :layout="pagination.layout"
      :total="pagination.total"
      @size-change="pageSizeChange"
      @current-change="toPage"
    />
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { getScoreList } from '@/api/score';
  import { ScoreItem, ScoreListFilter } from '@/api/types/score';
  import useTable from '@/hooks/table';

  defineOptions({
    name: 'ScoreQuery',
  });

  const searchModel = reactive<ScoreListFilter>({
    name: '',
    examNo: '',
    studentNo: '',
    subject: null,
    filterType: '',
    isAbsent: null,
    isUpload: null,
    isDisciplinary: null,
    startScore: undefined,
    endScore: undefined,
    college: '',
    className: '',
    teacher: '',
    examSite: '',
    examRoom: '',
  });

  const { dataList, pagination, loading, toPage, pageSizeChange } =
    useTable<ScoreItem>(getScoreList, searchModel, false);

  function exportData() {
    // TODO: 实现导出功能
    console.log('导出成绩数据');
  }

  function viewDetail(row: ScoreItem) {
    // TODO: 实现查看详情功能
    console.log('查看成绩详情', row);
  }
</script>
