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

defineProps<{
  data: API.QuestionStatInfo[]
  loading?: boolean
}>()

const emit = defineEmits<{
  viewDetail: [item: API.QuestionStatInfo]
}>()

function handleViewDetail(item: API.QuestionStatInfo) {
  emit('viewDetail', item)
}
</script>

<template>
  <view class="question-table">
    <wd-table :data="data">
      <wd-table-col prop="question_name" label="题号" :width="`${20}%`" fixed />
      <wd-table-col prop="class_score_rate" label="班级得分率" :width="`${20}%`">
        <template #value="{ row }">
          <text>{{ row.class_score_rate || '0' }}%</text>
        </template>
      </wd-table-col>
      <wd-table-col prop="grade_score_rate" label="年级得分率" :width="`${20}%`">
        <template #value="{ row }">
          <text>{{ row.grade_score_rate || '0' }}%</text>
        </template>
      </wd-table-col>
      <wd-table-col prop="rate_point_diff" label="得分率差值" :width="`${20}%`">
        <template #value="{ row }">
          <text
            :class="[
              row.rate_point_diff && row.rate_point_diff < 0 ? 'text-red-500'
              : row.rate_point_diff === 0 ? 'text-gray-600' : 'text-green-500',
            ]"
          >
            {{ row.rate_point_diff || '0' }}%
          </text>
        </template>
      </wd-table-col>
      <wd-table-col prop="detail" label="详情" :width="`${20}%`" align="center">
        <template #value="{ row }">
          <wd-icon
            name="view"
            size="18px"
            class="cursor-pointer text-blue-500"
            @tap="handleViewDetail(row)"
          />
        </template>
      </wd-table-col>
    </wd-table>

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

    <!-- 暂无数据 -->
    <view v-if="!loading && data.length === 0" class="py-8 text-center">
      <text class="text-sm text-gray-500">暂无数据</text>
    </view>
  </view>
</template>

<style scoped>
.question-table {
  width: 100%;
}
</style>
