<template>
  <div>
    <!-- 主问题布局 -->
    <div class="flex space-x-4">
      <!-- 右侧答案和评分 -->
      <div class="w-2/3">
        <div class="bg-white p-4 rounded-lg">
          <div class="mb-4">
            <div class="flex items-start space-x-2">
              <div class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">候选人</div>
              <div class="flex-1">
                <p class="text-gray-700">{{ record.answer }}</p>
              </div>
            </div>
          </div>
          
          <div>
            <div class="flex items-start space-x-2">
              <div class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">AI评分</div>
              <div class="flex-1">
                <p class="text-gray-600 m-0">{{ record.analysis }}</p>
                <div class="mt-1 text-blue-500">得分：{{ record.score }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 左侧视频播放器 -->
      <div class="w-1/3">
        <div class="video-container">
          <video
            class="w-full h-full object-cover rounded-lg"
            controls
            :src="record.videoUrl"
            preload="metadata"
            :poster="fallbackImageBase64"
            @loadeddata="handleVideoLoaded"
            @error="handleVideoError"
          >
            您的浏览器不支持视频播放。
          </video>
        </div>
      </div>
    </div>

    <!-- 追问题列表 -->
    <div v-if="record.follow_up_questions?.length" class="mt-4 pl-8 border-l-2 border-gray-200">
      <div v-for="(followUp, fIndex) in record.follow_up_questions" 
           :key="fIndex" 
           class="mb-4">
        <div class="flex items-start space-x-2">
          <div class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">追问题</div>
          <div class="flex-1">
            <h4 class="font-medium text-gray-800">{{ followUp.question }}</h4>
            <!-- 递归渲染追问题 -->
            <QuestionAnswerBlock 
              :record="followUp"
              :fallbackImageBase64="fallbackImageBase64"
              class="mt-2"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  record: {
    type: Object,
    required: true
  },
  fallbackImageBase64: {
    type: String,
    required: true
  }
})

const handleVideoLoaded = (event) => {
  const videoElement = event.target
  if (videoElement) {
    if (videoElement.readyState >= 1) {
      captureVideoFirstFrame(videoElement)
    } else {
      videoElement.addEventListener('loadedmetadata', () => {
        captureVideoFirstFrame(videoElement)
      })
    }
  }
}

const handleVideoError = (event) => {
  const videoElement = event.target
  if (videoElement) {
    videoElement.poster = props.fallbackImageBase64
    console.error('视频加载错误')
  }
}

const captureVideoFirstFrame = (videoElement) => {
  try {
    if (videoElement.readyState >= 2) {
      const canvas = document.createElement('canvas')
      canvas.width = videoElement.videoWidth || 320
      canvas.height = videoElement.videoHeight || 240
      
      const ctx = canvas.getContext('2d')
      if (ctx) {
        videoElement.currentTime = 0.1
        ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height)
        const thumbnailUrl = canvas.toDataURL('image/jpeg')
        videoElement.poster = thumbnailUrl
      }
    }
  } catch (error) {
    console.error('捕获视频第一帧失败:', error)
    videoElement.poster = props.fallbackImageBase64
  }
}
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3/4;
  margin: 0 auto;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
</style> 