<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-2 gap-4">
      <UCheckbox
        v-model="orderState.backgroundDesign"
        label="需要"
        description="默认按 1920 × 1080 交付，可增配动效"
      />

      <Transition name="fade">
        <div
          v-if="orderState.backgroundDesign"
          :class="['grid', 'grid-cols-1', 'gap-4']"
        >
          <UFormField name="backgroundType" label="类型">
            <URadioGroup
              v-model="orderState.backgroundType"
              color="primary"
              variant="table"
              default-value="static"
              :items="backgroundTypeSelection"
              orientation="horizontal"
            />
          </UFormField>
          <div class="flex gap-4">
            <UFormField
              label="宽"
              name="backgroundWidthOverride"
              class="flex-1"
            >
              <UInput
                type="number"
                v-model="orderState.backgroundWidthOverride"
                placeholder="1920"
                class="w-full"
              />
            </UFormField>
            <span class="text-2xl">×</span>
            <UFormField
              label="高"
              name="backgroundHeightOverride"
              class="flex-1"
            >
              <UInput
                type="number"
                v-model="orderState.backgroundHeightOverride"
                placeholder="1080"
                class="w-full"
              />
            </UFormField>
          </div>
        </div>
      </Transition>
    </div>
  </UCard>
</template>

<script lang="ts" setup>
import type { RadioGroupItem } from "@nuxt/ui";

const { sectionIndex, orderState } = useEventOrder();

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

const backgroundTypeSelection = ref<RadioGroupItem[]>([
  { label: "静态", value: "static" },
  {
    label: "动效",
    value: "dynamic",
    description: "适配现场屏幕规格，含基础动效",
  },
]);
</script>

<style></style>
