<script setup lang="ts">
import { NCard, NDatePicker, NForm, NFormItemGi, NGrid, NInput, NInputNumber } from 'naive-ui'
import { reactive, useTemplateRef } from 'vue'

const formRef = useTemplateRef('formRef')

const formData = reactive({
  name: '阅读之星年度总决赛',
  startTime: null,
  endTime: null,
  groupCount: 40,
  teamCount: 4,
})

defineExpose({
  formRef,
  formData,
})
</script>

<template>
  <NCard :bordered="false" class="rounded-xl shadow-sm">
    <div class="mb-4 flex items-center gap-2 border-l-4 border-blue-600 pl-3">
      <span class="text-base font-bold">基础活动信息</span>
    </div>

    <NForm ref="formRef" label-placement="top" :show-feedback="false">
      <NGrid :x-gap="24" :y-gap="24" cols="1 s:2 m:4 l:5" responsive="screen">
        <NFormItemGi span="1" label="比赛名称">
          <NInput v-model:value="formData.name" placeholder="请输入比赛名称" />
        </NFormItemGi>

        <NFormItemGi label="开始时间">
          <NDatePicker
            v-model:value="formData.startTime" type="datetime" clearable class="w-full"
            placeholder="年 / 月 / 日 --:--"
          />
        </NFormItemGi>

        <NFormItemGi label="结束时间">
          <NDatePicker
            v-model:value="formData.endTime" type="datetime" clearable class="w-full"
            placeholder="年 / 月 / 日 --:--"
          />
        </NFormItemGi>

        <NFormItemGi label="小组总数">
          <NInputNumber v-model:value="formData.groupCount" class="w-full" />
        </NFormItemGi>

        <NFormItemGi label="单组队伍">
          <NInputNumber v-model:value="formData.teamCount" class="w-full" />
        </NFormItemGi>
      </NGrid>
    </NForm>
  </NCard>
</template>
