<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="lab-scroll" direction="vertical"><view class="lab-page">
      <view class="lab-header"><text class="lab-eyebrow">XTF LINKUI / SETTINGS</text><text class="lab-title">Cell</text></view>
      <view class="lab-section">
        <text class="lab-heading">账户资料</text>
        <XtfCellGroup :radius="12" :inset="24">
          <XtfCell title="用户名" value="林风" :radius="0" divider />
          <XtfCell title="手机号" value="138****8888" desc="已完成实名认证" icon="account_circle" :radius="0" divider />
          <XtfCell title="通知设置" desc="账单提醒与系统消息" icon="notifications" :radius="0" arrow clickable @click="record('通知设置已打开')" />
        </XtfCellGroup>
      </view>
      <view class="lab-section">
        <text class="lab-heading">消息与同步</text>
        <XtfCellGroup :radius="12">
          <XtfCell title="系统通知" :value="unread.toString() + ' 条未读'" :badge="{ value: unread, theme: 'danger', variant: 'solid' }" :radius="0" clickable arrow @click="readMessages" />
          <XtfCell title="同步状态" :value-tag="statusTag" :radius="0" tone="success" accent />
          <XtfCell title="账单导出" extra="CSV" right-icon="download" :radius="0" clickable @click="record('账单已生成')" />
        </XtfCellGroup>
      </view>
      <view class="lab-section">
        <text class="lab-heading">自动同步</text>
        <XtfCell ref="syncCell" v-model:checked="syncEnabled" title="自动同步" desc="打开应用时检查最新账单" switchable :disabled="syncLocked" :radius="12" @change="changeSync" @switch-change="switchEvents++" @cell-click="cellClicks++" />
        <view class="lab-row"><text class="lab-label">锁定设置</text><switch :checked="syncLocked" @change="syncLocked = $event.detail.value" /></view>
        <view class="lab-tools"><button class="lab-button lab-button-secondary" @click="syncCell?.toggleSwitch()">切换同步</button></view>
        <text class="lab-result">{{ (syncEnabled ? '已开启' : '已关闭') + ' · 更新 ' + changes.toString() + ' · 开关事件 ' + switchEvents.toString() + ' · 行点击 ' + cellClicks.toString() }}</text>
      </view>
      <view class="lab-section">
        <text class="lab-heading">信息与排列</text>
        <XtfCell title="账户头像" thumb="/static/logo.png" thumb-shape="circle" thumb-ring desc="林风的个人账户" size="lg" :radius="12" />
        <XtfCell title="联系邮箱" value="monthly-billing-notifications@example.com" desc="每月发送汇总账单" :title-width="180" :radius="12" required />
        <picker :range="alignLabels" @change="alignIndex = Number($event.detail.value)"><view class="lab-row"><text class="lab-label">状态位置</text><text class="lab-status">{{ alignLabels[alignIndex] }}</text></view></picker>
        <XtfCell title="待审核账单" desc="家庭账户本月的共同支出，等待管理员核对金额和凭证后确认入账。" value="待处理" :side-align="alignValues[alignIndex]" variant="soft" :radius="12" />
      </view>
      <view class="lab-section">
        <text class="lab-heading">导航与自定义内容</text>
        <XtfCell title="查看 Button Demo" url="/pages/components/xtf-button/index" :radius="12" />
        <XtfCell title="自定义内容" clickable :selected="selected" :radius="12" @click="selected = !selected"><template #title><text class="cell-slot-title">家庭账本</text></template><template #value><text class="cell-slot-value">{{ selected ? '已选中' : '未选中' }}</text></template><template #footer><text class="cell-slot-note">与家庭成员共享每月收支</text></template></XtfCell>
        <XtfCell title="不可用项目" disabled clickable value="暂不可用" :radius="12" @click="record('错误：禁用项目被触发')" />
      </view>
      <text class="lab-result">{{ message }}</text>
    </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 XtfCell from "../../../uni_modules/xtf-linkuiunix/components/xtf-cell/xtf-cell.uvue"
import XtfCellGroup from "../../../uni_modules/xtf-linkuiunix/components/xtf-cell-group/xtf-cell-group.uvue"
const syncCell = ref<{ toggleSwitch: () => void } | null>(null)
const syncEnabled = ref(true)
const syncLocked = ref(false)
const changes = ref(0)
const switchEvents = ref(0)
const cellClicks = ref(0)
const unread = ref(3)
const selected = ref(true)
const alignIndex = ref(2)
const alignLabels = ["顶部", "居中", "底部"]
const alignValues = ["start", "center", "end"]
const message = ref("等待交互")
const statusTag = { text: "已完成", theme: "success", variant: "soft", shape: "round" }
function record(value: string): void { message.value = value }
function readMessages(): void { unread.value = 0; record("全部通知已读") }
function changeSync(value: boolean): void { changes.value++; message.value = value ? "自动同步已开启" : "自动同步已关闭" }
</script>
<style>
@import "../../../uni_modules/xtf-linkuiunix/theme/index.css";
@import "../demo-workbench.css";
.cell-slot-title { color: var(--xtf-color-text, #242d2c); font-size: 28rpx; font-weight: 600; }
.cell-slot-value { color: #17796b; font-size: 25rpx; }
.cell-slot-note { margin-top: 10rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; }
</style>
