<script lang="ts" setup>
import type * as API from '@/service/types'
import QuestionScoreChart from './QuestionScoreChart.vue'

const props = defineProps<{
  visible: boolean
  question: API.QuestionStatInfo | null
  loading?: boolean
}>()

const emit = defineEmits<{
  'update:visible': [value: boolean]
  viewStudentList: [question: API.QuestionStatInfo]
}>()

function handleClose() {
  emit('update:visible', false)
}

function handleViewStudentList() {
  if (props.question) {
    emit('viewStudentList', props.question)
  }
}
</script>

<template>
  <wd-popup :model-value="visible" position="bottom" :safe-area-inset-bottom="true" @update:model-value="handleClose">
    <view class="detail-popup bg-slate-50">
      <!-- 标题栏 -->
      <view class="flex items-center justify-between bg-white px-4 py-3">
        <text class="text-base text-slate-800 font-semibold">
          {{ question?.question_name || '' }}
        </text>
        <wd-icon name="close" size="20px" @tap="handleClose" />
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="flex items-center justify-center py-20">
        <wd-loading size="24" />
      </view>

      <!-- 详情内容 -->
      <view v-else-if="question" class="max-h-150 overflow-y-auto p-4">
        <!-- 班级作答统计 -->
        <view class="mb-4 rounded-xl bg-white p-4 shadow-sm">
          <view class="mb-3">
            <text class="text-base text-slate-800 font-semibold">班级作答统计</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-sm text-slate-600">
              班级/年级平均分：{{ question.class_avg_score?.toFixed(2) || '-' }}/{{ question.grade_avg_score?.toFixed(2) || '-' }}
            </text>
          </view>
          <view class="mt-2 flex items-center justify-between">
            <text class="text-sm text-slate-600">
              班级/年级得分率：{{ question.class_score_rate || '0' }}%/{{ question.grade_score_rate || '0' }}%
            </text>
          </view>
        </view>

        <!-- 得分分布图表 -->
        <view class="mb-4 rounded-xl bg-white p-4 shadow-sm">
          <QuestionScoreChart :data="question.student_score_list || []" />
        </view>

        <!-- 查看学生名单按钮 -->
        <view class="rounded-xl bg-white p-4 shadow-sm">
          <wd-button type="primary" block @click="handleViewStudentList">
            查看答题学生名单
          </wd-button>
        </view>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped>
.detail-popup {
  border-radius: 16px 16px 0 0;
  max-height: 90vh;
}
</style>

