<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: 200px"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="searchModel.type"
          placeholder="不限"
          clearable
          style="width: 120px"
        >
          <el-option label="类型1" value="1" />
          <el-option label="类型2" value="2" />
          <el-option label="类型3" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="searchModel.status"
          placeholder="不限"
          clearable
          style="width: 120px"
        >
          <el-option label="已启用" value="1" />
          <el-option label="已禁用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toPage(1)">查询</el-button>
        <el-button type="primary" @click="onAdd">新建考试</el-button>
      </el-form-item>
    </el-form>
  </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 property="id" label="ID" width="80" />
      <el-table-column property="name" label="考试名称" min-width="200">
        <template #default="scope">
          <el-button type="primary" link @click="onViewDetail(scope.row)">{{
            scope.row.name
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column property="type" label="类型" width="100">
        <template #default="scope">
          {{ getTypeLabel(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column property="examDate" label="考试日期" width="120" />
      <el-table-column property="forceMark" label="强制标记" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.forceMark ? 'warning' : 'info'">
            {{ scope.row.forceMark ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column property="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '已启用' : '已禁用' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" fixed="right">
        <template #default="scope">
          <el-button type="primary" link @click="onViewDetail(scope.row)">
            详情
          </el-button>
          <el-button type="primary" link @click="onEdit(scope.row)">
            编辑
          </el-button>
          <el-button type="primary" link @click="onEditIssueType(scope.row)">
            问题卷分类
          </el-button>
          <el-button type="primary" link @click="onEditRejectType(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>

  <!-- 统计信息弹窗 -->
  <ExamStatDialog ref="statDialogRef" :exam-id="currentExamId" />

  <!-- 问题卷分类管理弹窗 -->
  <IssuePaperTypeDialog ref="issueTypeDialogRef" :exam-id="currentExamId" />

  <!-- 打回卷分类管理弹窗 -->
  <RejectTypeDialog ref="rejectTypeDialogRef" :exam-id="currentExamId" />
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { getExamList } from '@/api/exam';
  import { ExamQueryItem, ExamListFilter } from '@/api/types/exam';
  import useTable from '@/hooks/table';
  import ExamStatDialog from './ExamStatDialog.vue';
  import IssuePaperTypeDialog from './IssuePaperTypeDialog.vue';
  import RejectTypeDialog from './RejectTypeDialog.vue';

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

  const router = useRouter();

  const searchModel = reactive<ExamListFilter>({
    name: '',
    type: '',
    status: '',
  });

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

  dataList.value = [
    {
      id: 1,
      name: '考试名称1',
      type: 1,
      examDate: '2023-01-01',
      forceMark: true,
      status: 1,
    },
  ];

  function getTypeLabel(type: number): string {
    const typeMap: Record<number, string> = {
      1: '类型1',
      2: '类型2',
      3: '类型3',
    };
    return typeMap[type] || '未知';
  }

  // action相关
  const currentExamId = ref(0);
  // 详情统计弹窗
  const statDialogRef = ref();
  // 问题卷分类弹窗
  const issueTypeDialogRef = ref();
  // 打回卷分类弹窗
  const rejectTypeDialogRef = ref();

  function onViewDetail(row: ExamQueryItem) {
    currentExamId.value = row.id;
    statDialogRef.value?.open();
  }

  function onAdd() {
    router.push({ name: 'ExamEdit' });
  }

  function onEdit(row: ExamQueryItem) {
    router.push({
      name: 'ExamEdit',
      query: { id: row.id },
    });
  }

  function onEditIssueType(row: ExamQueryItem) {
    currentExamId.value = row.id;
    issueTypeDialogRef.value?.open();
  }

  function onEditRejectType(row: ExamQueryItem) {
    currentExamId.value = row.id;
    rejectTypeDialogRef.value?.open();
  }
</script>
