<script setup lang="ts">
import type { KonvaMarkingData } from '../../composables/renderer/useMarkingKonva'
import type { ExamStudentMarkingQuestionResponse } from '@/api'
import { markingSettings } from '../../composables/useMarkingSettings'
import { useSmartScale } from '../../composables/useSmartScale'
import ScaleControlPanel from '../ScaleControlPanel.vue'
import QuestionRenderer from './QuestionRenderer.vue'

interface Props {
  imageSize: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'marking-change': [questionIndex: number, imageIndex: number, data: KonvaMarkingData]
}>()

// 智能缩放控制
const smartScale = useSmartScale(props.imageSize)

const questionData = defineModel<ExamStudentMarkingQuestionResponse[]>('questionData')

// 计算题目布局类
const questionsLayoutClass = computed(() => ({
  'questions-vertical': true, // 多题总是竖排
  'items-start': markingSettings.value.imagePosition === 'left',
  'items-center': markingSettings.value.imagePosition === 'center',
  'items-end': markingSettings.value.imagePosition === 'right',
}))

// 转换为渲染数据
const questionDataList = computed(() => {
  if (!questionData.value?.length)
    return []

  return questionData.value.map((item, index) => ({
    id: `question_${item.tpl_question_id || index}_${item.scan_info_id}_${index}`,
    title: `${item.question_major || ''}${item.question_minor || ''}`,
    fullScore: item.full_score || 0,
    imageUrls: item.image_urls || [],
  }))
})

/**
 * 处理标记变化
 */
function handleMarkingChange(questionIndex: number, imageIndex: number, data: KonvaMarkingData) {
  emit('marking-change', questionIndex, imageIndex, data)
}
</script>

<template>
  <div class="multi-question-renderer">
    <!-- 缩放控制面板 -->
    <ScaleControlPanel
      :scale-text="smartScale.scaleText.value"
      :can-zoom-in="smartScale.canZoomIn.value"
      :can-zoom-out="smartScale.canZoomOut.value"
      @zoom-in="smartScale.zoomIn"
      @zoom-out="smartScale.zoomOut"
      @reset-zoom="smartScale.resetZoom"
      @fit-to-screen="smartScale.fitToScreen"
    />

    <div class="flex flex-col flex-nowrap" :class="questionsLayoutClass">
      <QuestionRenderer
        v-for="(question, questionIndex) in questionDataList"
        :key="question.id"
        :question="question"
        :question-index="questionIndex"
        :scale="smartScale.finalScale.value"
        :image-layout="markingSettings.imageLayout"
        :show-toolbar="markingSettings.showTraceToolbar"
        class="question-item w-fit"
        @marking-change="(imageIndex, data) => handleMarkingChange(questionIndex, imageIndex, data)"
      />
    </div>
  </div>
</template>

<style scoped>
.multi-question-renderer {
  width: 100%;
  overflow: auto;
  padding: 8rpx 16rpx;
  padding-bottom: 96rpx;
}

.questions-container {
  display: flex;
  align-items: flex-start;
}

.questions-vertical {
  flex-direction: column;
  gap: 24px;
  padding-left: 12px;
}

.questions-single {
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.question-item {
  flex-shrink: 0;
}
</style>
