<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" :safe-area="true"><scroll-view class="checkbox-demo-scroll xtf-page-scroll" direction="vertical"><view class="checkbox-demo-page xtf-safe-bottom xtf-page-scroll-content">
    <view class="checkbox-demo-hero"><XtfText class="checkbox-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="checkbox-demo-title" level="display" color="inverse" text="Checkbox" /><XtfText class="checkbox-demo-intro" level="caption" color="inverse" text="单项选择、三态状态与丰富内容插槽。" /></view>
    <view class="checkbox-demo-section"><XtfText class="checkbox-demo-title-small" level="h3" text="基础与三态" /><view class="checkbox-demo-spacing"><XtfCheckbox label="默认未选中" :checked="basic" @change="basic = $event === true" /></view><view class="checkbox-demo-spacing"><XtfCheckbox label="默认选中" :checked="true" theme="success" /></view><view class="checkbox-demo-spacing"><XtfCheckbox label="部分选择" indeterminate theme="warning" /></view><view class="checkbox-demo-spacing"><XtfCheckbox label="禁用状态" disabled /></view></view>
    <view class="checkbox-demo-section"><XtfText class="checkbox-demo-title-small" level="h3" text="变体、尺寸与形状" /><view class="checkbox-demo-spacing"><XtfCheckbox label="Soft card" variant="soft" check-animation="fade" block /></view><view class="checkbox-demo-spacing"><XtfCheckbox label="Button circle" variant="button" shape="circle" size="sm" check-animation="flip" checked-icon="success" block /></view><view class="checkbox-demo-spacing"><XtfCheckbox label="Large bordered" bordered size="lg" check-animation="bounce" checked-icon="success" block /></view></view>
    <view class="checkbox-demo-section"><XtfText class="checkbox-demo-title-small" level="h3" text="标签描述与作用域插槽" /><view class="checkbox-demo-spacing"><XtfCheckbox label="带描述的选项" description="描述文本会跟随选中状态展示。" variant="card" block><template #icon="slot"><text class="demo-slot-icon">{{ slot.indeterminate ? '-' : slot.checked ? '!' : '+' }}</text></template></XtfCheckbox></view><view class="checkbox-demo-spacing"><XtfCheckbox variant="tile" block><template #default><text class="demo-slot-label">自定义默认 label</text></template><template #description><text class="demo-slot-description">自定义 description 插槽</text></template></XtfCheckbox></view></view>
    <view class="checkbox-demo-section"><XtfText class="checkbox-demo-title-small" level="h3" text="事件与 beforeChange" /><view class="checkbox-demo-spacing"><XtfCheckbox label="受控事件计数" :checked="eventChecked" :before-change="confirmChange" @change="handleChange" /></view><view class="checkbox-demo-spacing"><XtfText class="checkbox-demo-note" level="caption" color="secondary" :text="'Change events: ' + changeCount.toString()" /></view></view>
    <view class="checkbox-demo-section"><XtfText class="checkbox-demo-title-small" level="h3" text="分组、限制与全选" /><view class="checkbox-demo-spacing"><XtfCheckboxGroup ref="rolesRef" v-model="selectedRoles" :options="roleOptions" direction="row" :max="2" @reach-max="groupMessage = '最多选择 2 项'" @change="groupMessage = '已选 ' + $event.length.toString() + ' 项'" /></view><view class="checkbox-demo-spacing"><XtfCheckbox label="全选角色" :checked="rolesAll" :indeterminate="selectedRoles.length > 0 && !rolesAll" @change="toggleAllRoles" /></view><view class="checkbox-demo-spacing"><XtfText class="checkbox-demo-note" level="caption" color="secondary" :text="groupMessage" /></view></view>
    <view class="checkbox-demo-section"><XtfText class="checkbox-demo-title-small" level="h3" text="插槽子项分组" /><view class="checkbox-demo-spacing"><XtfCheckboxGroup v-model="selectedScopes" direction="column" theme="success" :max="2"><XtfCheckbox name="read" label="读取数据" description="允许查看业务数据" /><XtfCheckbox name="write" label="写入数据" description="允许创建和修改记录" /><XtfCheckbox name="delete" label="删除数据" description="超过选择上限时不可再选" /></XtfCheckboxGroup></view><view class="checkbox-demo-spacing"><XtfText class="checkbox-demo-note" level="caption" color="secondary" :text="'已选权限：' + selectedScopes.join('、')" /></view></view>

    <view class="checkbox-demo-section"><XtfText level="h3" text="01 Options 动态禁用与自定义字段" />
      <view class="checkbox-demo-spacing"><XtfCheckbox v-model="optionsDisabled" label="禁用整个 Options 分组" /></view><view class="checkbox-demo-spacing"><XtfCheckbox v-model="optionLocked" label="禁用编号 0" /></view>
      <view class="checkbox-demo-spacing"><XtfCheckboxGroup ref="optionsRef" v-model="optionValues" :options="customOptions" option-label-key="title" option-value-key="id" option-disabled-key="locked" :disabled="optionsDisabled" @input="record('options input', $event)" @update:modelValue="record('options model', $event)" @update:value="record('options value', $event)" @change="record('options change', $event)" /></view>
      <text class="checkbox-demo-value checkbox-demo-spacing">{{ JSON.stringify(optionValues) }}</text>
      <view class="checkbox-demo-actions"><button class="checkbox-demo-button" @click="runBatch('options', true)">全选</button><button class="checkbox-demo-button" @click="runBatch('options', false)">清空可用项</button><button class="checkbox-demo-button" @click="invertOptions">反选可用项</button></view>
    </view>
    <view class="checkbox-demo-section"><XtfText level="h3" text="02 Slot 动态禁用与组属性继承" />
      <view class="checkbox-demo-spacing"><XtfCheckbox v-model="slotsDisabled" label="禁用整个 Slot 分组" /></view><view class="checkbox-demo-spacing"><XtfCheckbox v-model="slotLocked" label="禁用写入权限" /></view><view class="checkbox-demo-spacing"><XtfCheckbox v-model="alternateStyle" label="切换颜色、尺寸与形状" /></view>
      <view class="checkbox-demo-spacing"><XtfCheckboxGroup ref="slotsRef" v-model="slotValues" :disabled="slotsDisabled" :active-color="alternateStyle ? '#be185d' : '#15803d'" :size="alternateStyle ? 'lg' : 'sm'" :shape="alternateStyle ? 'circle' : 'square'" :icon-size="alternateStyle ? 28 : 16" :variant="alternateStyle ? 'card' : 'default'" @change="record('slot change', $event)"><XtfCheckbox name="read" label="读取" checked-icon="success" /><XtfCheckbox name="write" label="写入" :disabled="slotLocked" checked-icon="success" /><XtfCheckbox name="delete" label="删除" /></XtfCheckboxGroup></view>
      <text class="checkbox-demo-value checkbox-demo-spacing">{{ JSON.stringify(slotValues) }}</text><view class="checkbox-demo-actions"><button class="checkbox-demo-button" @click="runBatch('slot', true)">全选</button><button class="checkbox-demo-button" @click="runBatch('slot', false)">清空可用项</button></view>
    </view>
    <view class="checkbox-demo-section"><XtfText level="h3" text="03 单项 0 / false 与外观" />
      <view class="checkbox-demo-spacing"><XtfCheckbox v-model="scalarValue" :true-value="0" :false-value="false" label="选中 0，未选中 false" color="#b45309" size="lg" icon-position="right" align="start" bordered :icon-size="26" :custom-style="{ padding: '24rpx' }" @change="record('scalar change', $event)" /></view>
      <view class="checkbox-demo-spacing"><XtfCheckbox label="仅图标可点击" :label-clickable="false" active-color="#be185d" shape="circle" /></view><text class="checkbox-demo-value checkbox-demo-spacing">{{ JSON.stringify(scalarValue) }}</text>
    </view>
    <view class="checkbox-demo-section"><XtfText level="h3" text="04 暴露方法与选择限制" />
      <view class="checkbox-demo-spacing"><XtfCheckboxGroup ref="limitsRef" v-model="limitedValues" :options="['A', 'B', 'C']" :min="1" :max="2" @reach-min="record('reach-min', $event)" @reach-max="record('reach-max', $event)" @change="record('limits change', $event)" /></view>
      <view class="checkbox-demo-actions"><button class="checkbox-demo-button" @click="runBatch('limits', true)">全选</button><button class="checkbox-demo-button" @click="runBatch('limits', false)">清空</button><button class="checkbox-demo-button" @click="addB">updateValue B</button></view><text class="checkbox-demo-value checkbox-demo-spacing">{{ JSON.stringify(limitedValues) }}</text>
    </view>
    <view class="checkbox-demo-section"><XtfText level="h3" text="05 异步允许、拒绝与异常" />
      <view class="checkbox-demo-spacing"><XtfCheckboxGroup v-model="asyncMode" :options="['允许', '拒绝', '异常']" :max="1" direction="row" /></view><view class="checkbox-demo-spacing"><XtfCheckbox v-model="asyncDisabled" label="禁用异步组" /></view>
      <view class="checkbox-demo-spacing"><XtfCheckbox v-model="asyncSingle" label="单项异步" :before-change="asyncGuard" :disabled="asyncDisabled" @change="record('async single change', $event)" /></view>
      <view class="checkbox-demo-spacing"><XtfCheckboxGroup ref="asyncRef" v-model="asyncValues" :options="['慢速 A', '快速 B']" :disabled="asyncDisabled" :before-change="asyncGuard" @change="record('async group change', $event)" /></view>
      <view class="checkbox-demo-actions"><button class="checkbox-demo-button" @click="runBatch('async', true)">异步全选</button><button class="checkbox-demo-button" @click="runBatch('async', false)">异步清空</button></view><text class="checkbox-demo-value checkbox-demo-spacing">{{ JSON.stringify(asyncValues) }}</text><text class="checkbox-demo-value checkbox-demo-spacing">{{ asyncStatus }}</text>
    </view>
    <view class="checkbox-demo-section"><XtfText level="h3" text="06 外部回填、重置与事件" /><view class="checkbox-demo-actions"><button class="checkbox-demo-button" @click="fillValues">外部回填</button><button class="checkbox-demo-button" @click="resetValues">重置</button><button class="checkbox-demo-button" @click="events = []">清除事件</button></view><text v-for="(event, index) in events" :key="index" class="checkbox-demo-event checkbox-demo-spacing">{{ event }}</text></view>
  </view></scroll-view></XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, nextTick, 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 XtfCheckbox from "@/uni_modules/xtf-linkuiunix/components/xtf-checkbox/xtf-checkbox.uvue"
import XtfCheckboxGroup from "@/uni_modules/xtf-linkuiunix/components/xtf-checkbox-group/xtf-checkbox-group.uvue"
type GroupApi = { updateValue: (value: any, checked: boolean) => Promise<boolean>; checkAll: (checked: boolean, values?: any[]) => Promise<boolean> }
const rolesRef = ref<GroupApi | null>(null); const optionsRef = ref<GroupApi | null>(null); const slotsRef = ref<GroupApi | null>(null); const limitsRef = ref<GroupApi | null>(null); const asyncRef = ref<GroupApi | null>(null)
const basic = ref(false); const eventChecked = ref(false); const changeCount = ref(0)
const selectedRoles = ref(["editor"] as any[]); const selectedScopes = ref(["read"] as any[]); const groupMessage = ref("已选 1 项")
const roleOptions = [{ label: "管理员", value: "admin" }, { label: "编辑", value: "editor" }, { label: "访客", value: "guest", disabled: true }]
const rolesAll = computed((): boolean => selectedRoles.value.indexOf("admin") >= 0 && selectedRoles.value.indexOf("editor") >= 0)
const optionsDisabled = ref(false); const optionLocked = ref(false); const optionValues = ref([false, "locked"] as any[])
const customOptions = computed(() => [{ title: "编号 0", id: 0, locked: optionLocked.value }, { title: "布尔 false", id: false }, { title: "普通项", id: "normal" }, { title: "禁用且已选", id: "locked", locked: true }])
const slotsDisabled = ref(false); const slotLocked = ref(true); const alternateStyle = ref(false); const slotValues = ref(["write"] as any[])
const scalarValue = ref<any>(false); const limitedValues = ref(["A"] as any[])
const asyncMode = ref(["允许"] as any[]); const asyncDisabled = ref(false); const asyncSingle = ref(false); const asyncValues = ref([] as any[]); const asyncStatus = ref("待操作")
const events = ref([] as string[])
function record(name: string, value: any): void { events.value = [name + ': ' + JSON.stringify(value)].concat(events.value).slice(0, 16) }
function handleChange(value: any): void { eventChecked.value = value === true; changeCount.value += 1 }
function confirmChange(payload: UTSJSONObject): boolean { return payload["nextChecked"] === true || eventChecked.value }
async function toggleAllRoles(checked: any): Promise<void> { if (rolesRef.value != null) await rolesRef.value.checkAll(checked === true) }
async function runBatch(target: string, checked: boolean): Promise<void> { const api = target == 'options' ? optionsRef.value : target == 'slot' ? slotsRef.value : target == 'limits' ? limitsRef.value : asyncRef.value; if (api != null) record(target + ' checkAll result', await api.checkAll(checked)) }
async function invertOptions(): Promise<void> { const current = optionValues.value.slice(); const source = customOptions.value.filter((option) => option.locked !== true).map((option) => option.id); for (const value of source) { if (optionsRef.value != null) record('invert result', await optionsRef.value.updateValue(value, current.indexOf(value) < 0)); await nextTick() } }
async function addB(): Promise<void> { if (limitsRef.value != null) record('updateValue result', await limitsRef.value.updateValue('B', true)) }
function asyncGuard(payload: UTSJSONObject): Promise<boolean> { const mode = asyncMode.value[0]; const delay = payload['value'] === '快速 B' ? 250 : 900; asyncStatus.value = '等待 ' + delay.toString() + 'ms'; return new Promise<boolean>((resolve, reject) => { setTimeout(() => { asyncStatus.value = mode == '允许' ? '允许' : mode == '异常' ? 'Promise reject' : '拒绝'; record('beforeChange', asyncStatus.value); if (mode == '异常') reject(new Error('Demo beforeChange rejected')); else resolve(mode == '允许') }, delay) }) }
function fillValues(): void { optionValues.value = [0, false, 'locked']; slotValues.value = ['read', 'write']; scalarValue.value = 0; limitedValues.value = ['A', 'B']; asyncValues.value = ['快速 B']; asyncSingle.value = true; record('外部回填', optionValues.value) }
function resetValues(): void { basic.value = false; eventChecked.value = false; changeCount.value = 0; selectedRoles.value = ['editor']; selectedScopes.value = ['read']; optionValues.value = [false, 'locked']; slotValues.value = ['write']; scalarValue.value = false; limitedValues.value = ['A']; asyncValues.value = []; asyncSingle.value = false; record('外部重置', optionValues.value) }
</script>
<style>
.checkbox-demo-scroll { flex: 1; width: 100%; height: 100%; }
.checkbox-demo-page { display: flex; flex-direction: column; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.checkbox-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }
.checkbox-demo-kicker { color: #ffffff; font-size: 20rpx; }
.checkbox-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }
.checkbox-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }
.checkbox-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); }
.checkbox-demo-spacing { margin-top: 16rpx; }
.checkbox-demo-title-small { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; margin-bottom: 8rpx; }
.checkbox-demo-note { margin-top: 8rpx; }
.demo-slot-icon { color: #ffffff; font-size: 22rpx; font-weight: 700; }
.demo-slot-label { color: var(--xtf-color-text, #172033); font-size: 28rpx; font-weight: 700; }
.demo-slot-description { color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; }
.checkbox-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin: 10rpx -6rpx -6rpx; }
.checkbox-demo-button { margin: 6rpx; font-size: 24rpx; }
.checkbox-demo-value { font-size: 24rpx; color: var(--xtf-color-text-secondary, #334155); }
.checkbox-demo-event { font-size: 22rpx; color: var(--xtf-color-text-secondary, #475569); word-break: break-all; }
</style>
