<template>
  <UCard>
    <template #header>
      <h2 class="text-xl font-bold">{{ secIdx }}. 流程 PPT 设计</h2>
    </template>

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

      <UFormField
        name="backgroundSourceProvided"
        label="是否提供背景设计稿？"
        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
      >
        <USwitch
          v-model="orderState.backgroundSourceProvided"
          :label="
            orderState.backgroundSourceProvided
              ? '我将提供背景图片'
              : '需要重新临摹设计'
          "
          :description="
            orderState.backgroundSourceProvided
              ? '活动方将发送背景设计稿给予本工作室'
              : '需要工作室重新设计背景图'
          "
          :disabled="!orderState.flowBackgroundDesign"
          required
        />
      </UFormField>

      <UFormField
        name="pptDesignQty"
        label="标品数量预估"
        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
      >
        <UInput
        type="number"
          v-model="orderState.pptDesignQty"
          placeholder="请选择预估数量区间"
          :class="['w-full']"
          :disabled="!orderState.flowBackgroundDesign"
        />
      </UFormField>
    </div>

    <template #footer>
      <p class="text-muted text-sm">
        包含基础排版与动画，可额外购买内容编排服务（另计）
      </p>
    </template>
  </UCard>
</template>

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

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

<style></style>
