<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" :safe-area="true">
    <scroll-view class="breadcrumb-demo-scroll xtf-page-scroll" direction="vertical" :scroll-top="scrollTop">
      <view class="breadcrumb-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="breadcrumb-demo-hero"><XtfText class="breadcrumb-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="breadcrumb-demo-title" level="display" color="inverse" text="Breadcrumb" /><XtfText class="breadcrumb-demo-intro" level="caption" color="inverse" text="层级路径、折叠、横向滚动与导航反馈。" /></view>
        <view class="breadcrumb-demo-section"><XtfText class="breadcrumb-demo-section-title" level="h3" text="基础点击与图标" /><XtfBreadcrumb :items="productItems" show-home-icon separator-icon="more" @click="countClick" /><XtfBreadcrumb class="breadcrumb-demo-line" :items="productItems" separator="/" @click="countClick" /><XtfBreadcrumb class="breadcrumb-demo-line" :items="productItems" separator="→" @click="countClick" /></view>
        <view class="breadcrumb-demo-section"><XtfText class="breadcrumb-demo-section-title" level="h3" text="变体与尺寸" /><view class="breadcrumb-demo-stack"><XtfBreadcrumb :items="shortItems" size="sm" variant="plain" /><XtfBreadcrumb :items="shortItems" size="md" variant="soft" round /><XtfBreadcrumb :items="shortItems" size="lg" variant="pill" theme="success" /><XtfBreadcrumb :items="shortItems" variant="outline" theme="warning" /><XtfBreadcrumb :items="shortItems" variant="underline" theme="danger" /></view></view>
        <view class="breadcrumb-demo-section"><XtfText class="breadcrumb-demo-section-title" level="h3" text="省略策略" /><view class="breadcrumb-demo-stack"><XtfBreadcrumb :items="longItems" :max-count="3" ellipsis-mode="middle" ellipsis-text="More" @ellipsis-click="countEllipsis" @click="countClick" /><XtfBreadcrumb :items="longItems" :max-count="3" ellipsis-mode="start" theme="info" @ellipsis-click="countEllipsis" /><XtfBreadcrumb :items="longItems" :max-count="3" ellipsis-mode="end" theme="danger" @ellipsis-click="countEllipsis" /></view><XtfText class="breadcrumb-demo-count" level="caption" color="secondary" :text="eventText" /></view>
        <view class="breadcrumb-demo-section"><XtfText class="breadcrumb-demo-section-title" level="h3" text="项目状态" /><XtfBreadcrumb :items="stateItems" :max-count="0" variant="soft" separator="/" @click="countClick" /></view>
        <view class="breadcrumb-demo-section"><XtfText class="breadcrumb-demo-section-title" level="h3" text="长路径横向滚动" /><XtfBreadcrumb :items="scrollItems" :max-count="0" scrollable show-scrollbar separator-icon="chevron-right" @click="countClick" /></view>
        <view class="breadcrumb-demo-section"><XtfText class="breadcrumb-demo-section-title" level="h3" text="颜色覆盖与圆角" /><XtfBreadcrumb :items="shortItems" variant="outline" round active-color="#7c3aed" inactive-color="#64748b" separator-color="#a78bfa" background="#f3e8ff" border-color="#c4b5fd" :item-style="{ borderRadius: '9999rpx' }" /></view>
        <view class="breadcrumb-demo-section"><XtfText class="breadcrumb-demo-section-title" level="h3" text="自动导航" /><XtfText class="breadcrumb-demo-hint" level="caption" color="secondary" text="仅点击首项会跳转至已注册的 Button 示例页。" /><XtfBreadcrumb class="breadcrumb-demo-line" :items="navigationItems" auto-navigate separator="/" @click="countClick" @navigate="countNavigate" /></view>

        <view id="breadcrumb-scene-variant" class="breadcrumb-demo-section">
          <XtfText level="h3" text="动态变体与当前项对照" />
          <view class="breadcrumb-demo-controls">
            <picker id="breadcrumb-variant" :range="variants" :value="variantIndex" @change="variantIndex = Number($event.detail.value)"><text class="breadcrumb-demo-control">{{ variants[variantIndex] }}</text></picker>
            <picker id="breadcrumb-colors" :range="colorNames" :value="colorIndex" @change="colorIndex = Number($event.detail.value)"><text class="breadcrumb-demo-control">{{ colorNames[colorIndex] }}</text></picker>
          </view>
          <XtfBreadcrumb id="breadcrumb-variant-preview" :items="comparisonItems" :variant="variants[variantIndex]" :active-color="activeColors[colorIndex]" :border-color="borderColors[colorIndex]" @click="countClick" />
          <XtfBreadcrumb id="breadcrumb-variant-control" :items="shortItems" :variant="variants[variantIndex]" />
        </view>
        <view id="breadcrumb-scene-events" class="breadcrumb-demo-section">
          <XtfText level="h3" text="业务数据与点击状态" />
          <view class="breadcrumb-demo-controls"><text class="breadcrumb-demo-label">禁用 Catalog</text><switch id="breadcrumb-disabled" :checked="businessDisabled" @change="businessDisabled = $event.detail.value" /></view>
          <XtfBreadcrumb id="breadcrumb-business" :items="businessItems" :max-count="0" variant="soft" @click="countClick" @ellipsis-click="countEllipsis" />
          <text id="breadcrumb-event-counts" class="breadcrumb-demo-count">{{ eventText }}</text>
          <text id="breadcrumb-event-payload" class="breadcrumb-demo-detail">{{ eventDetail }}</text>
        </view>
        <view id="breadcrumb-scene-collapse" class="breadcrumb-demo-section">
          <XtfText level="h3" text="折叠与路径长度" />
          <view class="breadcrumb-demo-controls">
            <picker id="breadcrumb-mode" :range="modes" :value="modeIndex" @change="modeIndex = Number($event.detail.value)"><text class="breadcrumb-demo-control">{{ modes[modeIndex] }}</text></picker>
            <picker id="breadcrumb-max" :range="maxChoices" :value="maxIndex" @change="maxIndex = Number($event.detail.value)"><text class="breadcrumb-demo-control">{{ 'maxCount: ' + maxChoices[maxIndex] }}</text></picker>
          </view>
          <slider id="breadcrumb-length" :min="0" :max="6" :step="1" :value="pathLength" show-value @change="pathLength = $event.detail.value" />
          <XtfBreadcrumb id="breadcrumb-collapse" :items="dynamicItems" :max-count="maxChoices[maxIndex]" :ellipsis-mode="modes[modeIndex]" ellipsis-text="更多" @click="countClick" @ellipsis-click="countEllipsis" />
          <text id="breadcrumb-hidden-payload" class="breadcrumb-demo-detail">{{ hiddenDetail }}</text>
        </view>
        <view id="breadcrumb-scene-slots" class="breadcrumb-demo-section">
          <XtfText level="h3" text="外部前缀与作用域插槽" />
          <view class="breadcrumb-demo-controls"><text class="breadcrumb-demo-label">自定义内容</text><switch id="breadcrumb-custom-slot" :checked="customSlot" @change="customSlot = $event.detail.value" /></view>
          <view class="breadcrumb-demo-prefix-row">
            <XtfIcon id="breadcrumb-prefix" class="breadcrumb-demo-prefix" name="home" size="sm" />
            <view class="breadcrumb-demo-prefix-content">
              <XtfBreadcrumb v-if="customSlot" id="breadcrumb-slot-preview" :items="dynamicItems" :max-count="3" @click="countClick" @ellipsis-click="countEllipsis">
                <template #item="{ item, index, active, ellipsis }"><text :id="'breadcrumb-slot-item-' + index" class="breadcrumb-demo-slot-label" :style="{ color: active ? (activeColors[colorIndex].length > 0 ? activeColors[colorIndex] : '#2563eb') : '#475569' }">{{ ellipsis ? '展开隐藏项' : (index + 1).toString() + '. ' + item.label }}</text></template>
                <template #separator="{ index }"><text :id="'breadcrumb-slot-separator-' + index" class="breadcrumb-demo-slot-separator">{{ index == 0 ? '›' : '/' }}</text></template>
              </XtfBreadcrumb>
              <XtfBreadcrumb v-else id="breadcrumb-slot-default" :items="dynamicItems" :max-count="3" show-home-icon @click="countClick" @ellipsis-click="countEllipsis" />
            </view>
          </view>
        </view>
        <view id="breadcrumb-scene-long" class="breadcrumb-demo-section">
          <XtfText level="h3" text="长标题与移动布局" />
          <view class="breadcrumb-demo-controls"><text class="breadcrumb-demo-label">横向滚动</text><switch id="breadcrumb-scrollable" :checked="longScrollable" @change="longScrollable = $event.detail.value" /></view>
          <XtfBreadcrumb id="breadcrumb-long-preview" :items="longTitleItems" :max-count="0" :scrollable="longScrollable" show-scrollbar variant="outline" @click="countClick" />
        </view>
        <view id="breadcrumb-scene-data" class="breadcrumb-demo-section">
          <XtfText level="h3" text="外部数据与重置" />
          <view class="breadcrumb-demo-controls"><XtfButton id="breadcrumb-replace" class="breadcrumb-demo-action" label="替换数据" size="sm" @click="alternateData = !alternateData" /><XtfButton id="breadcrumb-reset" label="重置全部" size="sm" @click="resetDemo" /></view>
          <XtfBreadcrumb id="breadcrumb-external" :items="externalItems" :max-count="0" @click="countClick" />
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, ref } from "vue"
import XtfBreadcrumb from "@/uni_modules/xtf-linkuiunix/components/xtf-breadcrumb/xtf-breadcrumb.uvue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"

type DemoBreadcrumbItem = { label: string, key?: string, businessId?: string, icon?: string, meta?: string, dot?: boolean, highlight?: boolean, disabled?: boolean, clickable?: boolean, path?: string, openType?: string }
const shortItems: DemoBreadcrumbItem[] = [{ label: "Home" }, { label: "Catalog", icon: "search", dot: true }, { label: "Headphones", meta: "Current" }]
const productItems: DemoBreadcrumbItem[] = [{ label: "Home" }, { label: "Catalog" }, { label: "Audio", icon: "favorite" }, { label: "Headphones" }]
const longItems: DemoBreadcrumbItem[] = [{ label: "Home" }, { label: "Catalog" }, { label: "Electronics" }, { label: "Audio" }, { label: "Wireless" }, { label: "Headphones" }]
const stateItems: DemoBreadcrumbItem[] = [{ label: "Home", clickable: true }, { label: "New", dot: true, highlight: true }, { label: "Locked", disabled: true }, { label: "Static", clickable: false }, { label: "Current" }]
const scrollItems: DemoBreadcrumbItem[] = [{ label: "Workspace", icon: "home" }, { label: "Commerce" }, { label: "Orders" }, { label: "International" }, { label: "Pending review" }, { label: "Customer service" }, { label: "Shipment exception" }, { label: "Current order" }]
const navigationItems: DemoBreadcrumbItem[] = [{ label: "Button 示例", path: "/pages/components/xtf-button/index", openType: "navigateTo" }, { label: "Breadcrumb 当前页" }]
const scrollTop = ref(0)
const clickCount = ref(0)
const ellipsisCount = ref(0)
const navigateCount = ref(0)
const lastHiddenCount = ref(0)
const variants: ('plain' | 'soft' | 'pill' | 'outline' | 'underline')[] = ['plain', 'soft', 'pill', 'outline', 'underline']
const modes: ('middle' | 'start' | 'end')[] = ['middle', 'start', 'end']
const maxChoices = ['0', '1', '2', '3', '4', '6', '3.8', 'invalid', 'Infinity']
const colorNames = ['蓝色 / 灰边', '红色 / 绿边', '主题默认']
const activeColors = ['#2563eb', '#dc2626', '']
const borderColors = ['#94a3b8', '#16a34a', '']
const variantIndex = ref(4)
const colorIndex = ref(0)
const modeIndex = ref(0)
const maxIndex = ref(3)
const pathLength = ref(6)
const businessDisabled = ref(true)
const customSlot = ref(true)
const longScrollable = ref(false)
const alternateData = ref(false)
const eventDetail = ref('尚未点击')
const hiddenDetail = ref('尚未点击省略项')
const comparisonItems: DemoBreadcrumbItem[] = [{ key: 'previous', label: '同名项目' }, { key: 'current', label: '同名项目', meta: 'Current' }]
const longTitleItems: DemoBreadcrumbItem[] = [{ key: 'long-home', label: 'Workspace' }, { key: 'long-category', label: 'InternationalCommerceCustomerServiceShipmentExceptions' }, { key: 'long-current', label: '跨区域订单审核与客户售后服务的超长当前页面标题' }]
const businessItems = computed((): DemoBreadcrumbItem[] => [{ key: 'home', label: 'Home', businessId: 'shop-001' }, { key: 'catalog', label: 'Catalog', businessId: 'category-007', disabled: businessDisabled.value }, { key: 'static', label: 'Static', businessId: 'static-008', clickable: false }, { key: 'detail', label: 'Current', businessId: 'order-042' }])
const dynamicItems = computed((): DemoBreadcrumbItem[] => longItems.slice(0, pathLength.value))
const externalItems = computed((): DemoBreadcrumbItem[] => alternateData.value ? [{ key: 'orders', label: 'Orders', businessId: 'orders-100' }, { key: 'review', label: 'Review', businessId: 'review-101' }] : [{ key: 'products', label: 'Products', businessId: 'products-200' }, { key: 'audio', label: 'Audio', businessId: 'audio-201' }, { key: 'headphones', label: 'Headphones', businessId: 'headphones-202' }])
const eventText = computed((): string => "点击 " + clickCount.value + " 次 · 省略 " + ellipsisCount.value + " 次 · 最近隐藏 " + lastHiddenCount.value + " 项 · 导航 " + navigateCount.value + " 次")
// Copy reactive event data recursively before passing it to the JSON serializer.
function payloadSnapshot(value: any): any {
  if (Array.isArray(value)) return value.map((item: any): any => payloadSnapshot(item))
  if (value == null || typeof value != "object") return value
  const result: UTSJSONObject = {}
  Object.keys(value).forEach((key: string) => { result[key] = payloadSnapshot(value[key]) })
  return result
}
function countClick(payload: UTSJSONObject): void { clickCount.value += 1; eventDetail.value = JSON.stringify(payloadSnapshot(payload)) ?? "" }
function countEllipsis(payload: UTSJSONObject): void { ellipsisCount.value += 1; lastHiddenCount.value = payload["hiddenCount"] as number; hiddenDetail.value = JSON.stringify(payloadSnapshot(payload)) ?? "" }
function countNavigate(): void { navigateCount.value += 1 }
function resetDemo(): void {
  variantIndex.value = 4; colorIndex.value = 0; modeIndex.value = 0; maxIndex.value = 3; pathLength.value = 6
  businessDisabled.value = true; customSlot.value = true; longScrollable.value = false; alternateData.value = false
  clickCount.value = 0; ellipsisCount.value = 0; navigateCount.value = 0; lastHiddenCount.value = 0
  eventDetail.value = '尚未点击'; hiddenDetail.value = '尚未点击省略项'
}
</script>

<style>
.breadcrumb-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.breadcrumb-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.breadcrumb-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.breadcrumb-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.breadcrumb-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.breadcrumb-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.breadcrumb-demo-section { display: flex; flex-direction: column; min-width: 0; width: 100%; margin-top: 24rpx; padding: 24rpx 0; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #cbd5e1); }
.breadcrumb-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.breadcrumb-demo-stack { display: flex; flex-direction: column; }
.breadcrumb-demo-line { margin-top: 18rpx; }
.breadcrumb-demo-count { margin-top: 18rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.5; }
.breadcrumb-demo-hint { margin-top: 14rpx; margin-bottom: 4rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.5; }
.breadcrumb-demo-controls { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-top: 16rpx; margin-bottom: 16rpx; }
.breadcrumb-demo-control { margin-right: 16rpx; padding: 12rpx; color: var(--xtf-color-text-secondary, #334155); font-size: 24rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #94a3b8); }
.breadcrumb-demo-action { margin-right: 16rpx; }
.breadcrumb-demo-label { margin-right: 16rpx; color: var(--xtf-color-text-secondary, #334155); font-size: 24rpx; }
.breadcrumb-demo-detail { width: 100%; min-width: 0; margin-top: 12rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.5; white-space: normal; overflow: hidden; word-break: break-all; }
.breadcrumb-demo-prefix-row { display: flex; flex-direction: row; align-items: center; width: 100%; min-width: 0; }
.breadcrumb-demo-prefix { flex-shrink: 0; margin-right: 12rpx; }
.breadcrumb-demo-prefix-content { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.breadcrumb-demo-slot-label { min-width: 0; flex-shrink: 1; color: var(--xtf-color-text-secondary, #475569); font-size: 24rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-demo-slot-separator { color: var(--xtf-color-text-disabled, #94a3b8); font-size: 24rpx; }
</style>
