<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="timeline-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="timeline-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="timeline-demo-hero">
          <XtfText level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="timeline-demo-title" level="display" color="inverse" text="Timeline" />
          <XtfText class="timeline-demo-intro" level="caption" color="inverse" text="物流、审批和操作记录的时间线展示。" />
        </view>

        <view class="timeline-demo-section">
          <XtfText level="h3" text="基础垂直履约" />
          <text class="timeline-demo-section-desc">末尾 pending、业务标签和真实 load-more 追加。</text>
          <XtfTimeline :items="historyItems" pending :pending-text="pendingText" load-more load-more-text="加载更早记录" @load-more="loadMore" />
          <view class="timeline-demo-actions"><XtfButton label="重置记录" size="sm" type="outline" @click="resetHistory" /></view>
          <text class="timeline-demo-log">{{ historyLog }}</text>
        </view>

        <view class="timeline-demo-section">
          <XtfText level="h3" text="横向流程" />
          <text class="timeline-demo-section-desc">短流程在横向排列，虚线由独立节点段绘制。</text>
          <scroll-view class="timeline-demo-horizontal-scroll" direction="horizontal"><view class="timeline-demo-horizontal-inner"><XtfTimeline :items="horizontalItems" direction="horizontal" line-style="dashed" /></view></scroll-view>
        </view>

        <view class="timeline-demo-section">
          <XtfText level="h3" text="模式解析与冲突" />
          <text class="timeline-demo-section-desc">alternate=true 优先于 mode；关闭后 mode=alternate 仍实际交替。</text>
          <view class="timeline-demo-toggle"><text class="timeline-demo-label">alternate={{ alternateMode ? 'true' : 'false' }}</text><switch :checked="alternateMode" @change="toggleAlternate" /></view>
          <view class="timeline-demo-actions"><XtfButton label="左侧" size="sm" :type="mode == 'left' ? 'solid' : 'outline'" @click="setMode('left')" /><XtfButton label="右侧" size="sm" :type="mode == 'right' ? 'solid' : 'outline'" @click="setMode('right')" /><XtfButton label="交替" size="sm" :type="mode == 'alternate' ? 'solid' : 'outline'" @click="setMode('alternate')" /></view>
          <XtfTimeline :items="modeItems" :mode="mode" :alternate="alternateMode" />
          <text class="timeline-demo-log">resolvedMode={{ alternateMode ? 'alternate' : mode }}</text>
        </view>

        <view class="timeline-demo-section">
          <XtfText level="h3" text="反向与待处理节点" />
          <text class="timeline-demo-section-desc">源数组保持不变，pending 按参考语义先插入末尾，再参与 reverse。</text>
          <view class="timeline-demo-toggle"><text class="timeline-demo-label">reverse={{ reverseItems ? 'true' : 'false' }}</text><switch :checked="reverseItems" @change="toggleReverse" /></view>
          <XtfTimeline :items="reverseSource" :reverse="reverseItems" pending pending-text="等待服务端确认" />
          <text class="timeline-demo-log">源数组首项={{ reverseSource[0]['title'] }}</text>
        </view>

        <view class="timeline-demo-section">
          <XtfText level="h3" text="连接线样式" />
          <text class="timeline-demo-section-desc">solid、dashed、gradient 分别验证；gradient 使用 Web/App 均支持的 linear-gradient。</text>
          <XtfTimeline :items="lineItems" line-style="solid" />
          <XtfTimeline custom-class="timeline-demo-timeline-gap" :items="lineItems" line-style="dashed" />
          <XtfTimeline custom-class="timeline-demo-timeline-gap" :items="lineItems" line-style="gradient" />
        </view>

        <view class="timeline-demo-section">
          <XtfText level="h3" text="空态、单节点与边界" />
          <text class="timeline-demo-section-desc">空数组不渲染伪造节点；单节点隐藏末尾连接线；长文本保持可读。</text>
          <XtfTimeline :items="[]" />
          <XtfTimeline custom-class="timeline-demo-timeline-gap" :items="singleItem" />
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.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 XtfTimeline from "@/uni_modules/xtf-linkuiunix/components/xtf-timeline/xtf-timeline.uvue"

const historyItems = ref<UTSJSONObject[]>([{ id: "h1", time: "09:20", title: "订单创建", desc: "等待支付", color: "#2563eb" }, { id: "h2", time: "10:00", title: "支付成功", desc: "订单进入备货流程", type: "icon", icon: "check", tag: "完成", theme: "success", color: "#16a34a" }])
const pendingText = ref("正在同步最新记录")
const historyLog = ref("load-more: 尚未触发")
function loadMore(): void { if (historyItems.value.length >= 5) { historyLog.value = "load-more: 已达上限 5 条"; return }; const next = historyItems.value.length + 1; historyItems.value.push({ id: "h" + next.toString(), time: "历史 " + next.toString(), title: "历史节点 " + next.toString(), desc: "由 load-more 真实追加", color: "#0f766e" }); historyLog.value = "load-more: 已追加第 " + next.toString() + " 条" }
function resetHistory(): void { historyItems.value = [{ id: "h1", time: "09:20", title: "订单创建", desc: "等待支付", color: "#2563eb" }, { id: "h2", time: "10:00", title: "支付成功", desc: "订单进入备货流程", type: "icon", icon: "check", tag: "完成", theme: "success", color: "#16a34a" }]; pendingText.value = "正在同步最新记录"; historyLog.value = "已重置：2 条记录" }

const horizontalItems = [{ id: "a", title: "创建", color: "#2563eb" }, { id: "b", title: "审核", type: "icon", icon: "check", color: "#16a34a" }, { id: "c", title: "完成", color: "#7c3aed" }]
const mode = ref("alternate")
const alternateMode = ref(true)
const modeItems = [{ id: "m1", title: "提交申请", desc: "资料已归档", color: "#2563eb" }, { id: "m2", title: "部门审核", desc: "等待负责人确认", color: "#0f766e" }, { id: "m3", title: "完成归档", desc: "流程已结束", color: "#d97706" }]
function setMode(value: string): void { mode.value = value }
function toggleAlternate(event: UniSwitchChangeEvent): void { alternateMode.value = event.detail.value }

const reverseItems = ref(true)
const reverseSource = [{ id: "r1", title: "最早记录", time: "周一" }, { id: "r2", title: "中间记录", time: "周二" }, { id: "r3", title: "最新记录", time: "周三" }]
function toggleReverse(event: UniSwitchChangeEvent): void { reverseItems.value = event.detail.value }

const lineItems = [{ id: "l1", title: "开始", color: "#2563eb" }, { id: "l2", title: "处理中", color: "#0f766e" }, { id: "l3", title: "完成", color: "#d97706" }]
const singleItem = [{ id: "single", title: "仅有一个节点", time: "现在", desc: "末尾连接线应隐藏。仓库已经完成复核，系统正在等待承运商回传签收凭证，这段较长的业务说明用于验证窄屏换行且不挤压节点。", type: "hollow", color: "#7c3aed" }]
</script>

<style>
.timeline-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.timeline-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.timeline-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }
.timeline-demo-title { margin-top: 8rpx; }
.timeline-demo-intro { margin-top: 14rpx; }
.timeline-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); }
.timeline-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.timeline-demo-horizontal-scroll { width: 100%; min-width: 0; }
.timeline-demo-horizontal-inner { display: flex; flex-direction: row; width: 720rpx; min-width: 720rpx; padding-right: 24rpx; }
.timeline-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20rpx; }
.timeline-demo-actions { padding-bottom: 4rpx; }
.timeline-demo-toggle { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
.timeline-demo-label, .timeline-demo-log { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.5; }
.timeline-demo-log { margin-top: 12rpx; }
.timeline-demo-timeline-gap { margin-top: 24rpx; }
</style>
