<template>
  <div class="part-box is-filter">
    <el-form inline>
      <el-form-item label="科目">
        <select-subject v-model="searchModel.subjectCode"></select-subject>
      </el-form-item>
      <el-form-item label="选做科目">
        <el-select
          v-model="searchModel.isOptionalException"
          placeholder="不限"
          clearable
          style="width: 120px"
        >
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="searchModel.isReviewed"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="已复核" :value="true" />
          <el-option label="未复核" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="学院">
        <el-select
          v-model="searchModel.academyId"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="请选11择" :value="11" />
        </el-select>
      </el-form-item>
      <el-form-item label="试卷总分">
        <el-space>
          <el-input-number
            v-model="searchModel.totalStartScore"
            placeholder="低分"
            :min="0"
            :max="999"
            :step="0.1"
            :precision="1"
            :controls="false"
            step-strictly
            style="width: 80px"
          />
          <span>到</span>
          <el-input-number
            v-model="searchModel.totalEndScore"
            placeholder="高分"
            :min="0"
            :max="999"
            :step="0.1"
            :precision="1"
            :controls="false"
            step-strictly
            style="width: 80px"
          />
        </el-space>
      </el-form-item>
      <el-form-item label="选做题">
        <el-select
          v-model="searchModel.optionalExceptionType"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="(val, key) in OPTIONAL_EXCEPTION_TYPE"
            :key="key"
            :label="val"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="复核次数">
        <el-select
          v-model="searchModel.reviewedTimes"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="1" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="复核人">
        <el-input
          v-model.trim="searchModel.reviewer"
          placeholder=""
          clearable
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="大题">
        <el-select
          v-model="searchModel.bigQuestionNo"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="请选择" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="大题得分">
        <el-space>
          <el-input-number
            v-model="searchModel.bigQuestionStartScore"
            placeholder="低分"
            :min="0"
            :max="999"
            :step="0.1"
            :precision="1"
            :controls="false"
            step-strictly
            style="width: 80px"
          />
          <span>到</span>
          <el-input-number
            v-model="searchModel.bigQuestionEndScore"
            placeholder="高分"
            :min="0"
            :max="999"
            :step="0.1"
            :precision="1"
            :controls="false"
            step-strictly
            style="width: 80px"
          />
        </el-space>
      </el-form-item>
      <el-form-item label="小题得分">
        <el-input-number
          v-model="searchModel.smallQuestionScore"
          placeholder=""
          :min="0"
          :max="999"
          :step="0.1"
          :precision="1"
          :controls="false"
          step-strictly
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="密号">
        <el-input
          v-model.trim="searchModel.secretNo"
          placeholder=""
          clearable
          style="width: 120px"
        />
      </el-form-item>
    </el-form>
    <el-divider class="form-divider" />

    <div class="part-action">
      <el-space wrap>
        <el-button type="primary" @click="toPage(1)">查询</el-button>
        <el-button @click="onBatchReview"
          >批量复核({{ pagination.total }})</el-button
        >
        <el-button @click="onBatchCancelReview">取消复核</el-button>
        <el-button @click="onImport">导入</el-button>
        <el-dropdown @command="onExportCommand">
          <el-button type="primary">
            导出
            <el-icon class="el-icon--right"><ArrowDown /> </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="list">复核列表</el-dropdown-item>
              <el-dropdown-item command="gzl">工作量</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button @click="onExportSign">导出标记卷</el-button>
        <el-button @click="onExportLog">错误日志</el-button>
      </el-space>
    </div>
  </div>

  <div class="part-box">
    <el-table
      class="page-table"
      :data="dataList"
      :loading="loading"
      border
      stripe
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="courseName"
        label="科目"
        min-width="200"
        sortable
      />
      <el-table-column prop="secretNo" label="密号" width="120" />
      <el-table-column label="选做异常" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.isOptionalException ? 'warning' : 'success'">
            {{ scope.row.isOptionalException ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="objectiveScore" label="客观分" width="100" />
      <el-table-column prop="subjectiveScore" label="主观分" width="100" />
      <el-table-column
        prop="totalScore"
        label="试卷总分"
        width="110"
        sortable
      />
      <el-table-column prop="scoreDetail" label="得分明细" min-width="200" />
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="scope">
          <el-button size="small" link @click="onTrackView(scope.row)">
            轨迹图
          </el-button>
          <el-button size="small" link @click="onCancelReview(scope.row)">
            取消复核
          </el-button>
          <el-button size="small" link @click="onReview(scope.row)">
            进入复核
          </el-button>
        </template>
      </el-table-column>
      <!-- TODO:复核人，复核时间  sortable -->
      <el-table-column prop="reviewer" label="复核人" width="120" sortable />
      <el-table-column
        prop="reviewTime"
        label="复核时间"
        width="180"
        sortable
      />
    </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 { ElMessage } from 'element-plus';
  import { ArrowDown } from '@element-plus/icons-vue';
  import { getFullReviewList } from '@/api/review';
  import { FullReviewItem, FullReviewListFilter } from '@/api/types/review';
  import useTable from '@/hooks/table';

  import { OPTIONAL_EXCEPTION_TYPE } from '@/constants/enumerate';

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

  const searchModel = reactive<FullReviewListFilter>({
    subjectCode: null,
    isOptionalException: undefined,
    isReviewed: undefined,
    academyId: undefined,
    totalStartScore: undefined,
    totalEndScore: undefined,
    optionalExceptionType: undefined,
    reviewedTimes: undefined,
    reviewer: undefined,
    bigQuestionNo: undefined,
    bigQuestionStartScore: undefined,
    bigQuestionEndScore: undefined,
    smallQuestionScore: undefined,
    secretNo: undefined,
  });

  const {
    dataList,
    pagination,
    loading,
    selectedRows,
    toPage,
    pageSizeChange,
    handleSelectionChange,
    handleSortChange,
  } = useTable<FullReviewItem>(getFullReviewList, searchModel, false);

  // 批量复核
  function onBatchReview() {
    if (selectedRows.length === 0) {
      ElMessage.warning('请选择要复核的试卷');
      return;
    }
    // TODO: 批量复核
    console.log('批量复核:', selectedRows);
  }
  // 批量取消复核
  function onBatchCancelReview() {
    if (selectedRows.length === 0) {
      ElMessage.warning('请选择要取消复核的试卷');
      return;
    }
    // TODO: 批量取消复核
    console.log('批量复核:', selectedRows);
  }

  // 轨迹图
  function onTrackView(row: FullReviewItem) {
    // TODO: 轨迹图
    console.log('复核:', row);
  }
  // 取消复核
  function onCancelReview(row: FullReviewItem) {
    // TODO: 取消复核
    console.log('复核:', row);
  }
  // 进入复核
  function onReview(row: FullReviewItem) {
    // TODO: 进入复核
    console.log('复核:', row);
  }

  // 导入
  function onImport() {
    // TODO: 实现导入功能
    console.log('导入');
  }

  // 导出
  const onExportCommand = (command: string) => {
    console.log('导出命令:', command);
  };
  // 导出标记卷
  function onExportSign() {
    // TODO: 导出标记卷
    console.log('导出标记卷');
  }
  // 导出错误日志
  function onExportLog() {
    // TODO: 导出错误日志
    console.log('导出错误日志');
  }
</script>
