<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">
      <UCheckbox
        v-model="orderState.biddingSystem"
        label="需要"
        description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
      />

      <Transition name="fade">
        <USwitch
          v-if="orderState.biddingSystem"
          v-model="orderState.biddingSystemProvideImage"
          :label="
            orderState.biddingSystemProvideImage ? '素材自备' : '请求拍摄'
          "
          :description="
            orderState.biddingSystemProvideImage
              ? '您提供图片（我们进行后处理）'
              : '我们需要到您单位去拍摄标品'
          "
        />
      </Transition>

      <Transition name="fade">
        <UFormField
          v-if="orderState.biddingSystem"
          name="estimatedBidItemCount"
          label="估算件数"
          description="不影响计价"
        >
          <USelect
            v-model="orderState.estimatedBidItemCount"
            :items="itemCountRanges"
            placeholder="请选择件数区间"
            :class="['w-full']"
          />
        </UFormField>
      </Transition>
    </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>
