<script setup lang="ts">
import { NGrid, NGridItem, NSelect } from 'naive-ui'
import { ref } from 'vue'

const questionOptions = [
  { label: '汉字听写 - 根据提示书写汉字', value: 'hanzi' },
  { label: '同音字辨析 - 根据拼音书写', value: 'tongyin' },
  { label: '偏旁部首 - 按要求写字', value: 'pianpang' },
  { label: '词语听写 - 综合练习', value: 'ciyu' },
  { label: '成语填空 - 四字成语', value: 'chengyu' },
  { label: '反义词挑战', value: 'fanyi' },
  { label: '近义词挑战', value: 'jinyi' },
]

const pkOptions = [
  { label: '极速成语接龙 - 每题10秒', value: 'speed10' },
  { label: '极速成语接龙 - 每题20秒', value: 'speed20' },
]

const regularQuestions = ref([
  { value: 'hanzi' },
  { value: 'tongyin' },
  { value: 'pianpang' },
  { value: 'ciyu' },
  { value: 'chengyu' },
  { value: 'fanyi' },
  { value: 'jinyi' },
])

const pkQuestions = ref([
  { value: 'speed10' },
  { value: 'speed10' },
  { value: 'speed10' },
  { value: 'speed10' },
  { value: 'speed10' },
])
</script>

<template>
  <div class="py-4">
    <NGrid :x-gap="48" :y-gap="24" cols="1 l:2" responsive="screen">
      <!-- 左侧：常规赛题包 -->
      <NGridItem>
        <div class="h-full rounded-xl bg-gray-50/50 p-6">
          <div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
            <div class="i-carbon-notebook text-lg text-blue-500" />
            <span>常规赛题包</span>
          </div>

          <div class="flex flex-col gap-4">
            <div
              v-for="(item, idx) in regularQuestions"
              :key="idx"
              class="flex items-center gap-4"
            >
              <span class="w-12 text-xs text-gray-400 font-medium">第{{ idx + 1 }}题</span>
              <NSelect
                v-model:value="item.value"
                :options="questionOptions"
                placeholder="请选择题型"
                class="flex-1 bg-white"
              />
            </div>
          </div>
        </div>
      </NGridItem>

      <!-- 右侧：加时赛 (PK环节) -->
      <NGridItem>
        <div class="h-full border border-orange-100/50 rounded-xl bg-orange-50/30 p-6">
          <div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
            <div class="i-carbon-timer text-lg text-orange-500" />
            <span>加时赛 (PK环节)</span>
          </div>

          <div class="flex flex-col gap-4">
            <div
              v-for="(item, idx) in pkQuestions"
              :key="idx"
              class="flex items-center gap-4"
            >
              <span class="w-8 text-xs text-orange-400 font-medium">PK{{ idx + 1 }}</span>
              <NSelect
                v-model:value="item.value"
                :options="pkOptions"
                placeholder="请选择PK规则"
                class="flex-1 bg-white"
              />
            </div>
          </div>
        </div>
      </NGridItem>
    </NGrid>
  </div>
</template>
