<template>
  <UCard>
    <template #header>
      <h2 class="text-xl font-bold">{{ secIdx }}. 流程 / 投影 PPT</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.flowBackgroundDesign" label="需要" />

      <Transition name="fade">
        <UFormField
          v-if="orderState.flowBackgroundDesign"
          name="backgroundSourceProvided"
          label="背景素材（原设计稿）"
        >
          <USwitch
            v-model="orderState.backgroundSourceProvided"
            :label="
              orderState.backgroundSourceProvided
                ? '客户已提供素材'
                : '需要我们准备素材'
            "
            :description="
              orderState.backgroundSourceProvided
                ? '我们会规范与适配投影比例'
                : '包含底图搜集/选型'
            "
            required
            :disabled="orderState.backgroundDesign"
          />
        </UFormField>
      </Transition>

      <Transition name="fade">
        <UFormField
          v-if="orderState.flowBackgroundDesign"
          name="pptDesignQty"
          label="页数"
        >
          <UInput
            type="number"
            v-model="orderState.pptDesignQty"
            placeholder="请输入页数"
            :class="['w-full']"
            min="1"
            max="20"
          />
        </UFormField>
      </Transition>
    </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);

watch(
  () => orderState.backgroundDesign,
  (newVal) => {
    if (newVal) {
      orderState.backgroundSourceProvided = false;
    }
  }
);
</script>

<style></style>
