<!-- 查看标准答案弹窗 -->
<script lang="ts" setup>
import { computed, ref } from 'vue'

interface AnswerKey {
  id: string
  content: string
  score: number
  type: 'text' | 'image' | 'formula'
}

interface Props {
  questionTitle?: string
  fullScore?: number
  answerKeys?: AnswerKey[]
  sampleAnswers?: string[]
  scoringStandard?: string
}

const props = withDefaults(defineProps<Props>(), {
  fullScore: 0,
  answerKeys: () => [],
  sampleAnswers: () => [],
})

const modelValue = defineModel<boolean>()

// 当前查看的标签页
const activeTab = ref<'answer' | 'standard' | 'sample'>('answer')

// 模拟标准答案数据（实际项目中从API获取）
const mockAnswerKeys = computed(() => {
  if (props.answerKeys.length > 0) {
    return props.answerKeys
  }
  return [
    {
      id: '1',
      content: '根据题意，工业革命对西欧社会的影响主要体现在以下几个方面：',
      score: 2,
      type: 'text' as const,
    },
    {
      id: '2',
      content: '1. 促进了资本主义经济的发展，推动了产业结构的转型；',
      score: 3,
      type: 'text' as const,
    },
    {
      id: '3',
      content: '2. 改变了社会阶级结构，形成了工业资产阶级和无产阶级；',
      score: 3,
      type: 'text' as const,
    },
    {
      id: '4',
      content: '3. 推动了城市化进程，改变了人们的生活方式。',
      score: 4,
      type: 'text' as const,
    },
  ]
})

// 切换标签页
function switchTab(tab: 'answer' | 'standard' | 'sample') {
  activeTab.value = tab
}
</script>

<template>
  <wd-popup
    v-model="modelValue"
    position="center"
    :close-on-click-modal="true"
  >
    <view class="max-h-500px w-400px rounded-lg bg-white">
      <!-- 弹窗标题 -->
      <view class="flex items-center justify-between border-b p-20px">
        <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 class="max-h-300px overflow-y-auto p-20px">
        <text
          class="whitespace-pre-line text-14px text-gray-800 leading-relaxed"
        >
          答案
        </text>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped>
.whitespace-pre-line {
  white-space: pre-line;
}
</style>
