<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 &times; 1080。须和屏幕供应单位获取详细尺寸，确保展示无误。"
      />

      <div
        v-if="orderState.backgroundDesign"
        :class="['grid', 'grid-cols-1', 'gap-4']"
      >
        <UFormField name="backgroundType">
          <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">&times;</span>
          <UFormField
            label="屏高"
            name="backgroundHeightOverride"
            class="flex-1"
          >
            <UInput
              type="number"
              v-model="orderState.backgroundHeightOverride"
              placeholder="1080"
              class="w-full"
            />
          </UFormField>
        </div>
      </div>
    </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>
