<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="tree-demo-scroll xtf-page-scroll" direction="vertical">
    <view class="tree-demo-page xtf-page-scroll-content">
      <view class="tree-demo-hero">
        <text class="tree-demo-kicker">XTF LINKUI / COMPONENTS</text>
        <text class="tree-demo-title">Tree</text>
        <text class="tree-demo-intro">展开、搜索、级联选择与字段映射。</text>
      </view>

      <view class="tree-demo-section">
        <view class="tree-demo-heading-row">
          <text class="tree-demo-heading">基本展开、搜索与事件</text>
          <button class="tree-demo-action" @tap="resetBasic">重置</button>
        </view>
        <text class="tree-demo-desc">点击节点或展开箭头，输入关键词观察事件回显。</text>
        <XtfTree v-model="basicValue" :data="basicData" :default-expanded-keys="['warehouse', 'inbound']" filterable search-placeholder="搜索业务节点" max-height="520rpx"
          @node-click="recordEvent('节点点击')" @node-expand="recordEvent('节点展开')" @node-collapse="recordEvent('节点收起')" @search="recordSearch" />
        <text class="tree-demo-result">当前选择：{{ valueText(basicValue) }}</text>
        <text class="tree-demo-event">最近事件：{{ basicEvent }}</text>
      </view>

      <view class="tree-demo-section">
        <view class="tree-demo-heading-row">
          <text class="tree-demo-heading">级联多选与最大数量</text>
          <button class="tree-demo-action" @tap="resetCascade">重置</button>
        </view>
        <text class="tree-demo-desc">勾选父节点会联动子节点，最多选择 3 项。</text>
        <XtfTree v-model="cascadeValue" :data="permissionData" checkbox multiple :max-selectable="3" default-expand-all max-height="520rpx" @check-change="recordCheck('级联勾选', $event)" />
        <text class="tree-demo-result">已选 {{ cascadeValue.length.toString() }}/3：{{ valueText(cascadeValue) }}</text>
        <text class="tree-demo-event">最近事件：{{ cascadeEvent }}</text>
      </view>

      <view class="tree-demo-section">
        <view class="tree-demo-heading-row">
          <text class="tree-demo-heading">严格勾选</text>
          <button class="tree-demo-action" @tap="resetStrict">重置</button>
        </view>
        <text class="tree-demo-desc">checkStrictly 让父节点和叶子节点独立选中，不做级联。</text>
        <XtfTree v-model="strictValue" :data="permissionData" checkbox multiple check-strictly default-expand-all max-height="520rpx" @check-change="recordCheck('严格勾选', $event)" />
        <text class="tree-demo-result">当前选择：{{ valueText(strictValue) }}</text>
        <text class="tree-demo-event">最近事件：{{ strictEvent }}</text>
      </view>

      <view class="tree-demo-section">
        <view class="tree-demo-heading-row">
          <text class="tree-demo-heading">单选仅叶子与禁用节点</text>
          <button class="tree-demo-action" @tap="resetLeaf">重置</button>
        </view>
        <text class="tree-demo-desc">父节点不可选，标记为禁用的节点也不会响应点击。</text>
        <XtfTree v-model="leafValue" :data="leafData" only-leaf-selectable :disabled-key="'disabled'" default-expand-all max-height="520rpx" @node-click="recordLeafClick" />
        <text class="tree-demo-result">当前叶子：{{ valueText(leafValue) }}</text>
        <text class="tree-demo-event">最近事件：{{ leafEvent }}</text>
      </view>

      <view class="tree-demo-section">
        <view class="tree-demo-heading-row">
          <text class="tree-demo-heading">自定义字段映射</text>
          <button class="tree-demo-action" @tap="resetCustom">重置</button>
        </view>
        <text class="tree-demo-desc">使用 name、code、nodes、blocked 映射组件默认字段。</text>
        <XtfTree v-model="customValue" :data="customData" checkbox multiple :children-key="'nodes'" :label-key="'name'" :value-key="'code'" :disabled-key="'blocked'" default-expand-all max-height="520rpx" @check-change="recordCheck('字段映射勾选', $event)" />
        <text class="tree-demo-result">当前编码：{{ valueText(customValue) }}</text>
        <text class="tree-demo-event">最近事件：{{ customEvent }}</text>
      </view>
    </view>
  </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
import XtfConfigProvider from '@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfTree from "@/uni_modules/xtf-linkuiunix/components/xtf-tree/xtf-tree.uvue"

const basicValue = ref([] as Array<any>)
const cascadeValue = ref(["stock-low"] as Array<any>)
const strictValue = ref(["permission"] as Array<any>)
const leafValue = ref(["shelf-check"] as Array<any>)
const customValue = ref(["food"] as Array<any>)
const basicEvent = ref("等待操作")
const cascadeEvent = ref("等待操作")
const strictEvent = ref("等待操作")
const leafEvent = ref("等待操作")
const customEvent = ref("等待操作")

const basicData = [
  { id: "warehouse", label: "仓储中心", children: [{ id: "stock", label: "库存管理" }, { id: "inbound", label: "入库管理", children: [{ id: "check", label: "上架确认" }, { id: "shelf", label: "货架分配" }] }] },
  { id: "operation", label: "运营中心", children: [{ id: "campaign", label: "活动管理" }, { id: "customer", label: "客户管理" }] }
] as Array<any>

const permissionData = [
  { id: "inventory", label: "库存权限", children: [{ id: "stock-low", label: "低库存预警" }, { id: "stock-edit", label: "库存调整" }] },
  { id: "permission", label: "权限中心", children: [{ id: "role", label: "角色管理" }, { id: "account", label: "账号管理" }] }
] as Array<any>

const leafData = [
  { id: "inbound", label: "入库作业", children: [{ id: "arrival", label: "到货登记" }, { id: "shelf-check", label: "上架确认" }, { id: "quality", label: "质检作业", disabled: true }] },
  { id: "delivery", label: "配送作业", children: [{ id: "handover", label: "骑手交接" }, { id: "proof", label: "签收回传", disabled: true }] }
] as Array<any>

const customData = [
  { name: "支出", code: "expense", nodes: [{ name: "餐饮", code: "food" }, { name: "交通", code: "traffic", blocked: true }] },
  { name: "收入", code: "income", nodes: [{ name: "工资", code: "salary" }, { name: "奖金", code: "bonus" }] }
] as Array<any>

function valueText(values: Array<any>): string { return values.length > 0 ? values.join("、") : "未选择" }
function recordEvent(name: string): void { basicEvent.value = name }
function recordSearch(keyword: string): void { basicEvent.value = keyword.length > 0 ? "搜索：" + keyword : "搜索已清空" }
function recordCheck(name: string, payload: any): void {
  if (name == "级联勾选") cascadeEvent.value = name + "：" + (payload.checked ? "选中" : "取消")
  if (name == "严格勾选") strictEvent.value = name + "：" + (payload.checked ? "选中" : "取消")
  if (name == "字段映射勾选") customEvent.value = name + "：" + (payload.checked ? "选中" : "取消")
}
function recordLeafClick(node: any): void { leafEvent.value = "点击：" + node.label }
function resetBasic(): void { basicValue.value = []; basicEvent.value = "已重置" }
function resetCascade(): void { cascadeValue.value = ["stock-low"]; cascadeEvent.value = "已重置" }
function resetStrict(): void { strictValue.value = ["permission"]; strictEvent.value = "已重置" }
function resetLeaf(): void { leafValue.value = ["shelf-check"]; leafEvent.value = "已重置" }
function resetCustom(): void { customValue.value = ["food"]; customEvent.value = "已重置" }
</script>

<style>
.tree-demo-scroll { flex: 1; width: 100%; }
.tree-demo-page { display: flex; flex-direction: column; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.tree-demo-hero { display: flex; flex-direction: column; padding: 30rpx; border-radius: 16rpx; background-color: #7c3aed; }
.tree-demo-kicker { color: #ede9fe; font-size: 22rpx; }
.tree-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 48rpx; font-weight: 700; }
.tree-demo-intro { margin-top: 10rpx; color: #ffffff; font-size: 22rpx; }
.tree-demo-section { display: flex; flex-direction: column; margin-top: 18rpx; padding: 22rpx; border-radius: 14rpx; background-color: var(--xtf-color-surface, #ffffff); }
.tree-demo-heading-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 10rpx; }
.tree-demo-heading { flex: 1; color: var(--xtf-color-text, #0f172a); font-size: 28rpx; font-weight: 700; }
.tree-demo-action { width: 112rpx; height: 54rpx; margin: 0; padding: 0; border-width: 1rpx; border-style: solid; border-color: #c4b5fd; border-radius: 8rpx; background-color: var(--xtf-color-surface, #ffffff); color: #6d28d9; font-size: 22rpx; line-height: 52rpx; }
.tree-demo-desc { margin-bottom: 14rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; line-height: 32rpx; }
.tree-demo-result { margin-top: 14rpx; color: #7c3aed; font-size: 23rpx; line-height: 34rpx; }
.tree-demo-event { margin-top: 6rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 21rpx; line-height: 30rpx; }
</style>
