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

interface Props {
  questionTitle?: string
  standardAnswer?: string
  fullScore?: number
}

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

const modelValue = defineModel<boolean>()
</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"
        >
          {{ standardAnswer || '暂无标准答案' }}
        </text>
      </view>
    </view>
  </wd-popup>
</template>

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