<template>
  <UCard>
    <template #header>
      <h2 class="text-xl font-bold">{{ secIdx }}. 您的活动信息</h2>
      <p class="text-muted text-sm">
        您提供的联系方式与活动信息仅用于沟通与履约，本工作室将妥善保护，不会未经同意向第三方公开或出售。
      </p>
    </template>

    <div class="grid gap-4">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <UFormField name="contactName" label="联络人姓名" required>
          <UInput v-model="orderState.contactName" class="w-full" />
        </UFormField>

        <UFormField name="contactNumber" label="联系方式（推荐 WhatsApp）">
          <div class="flex items-center gap-2">
            <UCheckbox
              v-model="orderState.isSameContact"
              label="当前手机号码？"
              class="whitespace-nowrap"
            />
            <UInput
              v-model="orderState.contactNumber"
              :disabled="orderState.isSameContact"
              :class="[
                'w-full transition-opacity duration-300',
                orderState.isSameContact ? 'opacity-0 pointer-events-none' : '',
              ]"
            />
          </div>
        </UFormField>
      </div>

      <!-- 活动信息 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <UFormField name="eventName" label="活动名称" required>
          <UInput
            v-model="orderState.eventName"
            class="w-full"
            placeholder="如果可能，请写上活动全名"
          />
        </UFormField>

        <UFormField name="eventDate" label="活动日期" required>
          <UInput type="date" v-model="orderState.eventDate" class="w-full" />
        </UFormField>

        <UFormField name="eventLocation" label="地点" required>
          <USelect
            v-model="orderState.eventLocation"
            :items="eventLocationItems"
            placeholder="请选择地点"
            class="w-full"
          />
        </UFormField>
      </div>
    </div>
  </UCard>
</template>

<script lang="ts" setup>
const { sectionIndex, orderState, eventLocationItems } = useEventOrder();

const secIdx = ref(++sectionIndex.value);
</script>

<style></style>
