<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
    <scroll-view class="picker-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="picker-demo-page xtf-page-scroll-content">
        <view class="picker-demo-hero"><text class="picker-demo-title">Picker</text><text class="picker-demo-intro">单列、多列与级联选择</text></view>
        <view id="picker-single" class="picker-demo-section">
          <text class="picker-demo-heading">单列弹层</text>
          <XtfPicker :value="priority" label="优先级" :columns="priorityColumns" required @input="setPriority" @change="recordChange" @confirm="recordConfirm" @cancel="recordCancel" @update:selected="recordSelected" @update:validated="recordValidated" />
          <text id="picker-single-value" class="picker-demo-result">当前值：{{ priority }}</text>
        </view>
        <view id="picker-inline" class="picker-demo-section">
          <text class="picker-demo-heading">静态多列 · Inline</text>
          <XtfPicker :value="schedule" mode="inline" :columns="scheduleColumns" :column-titles="['年份', '月份']" @input="setSchedule" @change="recordChange" @update:selected="recordSelected" />
          <text class="picker-demo-result">当前值：{{ schedule.join(' / ') }}</text>
        </view>
        <view id="picker-cascade" class="picker-demo-section">
          <text class="picker-demo-heading">三层级联 · 实例方法</text>
          <XtfPicker ref="areaPicker" :value="area" title="服务区域" :columns="areaColumns" :column-titles="['区域', '城市', '区县']" @input="setArea" @change="recordChange" @confirm="recordConfirm" @cancel="recordCancel" @update:selected="recordSelected" />
          <view class="picker-demo-actions">
            <XtfButton id="picker-open" custom-class="picker-demo-action" label="打开区域选择" type="outline" @click="openArea" />
            <XtfButton id="picker-close" custom-class="picker-demo-action" label="关闭" type="ghost" @click="closeArea" />
            <XtfButton id="picker-confirm" custom-class="picker-demo-action" label="确认" @click="confirmArea" />
            <XtfButton id="picker-cancel" custom-class="picker-demo-action" label="取消" type="ghost" @click="cancelArea" />
          </view>
          <text id="picker-area-value" class="picker-demo-result">当前值：{{ area.join(' / ') }}</text>
        </view>
        <view id="picker-custom" class="picker-demo-section">
          <text class="picker-demo-heading">自定义字段 · Formatter</text>
          <XtfPicker :value="customValue" :columns="customColumns" value-key="code" label-key="name" children-key="nodes" :display-formatter="formatCustom" :column-titles="['团队', '成员']" @input="setCustom" @confirm="recordConfirm" @cancel="recordCancel" />
          <text class="picker-demo-result">当前值：{{ customValue.join(' / ') }}</text>
        </view>
        <view id="picker-empty" class="picker-demo-section">
          <text class="picker-demo-heading">空数据 · 全部禁用</text>
          <XtfPicker id="picker-empty-inline" mode="inline" :columns="[]" empty-text="暂无可用时段" />
          <XtfPicker id="picker-disabled" label="必填时段" required :columns="disabledColumns" empty-text="时段已全部停用" @confirm="recordConfirm" @cancel="recordCancel" />
          <XtfPicker id="picker-empty-optional" label="可选时段" :columns="[]" empty-text="暂无可选时段" @confirm="recordConfirm" @cancel="recordCancel" />
        </view>
        <view id="picker-async" class="picker-demo-section">
          <text class="picker-demo-heading">异步数据 · 外部回填</text>
          <XtfPicker :value="asyncValue" :columns="asyncColumns" :validate-on-init="false" empty-text="待加载门店" @input="setAsync" @change="recordChange" @confirm="recordConfirm" @cancel="recordCancel" @update:selected="recordSelected" @update:validated="recordValidated" />
          <view class="picker-demo-actions">
            <XtfButton id="picker-load" custom-class="picker-demo-action" :label="loading ? '加载中' : '加载门店'" :disabled="loading" @click="loadAsync" />
            <XtfButton id="picker-fill" custom-class="picker-demo-action" label="回填 B 店" type="outline" @click="fillAsync" />
            <XtfButton id="picker-replace" custom-class="picker-demo-action" label="停用 B 店" type="outline" @click="replaceAsync" />
            <XtfButton id="picker-clear" custom-class="picker-demo-action" label="清空数据" type="ghost" @click="clearAsync" />
          </view>
          <text id="picker-async-value" class="picker-demo-result">当前值：{{ asyncValue }}</text>
        </view>
        <view class="picker-demo-section">
          <text class="picker-demo-heading">叶子与分支混合</text>
          <XtfPicker id="picker-mixed" :value="mixedValue" :columns="mixedColumns" required :mask-top-style="maskString ? 'background:linear-gradient(#eff6ff, transparent)' : { backgroundColor: '#eff6ff', opacity: 0.8 }" :mask-bottom-style="{ backgroundColor: '#f0fdf4' }" @input="mixedValue = $event" @confirm="mixedEvent = JSON.stringify($event)" @cancel="mixedEvent = 'cancel ' + JSON.stringify($event)" />
          <view class="picker-demo-actions">
            <XtfButton id="picker-mixed-leaf" label="回填叶子 0" type="outline" @click="mixedValue = [0]" />
            <XtfButton id="picker-mixed-branch" label="回填分支 字符串0 / false" type="outline" @click="mixedValue = ['0', false]" />
            <XtfButton id="picker-mask-toggle" label="切换 mask 字符串/对象" type="ghost" @click="maskString = !maskString" />
          </view>
          <text id="picker-mixed-result" class="picker-demo-result">{{ JSON.stringify(mixedValue) }}</text>
          <text id="picker-mixed-event" class="picker-demo-event">{{ mixedEvent }}</text>
          <XtfPicker id="picker-mixed-inline" mode="inline" :value="mixedValue" :columns="mixedColumns" :mask-top-style="{ backgroundColor: '#eff6ff' }" mask-bottom-style="background:linear-gradient(transparent, #eff6ff)" @input="mixedValue = $event" />
          <text id="picker-mask-status" class="picker-demo-result">mask：{{ maskString ? '字符串' : '对象' }}；Web 不支持显示，原生效果待真机验证。</text>
        </view>
        <view id="picker-events" class="picker-demo-section">
          <text class="picker-demo-heading">类型身份与滚轮尺寸</text>
          <XtfPicker id="picker-identity" :value="identityValue" :columns="identityColumns" mode="inline" :wheel-item-height="largeWheel ? 110 : 72" :column-height="largeWheel ? 440 : 288" :option-custom-style="{ backgroundColor: '#f8fafc' }" :active-option-custom-style="{ backgroundColor: '#dbeafe' }" @input="identityValue = $event" />
          <XtfButton id="picker-resize" label="切换滚轮尺寸" type="outline" @click="largeWheel = !largeWheel" />
          <text id="picker-identity-result" class="picker-demo-result">{{ typeof identityValue }}：{{ JSON.stringify(identityValue) }}</text>
          <text class="picker-demo-heading">事件记录</text>
          <text v-for="(entry, index) in events" :key="index" class="picker-demo-event">{{ entry }}</text>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

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

const priority = ref("normal")
const identityValue = ref<any>("0")
const mixedValue = ref<any[]>([0])
const mixedEvent = ref("")
const maskString = ref(false)
const mixedColumns = [{ label: "独立叶子 0", value: 0 }, { label: "分支 字符串0", value: "0", children: [{ label: "子叶 false", value: false }, { label: "子叶 0", value: 0 }] }] as any[]
const largeWheel = ref(false)
const identityColumns = [{ label: "数字 0", value: 0 }, { label: "字符串 0", value: "0" }, { label: "布尔 false", value: false }] as any[]
const schedule = ref([2026, 9] as any[])
const area = ref(["east", "sh", "pudong"] as any[])
const customValue = ref(["dev", "lin"] as any[])
const asyncValue = ref("b")
const asyncColumns = ref<any[]>([])
const loading = ref(false)
const events = ref<string[]>([])
const areaPicker = ref<any>(null)
let loadTimer = 0
const priorityColumns = [{ label: "普通", value: "normal" }, { label: "紧急", value: "urgent" }, { label: "已禁用", value: "disabled", disabled: true }] as any[]
const scheduleColumns = [[{ label: "2026 年", value: 2026 }, { label: "2027 年", value: 2027 }], [{ label: "9 月", value: 9 }, { label: "10 月", value: 10 }]] as any[]
const areaColumns = [
  { label: "华东", value: "east", children: [
    { label: "上海", value: "sh", children: [{ label: "浦东", value: "pudong" }, { label: "徐汇", value: "xuhui" }] },
    { label: "杭州", value: "hz", children: [{ label: "西湖", value: "xihu" }] }
  ] },
  { label: "华南", value: "south", children: [
    { label: "广州", value: "gz", children: [{ label: "天河", value: "tianhe" }] },
    { label: "深圳", value: "sz", children: [{ label: "南山", value: "nanshan" }] }
  ] }
] as any[]
const customColumns = [{ name: "研发", code: "dev", nodes: [{ name: "小林", code: "lin" }, { name: "小陈", code: "chen" }] }, { name: "运营", code: "ops", nodes: [{ name: "小王", code: "wang" }] }] as any[]
const disabledColumns = [{ label: "上午（停用）", value: "am", disabled: true }, { label: "下午（停用）", value: "pm", disabled: true }] as any[]
function setPriority(value: any): void { priority.value = value as string; record("input", value) }
function setSchedule(value: any): void { schedule.value = value as any[]; record("input", value) }
function setArea(value: any): void { area.value = value as any[]; record("input", value) }
function setCustom(value: any): void { customValue.value = value as any[]; record("input", value) }
function setAsync(value: any): void { asyncValue.value = value as string; record("input", value) }
function record(name: string, data: any): void { events.value = [name + " " + JSON.stringify(data), ...events.value].slice(0, 12) }
function recordChange(data: any): void { record("change", data) }
function recordConfirm(data: any): void { record("confirm", data) }
function recordCancel(data: any): void { record("cancel", data) }
function recordSelected(data: any): void { record("update:selected", data) }
function recordValidated(data: any): void { record("update:validated", data) }
function formatCustom(data: UTSJSONObject): string { return (data["labels"] as string[]).join(" · ") + "（负责人）" }
function openArea(): void { areaPicker.value?.open() }
function closeArea(): void { areaPicker.value?.close() }
function confirmArea(): void { areaPicker.value?.confirm() }
function cancelArea(): void { areaPicker.value?.cancel() }
function loadAsync(): void {
  if (loading.value) return
  loading.value = true
  loadTimer = setTimeout(() => {
    asyncColumns.value = [{ label: "A 店", value: "a" }, { label: "B 店", value: "b" }]
    loading.value = false
  }, 600)
}
function fillAsync(): void { asyncValue.value = "b" }
function replaceAsync(): void { asyncColumns.value = [{ label: "A 店", value: "a" }, { label: "B 店（停用）", value: "b", disabled: true }] }
function clearAsync(): void { clearTimeout(loadTimer); loading.value = false; asyncColumns.value = [] }
onUnmounted(() => { clearTimeout(loadTimer) })
</script>

<style>
.picker-demo-scroll { display: flex; flex: 1; flex-direction: column; width: 100%; }
.picker-demo-page { display: flex; flex-direction: column; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.picker-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #2563eb; }
.picker-demo-title { color: #ffffff; font-size: 52rpx; font-weight: 700; }
.picker-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }
.picker-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); }
.picker-demo-heading { margin-bottom: 20rpx; color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 600; }
.picker-demo-result { margin-top: 18rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.picker-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 16rpx; }
.picker-demo-action { margin-right: 12rpx; margin-bottom: 12rpx; }
.picker-demo-event { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; word-break: break-all; }
</style>
