<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="cascader-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="cascader-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="cascader-demo-hero">
          <text class="cascader-demo-kicker">XTF LINKUI / COMPONENTS</text>
          <text class="cascader-demo-title">Cascader</text>
          <text class="cascader-demo-intro">逐层定位分类，支持搜索、受控弹层与确认式多选。</text>
        </view>

        <view class="cascader-demo-section">
          <text class="cascader-demo-section-title">单选完整路径</text>
          <text class="cascader-demo-section-desc">选择叶子节点后提交省、市、区三级值。</text>
          <XtfCascader v-model="singleValue" title="选择地区" placeholder="请选择所在地区" closeable :options="regionOptions" @finish="record('单选路径已提交')" />
          <text class="cascader-demo-result">{{ valueText(singleValue) }}</text>
        </view>

        <view class="cascader-demo-section">
          <text class="cascader-demo-section-title">受控 show</text>
          <text class="cascader-demo-section-desc">外部按钮控制无字段触发器的弹层显示状态。</text>
          <XtfButton label="打开受控级联" type="outline" block @click="controlledVisible = true" />
          <XtfCascader v-model="controlledValue" :show="controlledVisible" :use-field="false" title="受控选择" closeable :options="regionOptions" @update:show="controlledVisible = $event" @close="record('受控弹层已关闭')" />
          <text class="cascader-demo-result">{{ valueText(controlledValue) }}</text>
        </view>

        <view class="cascader-demo-section">
          <text class="cascader-demo-section-title">搜索当前层</text>
          <text class="cascader-demo-section-desc">关键词只过滤当前页签对应的同级选项。</text>
          <XtfCascader v-model="searchValue" title="搜索地区" filterable filter-placeholder="搜索当前地区" closeable :options="regionOptions" />
        </view>

        <view class="cascader-demo-section">
          <text class="cascader-demo-section-title">自定义字段</text>
          <text class="cascader-demo-section-desc">通过 fieldNames 映射 name、code 和 nodes。</text>
          <XtfCascader v-model="customValue" title="选择业务分类" :options="customOptions" :field-names="customFieldNames" :disabled-values="['traffic']" closeable active-color="#0f766e" />
          <text class="cascader-demo-result">{{ valueText(customValue) }}</text>
        </view>

        <view class="cascader-demo-section">
          <view class="cascader-demo-heading-row">
            <view class="cascader-demo-heading-copy">
              <text class="cascader-demo-section-title">多选叶子节点</text>
              <text class="cascader-demo-section-desc">已初始化两个值，确认前仅更新草稿。</text>
            </view>
            <text class="cascader-demo-count">{{ multiValue.length.toString() }} 项</text>
          </view>
          <XtfCascader v-model="multiValue" title="选择配送区域" multiple show-actions filterable closeable :options="regionOptions" @change="record('多选草稿已变化')" @finish="record('多选结果已确认')" />
          <text class="cascader-demo-result">{{ valueText(multiValue) }}</text>
        </view>

        <view class="cascader-demo-section">
          <text class="cascader-demo-section-title">严格多选</text>
          <text class="cascader-demo-section-desc">checkStrictly 允许在当前层勾选任意父节点或叶子节点。</text>
          <XtfCascader v-model="strictValue" title="选择关注区域" multiple check-strictly show-actions closeable :options="regionOptions" @finish="record('严格多选已确认')" />
          <text class="cascader-demo-result">{{ valueText(strictValue) }}</text>
        </view>

        <view class="cascader-demo-log"><text class="cascader-demo-log-text">{{ eventLog }}</text></view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

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

type DemoValue = string | number
type DemoFieldNames = { text?: string; value?: string; children?: string }

const singleValue = ref(["zhejiang", "hangzhou", "xihu"] as DemoValue[])
const controlledValue = ref([] as DemoValue[])
const searchValue = ref([] as DemoValue[])
const customValue = ref(["expense", "food"] as DemoValue[])
const multiValue = ref(["xihu", "nanshan"] as DemoValue[])
const strictValue = ref(["zhejiang"] as DemoValue[])
const controlledVisible = ref(false)
const eventLog = ref("等待操作")
const customFieldNames: DemoFieldNames = { text: "name", value: "code", children: "nodes" }

const regionOptions = [
  { text: "浙江省", value: "zhejiang", children: [
    { text: "杭州市", value: "hangzhou", children: [{ text: "西湖区", value: "xihu" }, { text: "滨江区", value: "binjiang" }] },
    { text: "宁波市", value: "ningbo", children: [{ text: "海曙区", value: "haishu" }, { text: "鄞州区", value: "yinzhou" }] }
  ] },
  { text: "广东省", value: "guangdong", children: [
    { text: "深圳市", value: "shenzhen", children: [{ text: "南山区", value: "nanshan" }, { text: "福田区", value: "futian" }] },
    { text: "广州市", value: "guangzhou", children: [{ text: "天河区", value: "tianhe" }, { text: "越秀区", value: "yuexiu" }] }
  ] }
] as UTSJSONObject[]

const customOptions = [
  { name: "支出", code: "expense", nodes: [{ name: "餐饮", code: "food" }, { name: "交通", code: "traffic" }] },
  { name: "收入", code: "income", nodes: [{ name: "工资", code: "salary" }, { name: "奖金", code: "bonus" }] }
] as UTSJSONObject[]

function valueText(values: DemoValue[]): string { return values.length > 0 ? values.join(" / ") : "尚未选择" }
function record(message: string): void { eventLog.value = message }
</script>

<style>
.cascader-demo-scroll { flex: 1; width: 100%; min-height: 0; }
.cascader-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx 24rpx 36rpx; background-color: var(--xtf-color-page, #f8fafc); }
.cascader-demo-hero { display: flex; flex-direction: column; padding: 30rpx 26rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.cascader-demo-kicker { color: #ffffff; font-size: 19rpx; font-weight: 700; }
.cascader-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 48rpx; font-weight: 700; line-height: 1.1; }
.cascader-demo-intro { margin-top: 12rpx; color: #ffffff; font-size: 23rpx; line-height: 1.45; opacity: 0.88; }
.cascader-demo-section { display: flex; flex-direction: column; margin-top: 18rpx; padding: 22rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 14rpx; background-color: var(--xtf-color-surface, #ffffff); }
.cascader-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 28rpx; font-weight: 700; }
.cascader-demo-section-desc { margin-top: 7rpx; margin-bottom: 18rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 21rpx; line-height: 1.45; }
.cascader-demo-result { margin-top: 14rpx; color: var(--xtf-color-primary, #2563eb); font-size: 22rpx; line-height: 1.4; }
.cascader-demo-heading-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; }
.cascader-demo-heading-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cascader-demo-count { flex-shrink: 0; margin-left: 14rpx; padding: 8rpx 12rpx; border-radius: 999rpx; background-color: var(--xtf-color-primary-soft, #dbeafe); color: var(--xtf-color-primary, #2563eb); font-size: 20rpx; font-weight: 700; }
.cascader-demo-log { display: flex; flex-direction: row; margin-top: 18rpx; padding: 18rpx; border-radius: 10rpx; background-color: var(--xtf-color-primary-soft, #dbeafe); }
.cascader-demo-log-text { color: var(--xtf-color-primary, #2563eb); font-size: 22rpx; }
</style>
