<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useHomeStore } from '@/store/home'

const homeStore = useHomeStore()

// 获取学生ID参数
const studentId = ref('')

// 选中的科目ID，0表示全科
const selectedSubjectId = ref(0)

// 学生基本信息
const studentInfo = ref({
  name: '李星云',
  totalScore: 570,
  classRank: 122,
  classTotal: 234,
  gradeRank: 11,
  gradeTotal: 22,
  gradeAverage: 470,
  classAverage: 510,
})

// 科目选项（包含全科）
const subjectTabs = computed(() => {
  const tabs = [
    { name: 'all', title: '全科', subjectId: 0 },
  ]

  homeStore.subjectOptions.forEach((subject) => {
    tabs.push({
      name: `subject-${subject.value}`,
      title: subject.label,
      subjectId: subject.value,
    })
  })

  return tabs
})

// 当前选中的科目标签
const activeTab = computed({
  get: () => selectedSubjectId.value === 0 ? 'all' : `subject-${selectedSubjectId.value}`,
  set: (value) => {
    if (value === 'all') {
      selectedSubjectId.value = 0
    }
    else {
      const subjectId = Number.parseInt(value.replace('subject-', ''))
      selectedSubjectId.value = subjectId
    }
  },
})

// 返回上一页
function goBack() {
  uni.navigateBack()
}

// 科目切换处理
function handleTabClick({ name }: { name: string }) {
  activeTab.value = name
}

// 页面初始化
onMounted(async () => {
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = (currentPage as any).options || {}
  studentId.value = options.id || ''

  // 如果store中没有数据，先获取选项数据
  if (homeStore.examOptions.length === 0) {
    await homeStore.fetchOptions()
  }

  // TODO: 根据studentId获取学生详情数据
  console.log('学生ID:', studentId.value)
})
</script>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 导航栏 -->
    <wd-navbar placeholder fixed>
      <template #left>
        <view class="flex items-center" @click="goBack">
          <wd-icon name="arrow-left" size="20px" />
        </view>
      </template>
      <template #title>
        <text class="text-lg font-semibold">{{ studentInfo.name }}成绩报告</text>
      </template>
    </wd-navbar>

    <!-- 科目选择标签栏 -->
    <wd-tabs
      v-model="activeTab"
      sticky
      class="bg-white"
      @click="handleTabClick"
    >
      <wd-tab
        v-for="tab in subjectTabs"
        :key="tab.name"
        :name="tab.name"
        :title="tab.title"
      />
    </wd-tabs>

    <!-- 主要内容区域 -->
    <view class="p-4 space-y-4">
      <!-- 个人成绩卡片 -->
      <view class="rounded-xl bg-white p-4 shadow-sm">
        <!-- 学生姓名和总分 -->
        <view class="mb-4 flex items-center justify-between">
          <view class="rounded-full bg-blue-100 px-3 py-1">
            <text class="text-sm text-blue-600 font-medium">{{ studentInfo.name }}</text>
          </view>
          <text class="text-2xl text-orange-500 font-bold">{{ studentInfo.totalScore }}分</text>
        </view>

        <!-- 成绩统计网格 - 2行2列 -->
        <view class="grid grid-cols-2 gap-3">
          <!-- 年级排名 -->
          <view class="rounded-lg bg-orange-50 p-3">
            <view class="mb-1 flex items-center justify-between">
              <text class="text-2xl text-gray-800 font-bold">{{ studentInfo.classRank }}</text>
              <text class="text-xs text-gray-500">/{{ studentInfo.classTotal }}</text>
            </view>
            <text class="text-sm text-gray-600">年级排名</text>
          </view>

          <!-- 班级排名 -->
          <view class="rounded-lg bg-orange-50 p-3">
            <view class="mb-1 flex items-center justify-between">
              <text class="text-2xl text-gray-800 font-bold">{{ studentInfo.gradeRank }}</text>
              <text class="text-xs text-gray-500">/{{ studentInfo.gradeTotal }}</text>
            </view>
            <text class="text-sm text-gray-600">班级排名</text>
          </view>

          <!-- 年级平均分 -->
          <view class="flex flex-col rounded-lg bg-orange-50 p-3">
            <text class="text-2xl text-gray-800 font-bold">{{ studentInfo.gradeAverage }}</text>
            <text class="text-sm text-gray-600">年级平均分</text>
          </view>

          <!-- 班级平均分 -->
          <view class="flex flex-col rounded-lg bg-blue-50 p-3">
            <text class="text-2xl text-gray-800 font-bold">{{ studentInfo.classAverage }}</text>
            <text class="text-sm text-gray-600">班级平均分</text>
          </view>
        </view>
      </view>

      <!-- 成绩分布图 -->
      <view class="rounded-xl bg-white p-4 shadow-sm">
        <view class="mb-4 flex items-center justify-between">
          <text class="text-lg text-gray-800 font-semibold">成绩分布图</text>
        </view>

        <!-- TODO: 实现成绩分布图表 -->
        <view class="h-48 flex items-center justify-center rounded-lg bg-gray-50">
          <text class="text-gray-500">成绩分布图表（待实现）</text>
        </view>
      </view>

      <!-- 全科专属内容 -->
      <template v-if="selectedSubjectId === 0">
        <!-- 优劣势分析 -->
        <view class="rounded-xl bg-white p-4 shadow-sm">
          <view class="mb-4 flex items-center justify-between">
            <text class="text-lg text-gray-800 font-semibold">优劣势分析</text>
          </view>

          <!-- TODO: 实现优劣势分析内容 -->
          <view class="space-y-3">
            <view class="rounded-lg bg-green-50 p-3">
              <text class="text-sm text-green-600 font-medium">优势学科</text>
              <view class="mt-2">
                <text class="text-gray-600">数学、物理等学科表现优秀...</text>
              </view>
            </view>

            <view class="rounded-lg bg-red-50 p-3">
              <text class="text-sm text-red-600 font-medium">待提升学科</text>
              <view class="mt-2">
                <text class="text-gray-600">语文、英语等学科有提升空间...</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 均分对比 -->
        <view class="rounded-xl bg-white p-4 shadow-sm">
          <view class="mb-4 flex items-center justify-between">
            <text class="text-lg text-gray-800 font-semibold">各科均分对比</text>
          </view>

          <!-- TODO: 实现各科均分对比图表 -->
          <view class="h-48 flex items-center justify-center rounded-lg bg-gray-50">
            <text class="text-gray-500">各科均分对比图表（待实现）</text>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<route lang="jsonc">
{
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "学生详情"
  }
}
</route>
