<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme"><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">LAYOUT</text><text class="demo-title">Cell Group</text><text class="demo-intro">以标题、说明和底部提示组织设置列表。</text></view>
    <view class="demo-section"><XtfCellGroup eyebrow="ACCOUNT" title="账户与安全" desc="管理个人资料与登录方式" note="修改后会同步到当前设备" variant="card" :inset="32"><XtfCell title="个人资料" value="已完成" icon="home" arrow divider clickable @click="record('个人资料')" /><XtfCell title="消息通知" desc="订单和活动提醒" switchable :checked="notification" divider @update:checked="notification = $event" /><XtfCell title="登录设备" value="2 台" icon="info" arrow clickable @click="record('登录设备')" /></XtfCellGroup></view>
    <view class="demo-section"><XtfCellGroup title="业务状态" variant="soft" :radius="20"><XtfCell title="审核中" value-tag="处理中" tone="warning" accent divider /><XtfCell title="库存预警" value="12 件" value-color="danger" tone="danger" accent /></XtfCellGroup><text class="demo-state">最后操作: {{ action }}</text></view>
    <view class="demo-section">
      <button id="basic-cell-group-slot" @click="customHeader = !customHeader">切换标题插槽</button>
      <button id="basic-cell-group-inset" @click="inset = inset == 24 ? 0 : 24">切换分隔线缩进</button>
      <XtfCellGroup id="basic-cell-group" title="默认标题" :inset="inset" gap="12px" body-class="basic-cell-body">
        <template v-if="customHeader" #header><text class="demo-state">家庭账本 · 自定义标题</text></template>
        <XtfCell title="月度预算" value="3000 元" divider />
        <XtfCell title="收支提醒" v-model:checked="notification" switchable />
        <template #footer><text class="demo-state">提醒{{ notification ? '已开启' : '已关闭' }} · inset={{ inset }}</text></template>
      </XtfCellGroup>
    </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 XtfCellGroup from "@/uni_modules/xtf-linkuiunix/components/xtf-cell-group/xtf-cell-group.uvue"
import XtfCell from "@/uni_modules/xtf-linkuiunix/components/xtf-cell/xtf-cell.uvue"
const notification = ref(true)
const customHeader = ref(false), inset = ref(24)
const action = ref("等待操作")
function record(value: string): void { action.value = value }
</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: #0369a1; }.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; }.demo-state { margin-top: 18rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 23rpx; }
</style>
