<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" :component-size="size" :disabled="disabled">
    <scroll-view class="demo-scroll xtf-page-scroll" direction="vertical"><view class="demo-page xtf-page-scroll-content">
      <view class="demo-hero"><text class="demo-kicker">FOUNDATION</text><text class="demo-title">Config Provider</text><text class="demo-intro">为子组件统一提供主题、尺寸和禁用状态。</text></view>
      <view class="demo-section"><text class="demo-heading">主题</text><view class="demo-row"><XtfButton label="Light" size="sm" :type="theme == 'light' ? 'solid' : 'outline'" @click="theme = 'light'" /><XtfButton class="demo-gap" label="Dark" size="sm" :type="theme == 'dark' ? 'solid' : 'outline'" @click="theme = 'dark'" /><XtfButton class="demo-gap" label="Neo" size="sm" :type="theme == 'neo' ? 'solid' : 'outline'" @click="theme = 'neo'" /></view></view>
      <view class="demo-section"><text class="demo-heading">组件尺寸与状态</text><view class="demo-row"><XtfButton label="Small" size="sm" :type="size == 'sm' ? 'solid' : 'outline'" @click="size = 'sm'" /><XtfButton class="demo-gap" label="Medium" size="sm" :type="size == 'md' ? 'solid' : 'outline'" @click="size = 'md'" /><XtfButton class="demo-gap" label="Large" size="sm" :type="size == 'lg' ? 'solid' : 'outline'" @click="size = 'lg'" /></view><XtfCell class="demo-cell" title="禁用子树" desc="Provider 会将禁用状态传递给支持该上下文的组件" switchable :checked="disabled" @update:checked="disabled = $event" /></view>
      <XtfConfigProvider :theme="theme" :component-size="size" :disabled="disabled" :theme-vars="themeVars" :custom-style="{ flex: 'none', height: 'auto' }">
      <view class="demo-section"><text class="demo-heading">当前上下文</text><view class="demo-preview"><XtfButton label="主要操作" /><XtfTag class="demo-tag" text="主题已应用" theme="success" variant="soft" /><text class="demo-status">{{ theme }} / {{ size }} / {{ disabled ? 'disabled' : 'enabled' }}</text></view></view>
      <view class="demo-section">
        <text class="demo-heading">嵌套作用域与默认操作</text>
        <button id="basic-provider-reset" @click="theme = 'light'; size = 'md'; disabled = false; english = false; actions = 0">恢复配置</button>
        <button id="basic-provider-locale" @click="english = !english">切换空状态语言</button>
        <XtfConfigProvider :theme="theme" :locale="english ? 'en-US' : 'zh-Hans'" :disabled="disabled" :component-size="size">
          <XtfEmpty id="basic-provider-empty" action-text="重新加载" :animated="false" @action="actions++" />
          <XtfResult id="basic-provider-result" status="success" primary-text="继续处理" :float="false" @primary-click="actions++" />
        </XtfConfigProvider>
        <XtfConfigProvider :theme="theme" :disabled="false" component-size="xs"><XtfButton id="basic-provider-inner" label="内层独立配置" @click="actions++" /></XtfConfigProvider>
        <text id="basic-provider-actions" class="demo-status">操作次数={{ actions }}</text>
      </view>
      </XtfConfigProvider>
    </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 XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfCell from "@/uni_modules/xtf-linkuiunix/components/xtf-cell/xtf-cell.uvue"
import XtfTag from "@/uni_modules/xtf-linkuiunix/components/xtf-tag/xtf-tag.uvue"
import XtfEmpty from "@/uni_modules/xtf-linkuiunix/components/xtf-empty/xtf-empty.uvue"
import XtfResult from "@/uni_modules/xtf-linkuiunix/components/xtf-result/xtf-result.uvue"
type ThemeMode = "light" | "dark" | "neo"
type SizeMode = "sm" | "md" | "lg"
const theme = ref<ThemeMode>("light")
const size = ref<SizeMode>("md")
const disabled = ref(false)
const english = ref(false), actions = ref(0)
const themeVars = { "--xtf-color-primary": "#2563eb", "--xtf-color-primary-soft": "#dbeafe" } as UTSJSONObject
</script>
<style>
.demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; }.demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }.demo-kicker, .demo-intro { color: #ffffff; font-size: 22rpx; }.demo-title { margin-top: 8rpx; color: #ffffff; font-size: 48rpx; font-weight: 700; }.demo-intro { margin-top: 12rpx; }.demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.demo-heading { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }.demo-row { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20rpx; }.demo-gap { margin-left: 12rpx; }.demo-cell { margin-top: 20rpx; }.demo-preview { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-top: 20rpx; }.demo-tag, .demo-status { margin-left: 14rpx; }.demo-status { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
</style>
