<!-- 阅卷任务卡片组件 -->
<script lang="ts" setup>
import type { ExamMarkingTaskResponse, SubjectInfo } from '@/service/types'
import dayjs from 'dayjs'
import { useDict } from '@/composables/useDict'

const props = defineProps<{
  task: ExamMarkingTaskResponse
  isCurrent?: boolean
  isMonitor?: boolean
}>()

const emit = defineEmits<{
  enterMarking: [examId: number, subjectId: number]
  viewProgress: [examId: number, subjectId: number]
  viewQuality: [examId: number, subjectId: number]
}>()

const task = computed(() => props.task as ExamMarkingTaskResponse)

// 字典数据
const { getDictOptionsAndGetLabel } = useDict()
const [taskStatusDict, getTaskStatusLabel] = getDictOptionsAndGetLabel('task_status')

// 格式化时间
function formatDate(date?: string): string {
  if (!date)
    return '未设置'
  return dayjs(date).format('MM-DD HH:mm')
}

const statusText = computed(() => {
  return props.task.subjects.map(subject => getTaskStatusLabel(subject.marking_status))
})

// 获取状态标签类型
function getStatusTagType(status?: string): 'primary' | 'success' | 'warning' | 'default' {
  switch (status) {
    case '进行中':
      return 'primary'
    case '已完成':
      return 'success'
    case '准备中':
      return 'warning'
    default:
      return 'default'
  }
}

// 进入阅卷
function handleEnterMarking(subject: SubjectInfo) {
  // 已统分的考试不能进入
  if (props.task.is_scored) {
    uni.showToast({
      title: '已完成，不能再进入',
      icon: 'none',
    })
    return
  }

  if (!props.task.exam_id || !subject.subject_id) {
    uni.showToast({
      title: '参数错误',
      icon: 'none',
    })
    return
  }

  emit('enterMarking', props.task.exam_id, subject.subject_id)
}

// 跳转到阅卷监控详情页
function navigateToMonitorDetail(subjectId: number) {
  uni.navigateTo({
    url: `/pages/marking/monitor?&subjectId=${subjectId}`,
  })
}

// 跳转到阅卷进度页面
function navigateToProgress(subjectId: number) {
  uni.navigateTo({
    url: `/pages/marking/marking-progress?examSubjectId=${subjectId}`,
  })
}

// 跳转到阅卷质量页面
function navigateToQuality(subjectId: number) {
  uni.navigateTo({
    url: `/pages/marking/marking-quality?examSubjectId=${subjectId}`,
  })
}
</script>

<template>
  <view class="border border-slate-100 rounded-2xl bg-white p-4 shadow-md">
    <!-- 第一行：名称 + 已完成标签 -->
    <view class="mb-4">
      <view class="mb-2 flex items-center justify-between">
        <text class="text-lg font-semibold">{{ task.exam_name }}</text>
        <view class="flex items-center">
          <view class="i-mingcute:calendar-line mr-1 text-xs text-slate-500" />
          <text class="text-xs text-gray-500">{{ formatDate(task.exam_date) }}</text>
        </view>
      </view>

      <!-- 第二行：类型 + ID -->
      <view class="flex items-center space-x-2">
        <view class="flex items-center rounded-md bg-blue-100 px-2">
          <text class="text-xs text-blue-600">          {{ task.exam_type }}</text>
        </view>
        <text class="text-xs text-green-600">考试ID: {{ task.exam_id }}</text>
      </view>
    </view>

    <!-- 科目列表 -->
    <view v-if="!task.subjects || task.subjects.length === 0" class="py-2 text-center">
      <text class="text-sm text-slate-400">暂无科目</text>
    </view>

    <view
      v-for="(subject, index) in task.subjects"
      v-else
      :key="subject.subject_id"
      class="flex items-center justify-between py-1"
      @click="isMonitor ? navigateToMonitorDetail(subject.subject_id) : handleEnterMarking(subject)"
    >
      <!-- 科目名称 -->
      <view class="flex items-center gap-2">
        <view class="h-1 w-1 rounded-full bg-blue-500" />
        <text class="text-sm">{{ subject.subject_name }}</text>
        <wd-tag
          v-if="!isMonitor"
          :type="getStatusTagType(statusText[index])"
          size="small"
        >
          {{ statusText[index] }}
        </wd-tag>
      </view>

      <!-- 操作按钮 -->
      <view v-if="isMonitor" class="flex space-x-2">
        <view
          class="rounded-md bg-orange-100 px-3 py-1"
          @click.stop="navigateToProgress(subject.subject_id)"
        >
          <text class="flex items-center text-xs text-orange-600">
            阅卷进度
          </text>
        </view>
        <view
          class="rounded-md bg-blue-100 px-3 py-1"
          @click.stop="navigateToQuality(subject.subject_id)"
        >
          <text class="flex items-center text-xs text-blue-600">
            阅卷质量
          </text>
        </view>
      </view>

      <view v-else class="flex space-x-2">
        <view
          class="rounded-md bg-orange-100 px-3 py-1"
          @click="handleEnterMarking(subject)"
        >
          <text class="flex items-center text-xs text-orange-600">
            进入阅卷
          </text>
        </view>
      </view>
    </view>
  </view>
</template>
