<!-- 查看均分弹窗 -->
<script lang="ts" setup>
import type { QuestionAverageScoreComparisonResponse } from '@/service/types'
import { computed } from 'vue'

interface Props {
  myScore?: number
  avgScore?: number
  questionTitle?: string
  fullScore?: number
  avgScoreData?: QuestionAverageScoreComparisonResponse
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
}

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

const emit = defineEmits<Emits>()

const avgScoreData = computed(() => props.avgScoreData)

const modelValue = defineModel<boolean>()

// 计算属性
const myScorePercent = computed(() => {
  if (!props.fullScore)
    return 0
  return Math.round((props.myScore / props.fullScore) * 100)
})

const avgScorePercent = computed(() => {
  if (!props.fullScore)
    return 0
  return Math.round((props.avgScore / props.fullScore) * 100)
})
</script>

<template>
  <wd-popup
    v-model="modelValue"
    position="center"
    :close-on-click-modal="true"
  >
    <view class="w-320px rounded-lg bg-white p-24px">
      <!-- 弹窗标题 -->
      <view class="mb-20px flex items-center justify-between">
        <text class="text-18px text-gray-800 font-semibold">查看均分</text>
        <view
          class="size-24px flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-100"
          @click="modelValue = false"
        >
          <view class="i-carbon-close size-16px text-gray-500" />
        </view>
      </view>

      <!-- 题目信息 -->
      <view v-if="questionTitle" class="mb-16px">
        <text class="text-14px text-gray-600">题目：{{ questionTitle }}</text>
      </view>

      <!-- 分数对比 -->
      <view class="space-y-16px">
        <!-- 我的均分 -->
        <view class="flex items-center justify-between rounded-lg bg-blue-50 p-16px">
          <view class="flex flex-col">
            <text class="text-14px text-gray-600">我的均分</text>
            <text class="text-20px text-blue-600 font-semibold">{{ myScore }}</text>
          </view>
          <view class="flex flex-col items-end">
            <text class="text-12px text-gray-500">{{ myScorePercent }}%</text>
            <text class="text-12px text-gray-500">满分 {{ fullScore }}</text>
          </view>
        </view>

        <!-- 所有老师均分 -->
        <view class="flex items-center justify-between rounded-lg bg-green-50 p-16px">
          <view class="flex flex-col">
            <text class="text-14px text-gray-600">所有老师均分</text>
            <text class="text-20px text-green-600 font-semibold">{{ avgScore }}</text>
          </view>
          <view class="flex flex-col items-end">
            <text class="text-12px text-gray-500">{{ avgScorePercent }}%</text>
            <text class="text-12px text-gray-500">满分 {{ fullScore }}</text>
          </view>
        </view>

        <!-- 详细统计信息 -->
        <view v-if="avgScoreData" class="border-t pt-16px space-y-12px">
          <text class="text-14px text-gray-700 font-medium">详细统计</text>

          <!-- 我的阅卷统计 -->
          <view class="flex items-center justify-between text-12px">
            <text class="text-gray-600">我的阅卷数量</text>
            <text class="text-gray-800">{{ avgScoreData.teacher_score?.scored_count || 0 }}</text>
          </view>

          <!-- 总阅卷统计 -->
          <view class="flex items-center justify-between text-12px">
            <text class="text-gray-600">总阅卷数量</text>
            <text class="text-gray-800">{{ avgScoreData.all_teachers_score?.scored_count || 0 }}</text>
          </view>

          <!-- 总题目数量 -->
          <view v-if="avgScoreData.all_teachers_score?.total_count" class="flex items-center justify-between text-12px">
            <text class="text-gray-600">总题目数量</text>
            <text class="text-gray-800">{{ avgScoreData.all_teachers_score.total_count }}</text>
          </view>
        </view>
      </view>

      <!-- 分数差异提示 -->
      <view class="mt-16px">
        <view
          v-if="Math.abs(myScore - avgScore) > 2"
          class="flex items-center gap-8px rounded bg-orange-50 p-12px"
        >
          <view class="i-carbon-warning size-16px text-orange-500" />
          <text class="text-12px text-orange-700">
            您的评分与平均分差异较大，建议参考标准答案
          </text>
        </view>
        <view
          v-else
          class="flex items-center gap-8px rounded bg-green-50 p-12px"
        >
          <view class="i-carbon-checkmark size-16px text-green-500" />
          <text class="text-12px text-green-700">
            您的评分与平均分接近，评分标准较为一致
          </text>
        </view>
      </view>
    </view>
  </wd-popup>
</template>
