<!-- 阅卷布局组件 -->
<script lang="ts" setup>
import type { ExamQuestionWithTasksResponse } from '@/api'
import { computed } from 'vue'

interface Props {
  isLandscape: boolean
  isFullscreen: boolean
  currentQuestionIndex: number
  totalQuestions: number
  currentTaskSubmit: number
  questions: ExamQuestionWithTasksResponse[] // 改为 any[] 以支持不同的数据结构
  myScore?: number
  avgScore?: number
}

interface Emits {
  (e: 'goBack'): void
  (e: 'selectQuestion', index: number): void
  (e: 'openScoreSettings'): void
  (e: 'viewAvgScore'): void
  (e: 'viewAnswer'): void
  (e: 'toggleOrientation'): void
  (e: 'toggleFullscreen'): void
}

const props = withDefaults(defineProps<Props>(), {
  myScore: 0,
  avgScore: 0,
})

const emit = defineEmits<Emits>()

// 当前题目信息
const currentQuestion = computed(() => props.questions[props.currentQuestionIndex])

// 题目选择器选项
const questionPickerColumns = computed(() => [
  props.questions.map((q, index) => ({
    label: `${q.question_major}.${q.question_minor}`,
    value: index,
  })),
])

// 格式化分数，保留最少的小数位
function formatScore(score: number): string {
  if (score === 0)
    return '0'
  if (score % 1 === 0)
    return score.toString() // 整数不显示小数

  // 最多保留2位小数，去掉尾部的0
  const formatted = score.toFixed(2)
  return formatted.replace(/\.?0+$/, '')
}
</script>

<template>
  <!-- 横屏布局 -->
  <view v-if="isLandscape" class="h-0 w-100vw flex flex-grow flex-col bg-gray-100">
    <!-- 顶部导航栏 -->
    <view class="h-48px flex items-center border-b bg-white px-16px shadow-sm">
      <!-- 左侧返回按钮 -->
      <view class="w-64px flex justify-start border-r">
        <view
          class="size-40px flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-100"
          @click="emit('goBack')"
        >
          <view class="i-carbon-arrow-left size-20px text-gray-700" />
        </view>
      </view>

      <!-- 右侧导航栏 -->
      <view class="flex flex-1 items-center justify-between pl-16px">
        <!-- 题号信息 -->
        <view class="mr-16px flex items-center">
          <text class="text-16px text-gray-800 font-medium">
            {{ currentTaskSubmit + 1 }}/{{ totalQuestions }}
          </text>
        </view>

        <!-- 操作按钮组 -->
        <view class="flex items-center gap-16px text-14px">
          <view
            class="cursor-pointer text-gray-700 transition-colors hover:text-blue-500"
            @click="emit('openScoreSettings')"
          >
            打分设置
          </view>
          <view
            class="cursor-pointer text-gray-700 transition-colors hover:text-blue-500"
            @click="emit('viewAvgScore')"
          >
            查看均分
          </view>
          <view
            class="cursor-pointer text-gray-700 transition-colors hover:text-blue-500"
            @click="emit('viewAnswer')"
          >
            查看答案
          </view>
          <view
            class="size-32px flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-100"
            @click="emit('toggleOrientation')"
          >
            <view class="i-carbon:mobile-view-orientation size-18px text-gray-700" />
          </view>
          <view
            class="size-32px flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-100"
            @click="emit('toggleFullscreen')"
          >
            <view
              :class="isFullscreen ? 'i-carbon-minimize' : 'i-carbon-maximize'"
              class="size-18px text-gray-700"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="h-0 flex flex-1">
      <!-- 左侧题目选择器 -->
      <view class="w-80px flex flex-col gap-8px border-r border-gray-200 bg-white p-8px">
        <view
          v-for="(question, index) in questions"
          :key="question.question_id"
          class="flex cursor-pointer items-center justify-center rounded py-6px text-12px transition-colors"
          :class="[
            index === currentQuestionIndex
              ? 'bg-blue-500 text-white'
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
          ]"
          @click="emit('selectQuestion', index)"
        >
          {{ question.question_major }}.{{ question.question_minor }}
        </view>
      </view>

      <!-- 右侧作答区域 -->
      <view class="relative h-full flex-1 overflow-auto bg-green-200">
        <slot name="content" :current-question="currentQuestion" />
      </view>
    </view>
  </view>

  <!-- 竖屏布局 -->
  <view v-else class="h-0 w-100vw flex flex-grow flex-col bg-gray-100">
    <!-- 顶部导航栏 -->
    <view class="h-12 flex items-center bg-white px-4 py-2 shadow-sm">
      <!-- 左侧 -->
      <view class="flex items-center gap-3">
        <view
          class="size-8 flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-100"
          @click="emit('goBack')"
        >
          <view class="i-carbon-arrow-left size-5 text-gray-700" />
        </view>

        <!-- 题目选择器弹窗 -->
        <wd-picker
          :model-value="currentQuestionIndex"
          :columns="questionPickerColumns"
          :value="String(currentQuestionIndex)"
          :title="`${currentQuestion?.question_major}.${currentQuestion?.question_minor}`"
          @confirm="({ value }) => emit('selectQuestion', Number(value))"
        />
      </view>

      <!-- 右侧分数信息 -->
      <view class="flex flex-1 justify-end">
        <text class="text-sm text-gray-600">
          我的均分/本题均分: {{ formatScore(myScore) }}/{{ formatScore(avgScore) }}
        </text>
      </view>
    </view>

    <!-- 二层导航栏 -->
    <view class="h-12 flex items-center border-t border-gray-200 bg-white px-4 py-2">
      <!-- 题号信息 -->
      <view class="flex items-center gap-4">
        <text class="text-base text-gray-800 font-medium">
          {{ currentTaskSubmit + 1 }}/{{ totalQuestions }}
        </text>
      </view>

      <!-- 操作按钮组 -->
      <view class="flex flex-1 items-center justify-end gap-3">
        <view
          class="cursor-pointer text-sm text-gray-700 transition-colors hover:text-blue-500"
          @click="emit('openScoreSettings')"
        >
          打分设置
        </view>
        <view
          class="cursor-pointer text-sm text-gray-700 transition-colors hover:text-blue-500"
          @click="emit('viewAvgScore')"
        >
          查看均分
        </view>
        <view
          class="cursor-pointer text-sm text-gray-700 transition-colors hover:text-blue-500"
          @click="emit('viewAnswer')"
        >
          查看答案
        </view>
        <view
          class="size-28px flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-100"
          @click="emit('toggleOrientation')"
        >
          <view class="i-carbon:mobile-view-orientation size-16px text-gray-700" />
        </view>
        <view
          class="size-28px flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-100"
          @click="emit('toggleFullscreen')"
        >
          <view
            :class="isFullscreen ? 'i-carbon-minimize' : 'i-carbon-maximize'"
            class="size-16px text-gray-700"
          />
        </view>
      </view>
    </view>

    <!-- 作答区域 -->
    <view class="relative h-0 flex-1 bg-green-200">
      <slot name="content" :current-question="currentQuestion" />
    </view>
  </view>
</template>
