<script setup lang="ts">
import { computed, watch } from 'vue'
import { QuestionCategoryEnum } from '@/enum/business'
import { useCompetitionStore } from '@/store/modules/competition'

// const props = defineProps<{
//   template: QuestionCategoryName
//   content: QuestionContent
// }>()

const store = useCompetitionStore()
const currentQuestionMainInfo = computed(() => store.currentQuestionMainInfo)
const currentQuestionDetail = computed(() => store.currentQuestionDetail)
// console.log(currentQuestionMainInfo.value, 'currentQuestionMainInfo')
// 题目
const title = computed(() => currentQuestionMainInfo.value?.QuestionList?.QuestionContent)
// 归属大纲
// const mainTitle = computed(() => currentQuestionMainInfo.value?.QuestionList?.Name)
// 题目内容
const content = computed(() => currentQuestionDetail.value.Name)
// 模版类型
const template = computed(() => currentQuestionMainInfo.value?.Activity_Question?.UIType)

/**
 * 组合后的标题（用于汉字加一加模板）
 * 将 content 插入到 title 的引号中，并拆分以支持不同样式
 */
const parsedComponentAddTitle = computed(() => {
  const t = title.value || ''
  const c = content.value || ''

  // 尝试替换全角空引号
  if (t.includes('“”')) {
    const [prefix, suffix] = t.split('“”')
    return {
      type: 'quote_full',
      prefix,
      content: c,
      suffix,
    }
  }
  // 尝试替换半角空引号
  if (t.includes('""')) {
    const [prefix, suffix] = t.split('""')
    return {
      type: 'quote_half',
      prefix,
      content: c,
      suffix,
    }
  }

  // 如果没有找到空引号，直接追加
  return {
    type: 'normal',
    prefix: t,
    content: c,
    suffix: '',
  }
})

/** 获取富文本里面的text */
const pinyinChars = computed(() => {
  if (template.value === QuestionCategoryEnum.WordDictation && content.value) {
    // 创建临时元素提取HTML文本内容
    const div = document.createElement('div')
    div.innerHTML = content.value
    const text = div.textContent || ''
    return text.trim().split(/\s+/).filter(Boolean)
  }
  return []
})

watch(
  () => [currentQuestionMainInfo, currentQuestionDetail],
  () => {
    // eslint-disable-next-line no-console
    console.log('Current currentQuestionMainInfo:', currentQuestionMainInfo.value)
    // eslint-disable-next-line no-console
    console.log('Current currentQuestionMainInfo:', currentQuestionMainInfo)
  },
  { deep: true, immediate: true },
)
</script>

<template>
  <div class="w-full flex p-6" style="border: 1px solid red;">
    <!-- template:{{ template }} -->
    <!-- 模板A: 汉字听写-提示 (拼音+提示) -->
    <div v-if="template === QuestionCategoryEnum.ChineseCharacterDictation" class="text-center">
      <div class="mb-6 inline-block text-5xl font-bold leading-none">
        <div class="ptions-container1 text-2xl">
          {{ title }}
        </div>
        <div class="rich-content1">
          {{ content }}
        </div>
      </div>
    </div>

    <!-- 模板B: 汉字听写-同音字 (大字) -->
    <!-- 暂时未匹配到枚举，保持原样或删除 -->
    <!-- <div v-else-if="template === 'TEMPLATE_DICTATION_HOMOPHONE'" class="text-center"> -->

    <!-- 模板C: 汉字加一加 (提示+部件) -->
    <div v-else-if="template === QuestionCategoryEnum.CharacterRadicalAddition" class="text-center">
      <div class="text-[50px] font-bold">
        <template v-if="parsedComponentAddTitle.type === 'quote_full'">
          <span class="text-black">{{ parsedComponentAddTitle.prefix }}“</span>
          <span class="text-red-600">{{ parsedComponentAddTitle.content }}</span>
          <span class="text-black">”{{ parsedComponentAddTitle.suffix }}</span>
        </template>

        <template v-else-if="parsedComponentAddTitle.type === 'quote_half'">
          <span class="text-black">{{ parsedComponentAddTitle.prefix }}"</span>
          <span class="text-red-600">{{ parsedComponentAddTitle.content }}</span>
          <span class="text-black">"{{ parsedComponentAddTitle.suffix }}</span>
        </template>

        <template v-else>
          <span class="text-black">{{ parsedComponentAddTitle.prefix }}</span>
          <span class="ml-4 text-red-600">{{ parsedComponentAddTitle.content }}</span>
        </template>
      </div>
    </div>

    <!-- 模板D: 词语听写 (拼音+提示) -->
    <div v-else-if="template === QuestionCategoryEnum.WordDictation" class="flex flex-col items-center">
      <div class="mb-8 flex flex-wrap justify-center gap-6">
        <div
          v-for="(char, index) in pinyinChars" :key="index"
          class="relative h-32 w-32 flex select-none items-center justify-center border-2 border-red-500 bg-white"
        >
          <!-- 米字格背景 -->
          <div class="pointer-events-none absolute inset-0 z-0 h-full w-full">
            <!-- 横虚线 -->
            <div class="absolute left-0 top-1/2 h-[1px] w-full border-t border-red-400 border-dashed opacity-60" />
            <!-- 竖虚线 -->
            <div class="absolute left-1/2 top-0 h-full w-[1px] border-l border-red-400 border-dashed opacity-60" />
            <!-- 斜虚线 (SVG) -->
            <svg width="100%" height="100%" class="absolute inset-0 opacity-60">
              <line x1="0" y1="0" x2="100%" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
              <line x1="100%" y1="0" x2="0" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
            </svg>
          </div>

          <!-- 文字 -->
          <span class="z-10 text-5xl text-gray-800 font-bold font-sans">{{ char }}</span>
        </div>
      </div>
    </div>

    <!-- 模板E: 成语-文字要求 -->
    <div v-else-if="template === QuestionCategoryEnum.IdiomWriting" class="text-center">
      <div class="mb-8 text-4xl text-gray-800 font-bold">
        <!-- {{ content.title }} -->
        <div class="rich-content" v-html="content" />
      </div>
      <!-- <div class="rounded bg-gray-100 px-4 py-2 text-xl text-gray-500">
        示例：{{ content.meta?.example }}
      </div> -->
    </div>

    <!-- 模板F: 诗词理解 -->
    <!-- <div v-else-if="template === 'TEMPLATE_IDIOM_IMAGE'" class="flex flex-col items-center text-center">
      <div class="mb-6 h-60 w-80 flex items-center justify-center">
        <img :src="content.titleImage" alt="idiom image" class="h-full w-full object-contain">
      </div>
    </div> -->

    <!-- 模板G: 诗词理解-选择题 (通用选择题模板) -->
    <div v-else-if="template === QuestionCategoryEnum.PoetryComprehension" class="w-full flex flex-col items-center">
      <div class="options-container text-2xl">
        {{ title }}
      </div>
      <div class="mb-1 text-3xl text-gray-800 font-bold leading-relaxed">
        <div class="rich-content" v-html="content" />
      </div>
    </div>

    <div v-else class="text-red-500">
      未知的题目模板: {{ template }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.options-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;

  .option-card {
    // width: 320px;
    // height: 260px;
  }
}

.option-card {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  /* rounded-xl */
  padding: 1rem;
  /* p-4 */
  transition: all 0.3s;

  &:hover {
    border-color: #f87171;
    /* border-red-400 */
    background-color: #fef2f2;
    /* bg-red-50 */
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
  }

  &.is-mixed {
    flex-direction: column;
  }

  &.is-text {
    flex-direction: row;
    gap: 1rem;
    /* gap-4 */
  }
}

.option-image-wrapper {
  margin-bottom: 0.8rem;
  height: 6rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.5rem;
  /* rounded-lg */
  padding: 0.5rem;
  /* p-2 */
}

.option-image {
  height: 100%;
  width: 100%;
  object-fit: contain;
  transition: transform 0.3s;

  .group:hover & {
    transform: scale(1.05);
  }
}

.tianzige-wrapper {
  position: relative;
  margin-bottom: 0.75rem;
  /* mb-3 */
  height: 8rem;
  /* h-32 */
  width: 8rem;
  /* w-32 */
  display: flex;
  user-select: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #ef4444;
  /* border-red-500 */
  background-color: white;
}

.tianzige-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  width: 100%;

  .line-horizontal {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    width: 100%;
    border-top: 1px dashed #f87171;
    /* border-red-400 */
    opacity: 0.6;
  }

  .line-vertical {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
    border-left: 1px dashed #f87171;
    /* border-red-400 */
    opacity: 0.6;
  }

  .line-diagonal {
    position: absolute;
    inset: 0;
    opacity: 0.6;
  }
}

.tianzige-text {
  font-family: 'KaiTi', 'STKaiti', serif;
  /* font-kaaiti */
  z-index: 10;
  font-size: 3.75rem;
  /* text-6xl */
  font-weight: 700;
  color: #1f2937;
  /* text-gray-800 */
}

.option-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* gap-3 */
}

.option-label {
  height: 2rem;
  /* h-8 */
  width: 2rem;
  /* w-8 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  /* rounded-full */
  background-color: #fee2e2;
  /* bg-red-100 */
  color: #dc2626;
  /* text-red-600 */
  font-weight: 700;

  .group:hover & {
    background-color: #ef4444;
    /* bg-red-500 */
    color: white;
  }
}

.option-text {
  font-size: 1.25rem;
  /* text-xl */
  color: #374151;
  /* text-gray-700 */
  font-weight: 500;

  .group:hover & {
    color: #b91c1c;
    /* text-red-700 */
  }
}

.homophone {
  :deep(img) {
    height: 230px !important;
    width: auto !important;
    object-fit: contain;
  }
}

.rich-content {
  :deep(img) {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
  }
}
</style>
