<template>
  <UCard>
    <template #header>
      <h2 class="text-xl font-bold">{{ secIdx }}. 宴会竞标大屏</h2>
      <p class="text-muted text-sm">
        自研竞标展示系统，全马首创，适用于宴会、活动、庆典等场合，具备实时竞标显示功能。
      </p>
    </template>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
      <UCheckbox
        v-model="orderState.biddingSystem"
        label="订阅服务"
        description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
      />

      <UCheckbox
        v-model="orderState.biddingSystemProvideImage"
        label="提供照片？"
        description="活动方将发送标品图片给予本工作室"
        :class="[orderState.biddingSystem ? '' : 'opacity-0']"
        :disabled="!orderState.biddingSystem"
      />

      <UFormField
        name="estimatedBidItemCount"
        label="标品数量预估"
        :class="[orderState.biddingSystem ? '' : 'opacity-0']"
      >
        <USelect
          v-model="orderState.estimatedBidItemCount"
          :items="itemCountRanges"
          placeholder="请选择预估数量区间"
          :class="['w-full']"
          :disabled="!orderState.biddingSystem"
        />
      </UFormField>
    </div>
  </UCard>
</template>

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

const secIdx = ref(++sectionIndex.value);

const itemCountRanges = Array.from({ length: 4 }, (_, i) => {
  const start = 10 + i * 10;
  const end = start + 10;
  return { label: `${start} ~ ${end}`, value: `${start}-${end}` };
});
</script>

<style></style>
