<template>
  <div class="part-box is-filter">
    <el-form inline>
      <el-form-item label="姓名">
        <el-input
          v-model.trim="searchModel.name"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="准考证号">
        <el-input
          v-model.trim="searchModel.examNo"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="密号">
        <el-input
          v-model.trim="searchModel.secretNo"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input
          v-model.trim="searchModel.studentNo"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </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.level"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="请选择" value="" />
          <el-option label="不限" value="不限" />
        </el-select>
      </el-form-item>
      <el-form-item label="专业类型">
        <el-select
          v-model="searchModel.majorType"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="请选择" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-space>
          <el-select
            v-model="searchModel.status"
            placeholder="请选择"
            clearable
            style="width: 120px"
          >
            <el-option label="不限" value="" />
          </el-select>
          <el-select placeholder="不限" clearable style="width: 120px">
            <el-option label="不限" value="" />
          </el-select>
          <el-select placeholder="不限" clearable style="width: 120px">
            <el-option label="不限" value="" />
          </el-select>
          <el-select placeholder="不限" clearable style="width: 120px">
            <el-option label="不限" value="" />
          </el-select>
        </el-space>
      </el-form-item>
      <el-form-item label="签到表编号">
        <el-input
          v-model.trim="searchModel.signBookNo"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="批次编号">
        <el-input
          v-model.trim="searchModel.batchNo"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="学院">
        <el-select
          v-model="searchModel.college"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="请选择" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-select
          v-model="searchModel.className"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="请选择" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="任课老师">
        <el-input
          v-model.trim="searchModel.teacher"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="考点">
        <el-input
          v-model.trim="searchModel.examSite"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="考场">
        <el-input
          v-model.trim="searchModel.examRoom"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="扫描张数">
        <el-input-number
          v-model.number="searchModel.scanPages"
          :min="1"
          :max="20"
          :step="1"
          :precision="0"
          :controls="false"
          step-strictly
          style="width: 100px"
        >
        </el-input-number>
      </el-form-item>
    </el-form>
    <el-divider class="form-divider" />
    <div class="part-action box-justify">
      <el-space wrap>
        <el-button type="primary" @click="toPage(1)">查询</el-button>
        <el-button @click="onAdd">添加</el-button>
        <el-button type="success" @click="onImport">导入</el-button>
        <el-dropdown @command="onImportCommand">
          <el-button type="primary">
            导入
            <el-icon class="el-icon--right"><ArrowDown /> </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="breaking">违纪名单</el-dropdown-item>
              <el-dropdown-item command="miss">缺考名单</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button @click="exportData">导入名单</el-button>
      </el-space>

      <table-field v-model="headFields" :fields="tableFields"></table-field>
    </div>
  </div>
  <div class="part-box">
    <el-table
      class="page-table"
      :data="dataList"
      :loading="loading"
      border
      stripe
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column
        v-if="checkFieldVisible('examNo')"
        property="examNo"
        label="准考证号"
        width="120"
      />
      <el-table-column
        v-if="checkFieldVisible('secretNo')"
        property="secretNo"
        label="密号"
        min-width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('name')"
        property="name"
        label="姓名"
        min-width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('studentNo')"
        property="studentNo"
        label="学号"
        width="120"
      />
      <el-table-column
        v-if="checkFieldVisible('subject')"
        property="subject"
        label="科目"
        min-width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('examType')"
        property="examType"
        label="试卷类型"
        width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('level')"
        property="level"
        label="层次"
        width="80"
      />
      <el-table-column
        v-if="checkFieldVisible('majorType')"
        property="majorType"
        label="专业类型"
        width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('scanRecognition')"
        label="扫描识别"
        width="100"
      >
        <template #default="scope">
          <el-tag :type="scope.row.scanRecognition ? 'success' : 'danger'">
            {{ scope.row.scanRecognition ? '是' : '否' }}
          </el-tag>
          <el-button
            v-if="scope.row.sheetUrls.length > 0"
            link
            style="margin-left: 5px"
            @click="onPreviewImg(scope.row)"
          >
            原图
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkFieldVisible('scanPages')"
        property="scanPages"
        label="扫描张数"
        width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('manualAssign')"
        label="人工指定"
        width="100"
      >
        <template #default="scope">
          <el-tag :type="scope.row.manualAssign ? 'success' : 'danger'">
            {{ scope.row.manualAssign ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkFieldVisible('batchNo')"
        property="batchNo"
        label="批次编号"
        width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('signBookNo')"
        property="signBookNo"
        label="签到表编号"
        width="120"
      />
      <el-table-column
        v-if="checkFieldVisible('college')"
        property="college"
        label="学院"
        width="120"
      />
      <el-table-column
        v-if="checkFieldVisible('className')"
        property="className"
        label="班级"
        width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('teacher')"
        property="teacher"
        label="任课老师"
        width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('examSite')"
        property="examSite"
        label="考点"
        width="100"
      />
      <el-table-column
        v-if="checkFieldVisible('examRoom')"
        property="examRoom"
        label="考场"
        width="80"
      />
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="scope">
          <el-button size="small" link @click="onEdit(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>

  <!-- 新增/编辑学生弹窗 -->
  <ModifyStudent
    ref="modifyStudentRef"
    :row-data="curRow"
    @modified="getList"
  />

  <!-- 导入学生 -->
  <ImportDialog
    ref="importDialogRef"
    title="导入学生"
    upload-url="/api/admin/site/import"
    :format="['xls', 'xlsx']"
    :download-handle="downloadTemplate"
    download-filename="学生导入模板.xlsx"
  />

  <!-- 导入名单 -->
  <ImportDialog
    ref="importUserDialogRef"
    :title="importConfig?.title"
    :upload-url="importConfig?.url"
    :format="importConfig?.format"
    :download-handle="downloadTemplate"
    :download-filename="importConfig?.donloadFilename"
  />

  <!-- 查看图片 -->
  <el-image-viewer
    v-if="showPreview"
    :url-list="curStudentSheetUrls"
    show-progress
    @close="showPreview = false"
  />
</template>

<script setup lang="ts">
  import { reactive, ref, computed } from 'vue';
  import { ArrowDown } from '@element-plus/icons-vue';
  import { getStudentList } from '@/api/student';
  import { StudentItem, StudentListFilter } from '@/api/types/student';
  import useTable from '@/hooks/table';

  import ModifyStudent from './ModifyStudent.vue';

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

  const searchModel = reactive<StudentListFilter>({
    name: '',
    examNo: '',
    secretNo: '',
    studentNo: '',
    subject: null,
    level: '',
    majorType: '',
    status: '',
    batchNo: '',
    signBookNo: '',
    college: '',
    className: '',
    teacher: '',
    examSite: '',
    examRoom: '',
    scanPages: undefined,
  });

  const { dataList, pagination, loading, getList, toPage, pageSizeChange } =
    useTable<StudentItem>(getStudentList, searchModel, false);

  // 表头配置
  const tableFields = [
    { name: '准考证号', field: 'examNo' },
    { name: '密号', field: 'secretNo' },
    { name: '姓名', field: 'name' },
    { name: '学号', field: 'studentNo' },
    { name: '科目', field: 'subject' },
    { name: '试卷类型', field: 'examType' },
    { name: '层次', field: 'level' },
    { name: '专业类型', field: 'majorType' },
    { name: '扫描识别', field: 'scanRecognition' },
    { name: '扫描张数', field: 'scanPages' },
    { name: '人工指定', field: 'manualAssign' },
    { name: '批次编号', field: 'batchNo' },
    { name: '签到表编号', field: 'signBookNo' },
    { name: '学院', field: 'college' },
    { name: '班级', field: 'className' },
    { name: '任课老师', field: 'teacher' },
    { name: '考点', field: 'examSite' },
    { name: '考场', field: 'examRoom' },
  ];
  const headFields = ref(tableFields.map((item) => item.field));
  const checkFieldVisible = (field: string) => {
    return headFields.value.includes(field);
  };

  // table action
  const curRow = ref({} as StudentItem);
  const modifyStudentRef = ref();

  function onEdit(row: StudentItem) {
    curRow.value = row;
    modifyStudentRef.value?.open();
  }

  function onAdd() {
    curRow.value = {} as StudentItem;
    modifyStudentRef.value?.open();
  }

  // 查看图片
  const showPreview = ref(false);
  const curStudentSheetUrls = ref<string[]>([]);
  function onPreviewImg(row: StudentItem) {
    showPreview.value = true;
    curStudentSheetUrls.value = row.sheetUrls || [];
  }

  // 导入学生
  const importDialogRef = ref();
  function downloadTemplate() {
    // TODO: 实现下载模板功能
  }
  function onImport() {
    importDialogRef.value?.open();
  }

  // 导入名单
  const impoartConfigList = ref([
    {
      code: 'breaking',
      title: '缺考名单',
      url: '/api/admin/subject/import/kgt',
      format: ['xls', 'xlsx'],
      donloadFilename: '缺考名单导入模板.xlsx',
    },
    {
      code: 'miss',
      title: '违纪名单',
      url: '/api/admin/subject/import/kgt',
      format: ['xls', 'xlsx'],
      donloadFilename: '违纪名单导入模板.xlsx',
    },
  ]);
  const importUserDialogRef = ref();
  const importData = reactive({
    importType: 'breaking',
  });
  const importConfig = computed(() => {
    return impoartConfigList.value.find(
      (item) => item.code === importData.importType
    );
  });
  const onImportCommand = (command: string) => {
    console.log('导入命令:', command);
    importData.importType = command;
    importUserDialogRef.value?.open();
  };

  // 导出
  function exportData() {
    // TODO: 实现导出功能
  }
</script>
