<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="demo-scroll" direction="vertical">
    <view class="demo-page">
      <view class="demo-section">
        <text class="demo-title">单选：仓配作业节点</text>
        <XtfTreeSelect v-model="singleValue" title="作业分类" :options="singleOptions"
          @change="recordEvent('单选 change', $event)" @click-nav="recordEvent('单选 click-nav', $event)"
          @click-selected="recordEvent('单选 click-selected', $event)" />
        <text class="demo-value">当前选择：{{ singleValue || '未选择' }}</text>
      </view>
      <view class="demo-section">
        <text class="demo-title">多选：库存预警规则</text>
        <XtfTreeSelect v-model="multipleValue" title="预警类型" multiple :options="multipleOptions"
          @change="recordEvent('多选 change', $event)" @click-nav="recordEvent('多选 click-nav', $event)"
          @click-selected="recordEvent('多选 click-selected', $event)" />
        <text class="demo-value">已选规则：{{ multipleValue.length > 0 ? multipleValue.join('、') : '未选择' }}</text>
      </view>
      <view class="demo-section">
        <text class="demo-title">自定义左右项样式</text>
        <XtfTreeSelect v-model="serviceValue" title="服务渠道" :options="serviceOptions"
          :nav-item-style="navStyle" :nav-active-item-style="navActiveStyle"
          :item-style="itemStyle" :selected-item-style="selectedStyle"
          @change="recordEvent('样式示例 change', $event)" @click-nav="recordEvent('样式示例 click-nav', $event)"
          @click-selected="recordEvent('样式示例 click-selected', $event)" />
        <text class="demo-value">当前渠道：{{ serviceValue || '未选择' }}</text>
      </view>
      <view class="demo-section">
        <text class="demo-title">事件回显</text>
        <text class="demo-event">{{ eventName }}</text>
        <text class="demo-log">{{ eventLog }}</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 XtfTreeSelect from '@/uni_modules/xtf-linkuiunix/components/xtf-tree-select/xtf-tree-select.uvue'

const singleValue = ref('shelf-check')
const multipleValue = ref<string[]>(['low-stock', 'expiry-soon'])
const serviceValue = ref('wechat-service')
const eventName = ref('暂无事件')
const eventLog = ref('')

const singleOptions = [
  { text: '入库处理', value: 'inbound', children: [
    { text: '到货登记', value: 'arrival' },
    { text: '上架确认', value: 'shelf-check' },
    { text: '质检作业', value: 'quality', children: [
      { text: '常规质检', value: 'regular', children: [
        { text: '外观检查', value: 'appearance' },
        { text: '数量核验', value: 'quantity' }
      ] },
      { text: '异常复核', value: 'recheck', children: [
        { text: '破损复核', value: 'damage' },
        { text: '批次复核', value: 'batch' }
      ] }
    ] },
    { text: '退货入库', value: 'return', disabled: true }
  ] },
  { text: '库内作业', value: 'warehouse', children: [
    { text: '库存盘点', value: 'stocktake' },
    { text: '库位调整', value: 'relocation' }
  ] },
  { text: '配送履约', value: 'delivery', children: [
    { text: '骑手交接', value: 'handover' },
    { text: '签收回传', value: 'proof-delivery' }
  ] },
  { text: '暂停作业', value: 'paused', disabled: true },
  { text: '其他作业', value: 'other' }
] as any[]

const multipleOptions = [
  { text: '库存风险', value: 'stock', children: [
    { text: '低库存', value: 'low-stock' },
    { text: '滞销积压', value: 'slow-moving' },
    { text: '缺货预警', value: 'out-of-stock' },
    { text: '安全库存', value: 'safety-stock', disabled: true }
  ] },
  { text: '效期风险', value: 'expiry', children: [
    { text: '临期预警', value: 'expiry-soon' },
    { text: '过期商品', value: 'expired' }
  ] },
  { text: '履约风险', value: 'fulfillment', children: [
    { text: '配送超时', value: 'delay' },
    { text: '订单异常', value: 'order-error' }
  ] }
] as any[]

const serviceOptions = [
  { text: '在线服务', value: 'online', children: [
    { text: '小程序客服', value: 'wechat-service' },
    { text: '网页工单', value: 'web-ticket' },
    { text: '智能问答', value: 'bot' }
  ] },
  { text: '电话服务', value: 'phone', children: [
    { text: '客服热线', value: 'hotline' },
    { text: '预约回访', value: 'callback' }
  ] },
  { text: '主动触达', value: 'outreach', children: [
    { text: '站内通知', value: 'notice' },
    { text: '短信提醒', value: 'sms' }
  ] }
] as any[]

const navStyle = { backgroundColor: '#f0f9ff', color: '#475569' }
const navActiveStyle = { backgroundColor: '#e0f2fe', color: '#0369a1', fontWeight: '700' }
const itemStyle = 'margin: 6rpx 10rpx; border: 1rpx solid #dbe4ee; border-radius: 6rpx; color: #334155;'
const selectedStyle = { backgroundColor: '#ecfdf5', borderColor: '#22c55e', color: '#15803d' }

function recordEvent(name: string, payload: any): void {
  eventName.value = name
  eventLog.value = JSON.stringify(payload, null, 2) ?? ''
}
</script>

<style>
.demo-scroll { flex: 1; width: 100%; background-color: var(--xtf-color-page, #fcf8ff); }
.demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; }
.demo-section { display: flex; flex-direction: column; margin-bottom: 32rpx; }
.demo-title { margin-bottom: 20rpx; color: var(--xtf-color-text, #1b1b23); font-size: 30rpx; font-weight: 700; }
.demo-value { margin-top: 16rpx; color: var(--xtf-color-text-secondary, #464554); font-size: 24rpx; line-height: 36rpx; }
.demo-event { color: #6366f1; font-size: 24rpx; }
.demo-log { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #464554); font-size: 22rpx; line-height: 34rpx; white-space: pre-wrap; }
</style>
