<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" :safe-area="true">
    <scroll-view class="radio-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="radio-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="radio-demo-hero">
          <XtfText class="radio-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="radio-demo-title" level="display" color="inverse" text="Radio" />
          <XtfText class="radio-demo-intro" level="caption" color="inverse" text="单选项、配送方式和套餐方案的统一选择反馈。" />
        </view>
        <view class="radio-demo-section">
          <XtfText class="radio-demo-section-title" level="h3" text="独立单选" />
          <XtfRadio id="radio-accepted" v-model="accepted" label="接受服务条款" description="点击图标或文字都可以切换。" @update:modelValue="logEvent('accepted', 'update:modelValue', $event)" @input="logEvent('accepted', 'input', $event)" @change="handleAccepted" />
          <XtfText class="radio-demo-note" level="caption" color="secondary" :text="accepted ? '已接受' : '尚未接受'" />
        </view>
        <view class="radio-demo-section">
          <XtfText class="radio-demo-section-title" level="h3" text="分组与对象选项" />
          <XtfRadioGroup id="radio-shipping" v-model="shipping" :options="shippingOptions" direction="row" variant="button" active-color="#0f766e" @change="shippingMessage = '当前：' + $event.toString()" />
          <XtfText class="radio-demo-note" level="caption" color="secondary" :text="shippingMessage" />
        </view>
        <view class="radio-demo-section">
          <XtfText class="radio-demo-section-title" level="h3" text="内容插槽与卡片变体" />
          <XtfRadioGroup id="radio-plan" v-model="plan" variant="card" icon-position="right">
            <XtfRadio name="pro">
              <template #title><XtfText level="body" bold text="专业版" /></template>
              <template #description><XtfText level="caption" color="secondary" text="适合团队协作与多终端管理" /></template>
              <template #badge><XtfTag size="sm" text="推荐" theme="success" /></template>
              <template #extra><text class="radio-demo-business">每月 ¥99 · 含 5 个协作席位</text></template>
            </XtfRadio>
            <XtfRadio name="basic" label="基础版" description="适合个人快速开始" />
          </XtfRadioGroup>
        </view>
        <view class="radio-demo-section">
          <XtfText class="radio-demo-section-title" level="h3" text="动态分组" />
          <view class="radio-demo-control"><text class="radio-demo-control-label">禁用分组</text><switch id="radio-toggle-disabled" :checked="groupDisabled" @change="groupDisabled = $event.detail.value" /></view>
          <view class="radio-demo-control"><text class="radio-demo-control-label">横向排列</text><switch id="radio-toggle-direction" :checked="groupDirection == 'row'" @change="groupDirection = $event.detail.value ? 'row' : 'column'" /></view>
          <view class="radio-demo-control"><text class="radio-demo-control-label">卡片样式</text><switch id="radio-toggle-variant" :checked="groupVariant == 'card'" @change="groupVariant = $event.detail.value ? 'card' : 'default'" /></view>
          <view class="radio-demo-control"><text class="radio-demo-control-label">玫红选中色</text><switch id="radio-toggle-color" :checked="groupColor == '#be185d'" @change="groupColor = $event.detail.value ? '#be185d' : '#0f766e'" /></view>
          <view class="radio-demo-control"><text class="radio-demo-control-label">使用 activeColor</text><switch id="radio-toggle-active-color" :checked="useActiveColor" @change="useActiveColor = $event.detail.value" /></view>
          <view class="radio-demo-control"><text class="radio-demo-control-label">数值尺寸 48</text><switch id="radio-toggle-size" :checked="largeSize" @change="largeSize = $event.detail.value" /></view>
          <view class="radio-demo-control"><text class="radio-demo-control-label">加宽间距</text><switch id="radio-toggle-gap" :checked="wideGap" @change="wideGap = $event.detail.value" /></view>
          <view class="radio-demo-control"><text class="radio-demo-control-label">图标尺寸 56</text><switch id="radio-toggle-icon-size" :checked="largeIcon" @change="largeIcon = $event.detail.value" /></view>
          <XtfText class="radio-demo-subtitle" level="body" text="Options · 自定义字段" />
          <XtfRadioGroup id="radio-dynamic-options" v-model="optionValue" :options="customOptions" option-label-key="title" option-value-key="code" option-disabled-key="locked" :disabled="groupDisabled" :variant="groupVariant" :direction="groupDirection" :color="groupColor" :active-color="useActiveColor ? groupColor : ''" :size="largeSize ? 48 : 'md'" :icon-size="largeIcon ? 56 : ''" :gap="wideGap ? 36 : 12" :icon-gap="wideGap ? 24 : 10" @update:modelValue="logEvent('options', 'update:modelValue', $event)" @input="logEvent('options', 'input', $event)" @change="logEvent('options', 'change', $event)" />
          <text id="radio-options-value" class="radio-demo-value">{{ formatValue(optionValue) }}</text>
          <XtfText class="radio-demo-subtitle" level="body" text="Slot · 布尔值与数字值" />
          <XtfRadioGroup id="radio-dynamic-slot" v-model="slotValue" :disabled="groupDisabled" :variant="groupVariant" :direction="groupDirection" :color="groupColor" :active-color="useActiveColor ? groupColor : ''" :size="largeSize ? 48 : 'md'" :icon-size="largeIcon ? 56 : ''" :gap="wideGap ? 36 : 12" :icon-gap="wideGap ? 24 : 10" @update:modelValue="logEvent('slot', 'update:modelValue', $event)" @input="logEvent('slot', 'input', $event)" @change="logEvent('slot', 'change', $event)">
            <XtfRadio id="radio-slot-true" :name="true" label="自动续费" description="布尔 true" />
            <XtfRadio id="radio-slot-false" :name="false"><text class="radio-demo-business">手动续费</text><template #description><text class="radio-demo-business-note">布尔 false · 到期前发送提醒</text></template></XtfRadio>
            <XtfRadio id="radio-slot-zero" :name="0" label="免费试用" description="数字 0" />
            <XtfRadio id="radio-slot-locked" :name="2" label="企业专属" disabled />
          </XtfRadioGroup>
          <text id="radio-slot-value" class="radio-demo-value">{{ formatValue(slotValue) }}</text>
        </view>
        <view class="radio-demo-section">
          <XtfText class="radio-demo-section-title" level="h3" text="尺寸与局部覆盖" />
          <XtfRadio id="radio-size-number" v-model="sizeChecked" :size="48" label="数值 size 48" description="文字与图标按尺寸缩放" />
          <XtfRadio id="radio-size-string" :size="'48'" :icon-size="'60'" label="数字字符串 size 48 / iconSize 60" checked />
          <XtfRadio id="radio-size-unit" size="24px" icon-size="30px" label="带单位尺寸" checked />
          <XtfRadioGroup id="radio-icon-override" v-model="overrideValue" :icon-size="52" :size="44" variant="solid">
            <XtfRadio name="inherit" label="继承 group iconSize 52" />
            <XtfRadio name="override" :icon-size="32" label="局部 iconSize 32" />
          </XtfRadioGroup>
        </view>
        <view class="radio-demo-section">
          <view class="radio-demo-actions"><button id="radio-fill" class="radio-demo-action" size="mini" @click="fillValues">外部回填</button><button id="radio-reset" class="radio-demo-action" size="mini" @click="resetValues">重置</button><button id="radio-clear-log" class="radio-demo-action" size="mini" @click="eventLogs = []">清空日志</button></view>
          <text id="radio-event-count" class="radio-demo-value">事件数：{{ eventCount }}</text>
          <view id="radio-event-log" class="radio-demo-log"><text v-for="entry in eventLogs" :key="entry" class="radio-demo-log-line">{{ entry }}</text></view>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfTag from "@/uni_modules/xtf-linkuiunix/components/xtf-tag/xtf-tag.uvue"
import XtfRadio from "@/uni_modules/xtf-linkuiunix/components/xtf-radio/xtf-radio.uvue"
import XtfRadioGroup from "@/uni_modules/xtf-linkuiunix/components/xtf-radio-group/xtf-radio-group.uvue"
const accepted = ref(false)
const shipping = ref("express")
const plan = ref("pro")
const shippingMessage = ref("当前：express")
const shippingOptions = [{ label: "极速达", value: "express" }, { label: "到店自提", value: "pickup" }, { label: "暂不可用", value: "disabled", disabled: true }]
const customOptions = [{ title: "标准配送", code: 0, locked: false }, { title: "加急配送", code: 1, locked: false }, { title: "暂停配送", code: 2, locked: true }]
const optionValue = ref<any>(0)
const slotValue = ref<any>(true)
const overrideValue = ref("inherit")
const sizeChecked = ref(false)
const groupDisabled = ref(false)
const groupVariant = ref("default")
const groupDirection = ref("column")
const groupColor = ref("#0f766e")
const useActiveColor = ref(true)
const largeSize = ref(false)
const wideGap = ref(false)
const largeIcon = ref(false)
const eventLogs = ref([] as string[])
const eventCount = ref(0)
function formatValue(value: any): string { return typeof value + ": " + value.toString() }
function logEvent(source: string, event: string, value: any): void {
  eventCount.value += 1
  eventLogs.value.unshift(eventCount.value.toString() + " " + source + " " + event + " " + formatValue(value))
  if (eventLogs.value.length > 18) eventLogs.value.pop()
}
function handleAccepted(value: any): void { accepted.value = value == true; logEvent("accepted", "change", value) }
function fillValues(): void { accepted.value = true; shipping.value = "pickup"; shippingMessage.value = "当前：pickup"; plan.value = "basic"; optionValue.value = 1; slotValue.value = false; overrideValue.value = "override"; sizeChecked.value = true }
function resetValues(): void {
  accepted.value = false; shipping.value = "express"; shippingMessage.value = "当前：express"; plan.value = "pro"
  optionValue.value = 0; slotValue.value = true; overrideValue.value = "inherit"; sizeChecked.value = false
  groupDisabled.value = false; groupVariant.value = "default"; groupDirection.value = "column"; groupColor.value = "#0f766e"
  useActiveColor.value = true; largeSize.value = false; wideGap.value = false; largeIcon.value = false
  eventLogs.value = []; eventCount.value = 0
}
</script>
<style>
.radio-demo-scroll { flex: 1; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.radio-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.radio-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }
.radio-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.radio-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }
.radio-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }
.radio-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.radio-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; margin-bottom: 16rpx; }
.radio-demo-note { margin-top: 16rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; }
.radio-demo-control { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 80rpx; }
.radio-demo-control-label { flex: 1; color: var(--xtf-color-text-secondary, #334155); font-size: 26rpx; }
.radio-demo-subtitle { margin-top: 20rpx; margin-bottom: 16rpx; }
.radio-demo-business { color: var(--xtf-color-text, #172033); font-size: 26rpx; }
.radio-demo-business-note { color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; }
.radio-demo-value { margin-top: 12rpx; margin-bottom: 12rpx; color: #0f766e; font-size: 24rpx; }
.radio-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; }
.radio-demo-action { margin: 0 12rpx 12rpx 0; font-size: 24rpx; }
.radio-demo-log { display: flex; flex-direction: column; min-height: 48rpx; }
.radio-demo-log-line { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.6; }
</style>
