<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
    <scroll-view class="demo-scroll" direction="vertical">
      <view id="tag-group-demo" class="demo-page">
        <text class="demo-title">Tag Group</text>
        <view class="demo-section">
          <text class="demo-heading">多选 items / active</text>
          <XtfTagGroup id="tag-group-items" :items="items" :active="active" @update:active="active = $event" @change="changed" />
          <text id="tag-group-items-state" class="demo-state">{{ state }}</text>
        </view>
        <view class="demo-section">
          <text class="demo-heading">单选子项</text>
          <XtfTagGroup id="tag-group-single" v-model="single" :multiple="false" @change="record('single', $event)">
            <XtfTagGroupItem value="new" text="最新" /><XtfTagGroupItem value="popular" text="热门" /><XtfTagGroupItem value="nearby" text="附近" />
          </XtfTagGroup>
          <text id="tag-group-single-state" class="demo-state">当前：{{ single }}</text>
        </view>
        <view class="demo-section">
          <text class="demo-heading">options / modelValue · 优先级与外部回填</text>
          <XtfTagGroup id="tag-group-options" ref="optionsGroup" v-model="selection" :active="['food']" :options="items" @change="record('options', $event)" />
          <text id="tag-group-options-state" class="demo-state">{{ JSON.stringify(selection) }}</text>
          <view class="demo-actions">
            <button id="tag-group-fill" class="demo-button" @click="selection = ['travel']; record('fill', selection)">回填出行</button>
            <button id="tag-group-reset" class="demo-button" @click="selection = []; record('reset', selection)">重置</button>
            <button id="tag-group-methods" class="demo-button" @click="readMethods">查询方法</button>
          </view>
        </view>
        <view class="demo-section">
          <text class="demo-heading">无绑定 · 连续选择</text>
          <XtfTagGroup id="tag-group-unbound" :options="items" @change="unbound = $event.values; record('unbound', $event)" />
          <text id="tag-group-unbound-state" class="demo-state">{{ JSON.stringify(unbound) }}</text>
        </view>
        <view class="demo-section">
          <text class="demo-heading">min 1 / max 2</text>
          <XtfTagGroup id="tag-group-limits" v-model="limited" :options="items" :min="1" :max="2" @change="record('limits-change', $event)" @selection-limit="record('selection-limit', $event)" @item-click="record('item-click', $event)" />
          <text id="tag-group-limits-state" class="demo-state">{{ JSON.stringify(limited) }}</text>
        </view>
        <view class="demo-section">
          <text class="demo-heading">disabled / checkable</text>
          <XtfTagGroup id="tag-group-disabled" :options="items" disabled closable @change="record('disabled-change', $event)" @delete="record('disabled-delete', $event)" />
          <XtfTagGroup id="tag-group-checkable" :options="checkableItems" :checkable="false" @change="record('checkable-change', $event)" @tag-click="record('tag-click', $event)" />
        </view>
        <view class="demo-section">
          <text class="demo-heading">删除选中 · min 不限制删除</text>
          <XtfTagGroup id="tag-group-delete" v-model="deletableSelected" :options="deletable" closable :min="1" @update:options="deletable = $event" @change="record('delete-change', $event)" @delete="record('delete', $event)" />
          <text id="tag-group-delete-state" class="demo-state">{{ JSON.stringify(deletableSelected) }}</text>
          <button id="tag-group-delete-restore" class="demo-button" @click="restoreDeleted">恢复标签和选择</button>
        </view>
        <view class="demo-section">
          <text class="demo-heading">插槽 selected / state / toggle / remove</text>
          <XtfTagGroup id="tag-group-slot" :key="slotVersion" v-model="slotSelected" closable :max="2" @change="record('slot-change', $event)" @delete="record('slot-delete', $event)" @selection-limit="record('slot-limit', $event)">
            <XtfTagGroupItem value="express" text="极速配送">
              <template #default="p">
                <view id="tag-group-slot-custom" class="demo-slot" :class="p.selected ? 'demo-slot-selected' : ''">
                  <text class="demo-state">{{ p.item.text }} · {{ p.selected ? '已选' : '未选' }}</text>
                  <text id="tag-group-slot-state" class="demo-state">{{ JSON.stringify(p.state) }}</text>
                  <view class="demo-actions"><button id="tag-group-slot-toggle" class="demo-button" @click="p.toggle">切换</button><button id="tag-group-slot-remove" class="demo-button" @click.stop="p.remove">删除</button></view>
                </view>
              </template>
            </XtfTagGroupItem>
            <XtfTagGroupItem :value="0" :text="0" /><XtfTagGroupItem :value="false" :label="false" />
            <XtfTagGroupItem value="locked" text="禁用子项" disabled />
            <XtfTagGroupItem value="display" text="不可选子项" :checkable="false" />
          </XtfTagGroup>
          <text id="tag-group-slot-values" class="demo-state">{{ JSON.stringify(slotSelected) }}</text>
          <button id="tag-group-slot-restore" class="demo-button" @click="slotVersion += 1; slotSelected = []">恢复插槽条目</button>
        </view>
        <view class="demo-section">
          <text class="demo-heading">事件日志</text>
          <button id="tag-group-clear-log" class="demo-button" @click="logs = []">清空日志</button>
          <text id="tag-group-log" class="demo-log">{{ logs.join('\n') }}</text>
        </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 XtfTagGroup from "@/uni_modules/xtf-linkuiunix/components/xtf-tag-group/xtf-tag-group.uvue"
import XtfTagGroupItem from "@/uni_modules/xtf-linkuiunix/components/xtf-tag-group-item/xtf-tag-group-item.uvue"
const items = [{ key: "food", value: "food", text: "餐饮" }, { key: "travel", value: "travel", text: "出行" }, { key: "shopping", value: "shopping", text: "购物" }, { key: "other", value: "other", text: "其他", disabled: true }] as Array<any>
const checkableItems = [{ value: "inherit", text: "继承不可选" }, { value: "override", text: "单项可选", checkable: true }, { value: "disabled", text: "禁用优先", checkable: true, disabled: true }] as Array<any>
const active = ref(["food"] as Array<any>)
const single = ref("new")
const state = ref("已选：餐饮")
const selection = ref(["travel"] as Array<any>)
const unbound = ref([] as Array<any>)
const limited = ref(["food"] as Array<any>)
const deletable = ref(items.slice(0, 3))
const deletableSelected = ref(["food"] as Array<any>)
const slotSelected = ref([] as Array<any>)
const slotVersion = ref(0)
const logs = ref([] as Array<string>)
const optionsGroup = ref<ComponentPublicInstance | null>(null)
function record(name: string, payload: any): void { const line = name + ": " + JSON.stringify(payload); logs.value = [line].concat(logs.value).slice(0, 20); console.log("[tag-group]", line) }
function changed(payload: any): void { state.value = "已选：" + payload.values.join("、"); record("items", payload) }
function restoreDeleted(): void { deletable.value = items.slice(0, 3); deletableSelected.value = ["food"]; record("restore", deletableSelected.value) }
function readMethods(): void {
  record("getTags", optionsGroup.value?.$callMethod("getTags"))
  record("getSelectedValues", optionsGroup.value?.$callMethod("getSelectedValues"))
  record("getSelectedTags", optionsGroup.value?.$callMethod("getSelectedTags"))
}
</script>
<style>
.demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.demo-page { display: flex; flex-direction: column; padding: 32rpx; background-color: var(--xtf-color-page, #f1f5f9); }
.demo-title { color: var(--xtf-color-text, #0f172a); font-size: 48rpx; font-weight: 700; }
.demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface, #ffffff); }
.demo-heading { margin-bottom: 16rpx; color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.demo-state { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 24rpx; word-break: break-all; }
.demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12rpx; }
.demo-button { margin: 12rpx 12rpx 0 0; padding: 8rpx 18rpx; font-size: 24rpx; color: #0f766e; background-color: #ecfdf5; }
.demo-slot { display: flex; flex-direction: column; flex-shrink: 1; padding: 16rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #94a3b8); border-radius: 8rpx; }
.demo-slot-selected { border-color: #059669; background-color: var(--xtf-color-surface-muted, #ecfdf5); }
.demo-log { color: var(--xtf-color-text-secondary, #334155); font-size: 22rpx; white-space: pre-wrap; word-break: break-all; }
</style>
