<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="demo-scroll xtf-page-scroll" direction="vertical">
    <view class="demo-page xtf-page-scroll-content">
      <text class="demo-title">Tabs Swiper</text>

      <view class="demo-section">
        <text class="demo-heading">01 / 门店工作台</text>
        <view class="demo-actions">
          <button id="workspace-prev" class="demo-button" size="mini" :disabled="current == 0" @click="current = current - 1">上一项</button>
          <button id="workspace-orders" class="demo-button demo-primary" size="mini" @click="current = 1">查看订单</button>
          <button id="workspace-next" class="demo-button" size="mini" :disabled="current == 2" @click="current = current + 1">下一项</button>
        </view>
        <XtfTabsSwiper id="workspace-swiper" v-model="current" :tabs="tabs" :height="250" @change="workspaceChanged">
          <template #pane-0>
            <view id="workspace-overview" class="demo-pane">
              <text class="demo-label">今日实收</text>
              <text class="demo-amount">¥ 8,640.00</text>
              <view class="demo-row"><text class="demo-body">已完成 48 单</text><text class="demo-positive">较昨日 +12.6%</text></view>
            </view>
          </template>
          <template #pane-1>
            <view id="workspace-order-list" class="demo-pane">
              <view class="demo-row demo-line"><text class="demo-body">#1028 · 堂食 A03</text><text class="demo-warning">待出餐</text></view>
              <view class="demo-row demo-line"><text class="demo-body">#1027 · 外带</text><text class="demo-body">¥ 68.00</text></view>
              <text class="demo-label">待处理 2 单 / 今日订单 50 单</text>
            </view>
          </template>
          <template #pane-2>
            <view id="workspace-customers" class="demo-pane">
              <text class="demo-pane-title">会员回访</text>
              <view class="demo-row demo-line"><text class="demo-body">林女士 · 本月到店 6 次</text><text class="demo-positive">常客</text></view>
              <text class="demo-label">今日新增 8 位会员 / 待回访 3 位</text>
            </view>
          </template>
        </XtfTabsSwiper>
        <text id="workspace-state" class="demo-state">v-model: {{ current }} · {{ tabs[current].label }}</text>
        <text id="workspace-change" class="demo-event">change: {{ workspaceEvent }}</text>
      </view>

      <view class="demo-section">
        <text class="demo-heading">02 / 履约流程</text>
        <view class="demo-row demo-control">
          <text class="demo-body">手势滑动 swipeable</text>
          <switch id="motion-swipeable" :checked="swipeable" color="#2563eb" @change="swipeable = $event.detail.value" />
        </view>
        <view class="demo-row demo-control">
          <text class="demo-body">首尾循环 loop</text>
          <switch id="motion-loop" :checked="loop" color="#2563eb" @change="loop = $event.detail.value" />
        </view>
        <text class="demo-label">duration: {{ duration }} ms</text>
        <slider id="motion-duration" class="demo-slider" :min="0" :max="1000" :step="100" :value="duration" activeColor="#2563eb" @change="duration = $event.detail.value" />
        <XtfTabsSwiper id="motion-swiper" v-model="motionCurrent" :tabs="deliveryTabs" :height="210" :swipeable="swipeable" :loop="loop" :duration="duration" @change="motionChanged">
          <template #pane-0><view id="motion-pending" class="demo-pane"><text class="demo-pane-title">待接单 · 3 单</text><text class="demo-body">最近一单 #1031 / 下单于 12:08</text><text class="demo-warning">预计备餐 15 分钟</text></view></template>
          <template #pane-1><view id="motion-delivering" class="demo-pane"><text class="demo-pane-title">配送中 · 5 单</text><text class="demo-body">#1026 骑手已取餐</text><text class="demo-positive">预计 12:35 送达</text></view></template>
          <template #pane-2><view id="motion-completed" class="demo-pane"><text class="demo-pane-title">已完成 · 32 单</text><text class="demo-body">平均送达 28 分钟</text><text class="demo-positive">准时率 98%</text></view></template>
        </XtfTabsSwiper>
        <text id="motion-state" class="demo-state">索引: {{ motionCurrent }} · 手势: {{ swipeable ? '开' : '关' }} · 循环: {{ loop ? '开' : '关' }}</text>
        <text id="motion-change" class="demo-event">change: {{ motionEvent }}</text>
      </view>

      <view class="demo-section">
        <text class="demo-heading">03 / 按需挂载与相邻预渲染</text>
        <view class="demo-row demo-control">
          <text class="demo-body">按需挂载 lazy</text>
          <switch id="lazy-toggle" :checked="lazy" color="#2563eb" @change="lazy = $event.detail.value; resetLazy()" />
        </view>
        <text class="demo-label">preload: {{ preload }} / 切换时每侧预渲染数量</text>
        <slider id="lazy-preload" class="demo-slider" :min="0" :max="2" :step="1" :value="preload" activeColor="#2563eb" @change="preload = $event.detail.value; resetLazy()" />
        <view class="demo-actions"><button id="lazy-reset" class="demo-button" size="mini" @click="resetLazy">重建实例</button><text class="demo-label">实例 #{{ lazyKey + 1 }}</text></view>
        <XtfTabsSwiper id="lazy-swiper" :key="lazyKey" v-model="lazyCurrent" :tabs="reportTabs" :height="230" :lazy="lazy" :preload="preload" @change="lazyChanged">
          <template #pane-0><view id="lazy-sales" class="demo-pane"><text class="demo-pane-title">销售日报</text><text class="demo-amount">¥ 12,860</text><text class="demo-body">现金 ¥ 2,860 / 线上 ¥ 10,000</text></view></template>
          <template #pane-1><view id="lazy-stock" class="demo-pane"><text class="demo-pane-title">库存预警</text><view class="demo-row demo-line"><text class="demo-body">鲜牛奶 · 剩余 6 盒</text><text class="demo-warning">待补货</text></view><text class="demo-label">安全库存 12 盒 / 今日消耗 18 盒</text></view></template>
          <template #pane-2><view id="lazy-handover" class="demo-pane"><text class="demo-pane-title">交班记录</text><text class="demo-body">早班 08:00 - 16:00 / 收银员 小陈</text><input id="handover-note" class="demo-input" placeholder="填写交班备注" /></view></template>
        </XtfTabsSwiper>
        <text id="lazy-state" class="demo-state">索引: {{ lazyCurrent }} · lazy: {{ lazy }} · preload: {{ preload }}</text>
        <text id="lazy-change" class="demo-event">change: {{ lazyEvent }}</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 XtfTabsSwiper from "@/uni_modules/xtf-linkuiunix/components/xtf-tabs-swiper/xtf-tabs-swiper.uvue"

const tabs = [{ key: "overview", label: "概览" }, { key: "orders", label: "订单" }, { key: "customers", label: "客户" }]
const deliveryTabs = [{ key: "pending", label: "待接单" }, { key: "delivering", label: "配送中" }, { key: "completed", label: "已完成" }]
const reportTabs = [{ key: "sales", label: "销售" }, { key: "stock", label: "库存" }, { key: "handover", label: "交班" }]
const current = ref(0)
const motionCurrent = ref(0)
const lazyCurrent = ref(0)
const swipeable = ref(true)
const loop = ref(false)
const duration = ref(300)
const lazy = ref(true)
const preload = ref(1)
const lazyKey = ref(0)
const workspaceEvent = ref("尚未触发")
const motionEvent = ref("尚未触发")
const lazyEvent = ref("尚未触发")
const workspaceCount = ref(0)
const motionCount = ref(0)
const lazyCount = ref(0)

function workspaceChanged(index: number): void {
  workspaceCount.value += 1
  workspaceEvent.value = index.toString() + " · " + tabs[index].label + " · 累计 " + workspaceCount.value.toString() + " 次"
}
function motionChanged(index: number): void {
  motionCount.value += 1
  motionEvent.value = index.toString() + " · " + deliveryTabs[index].label + " · 累计 " + motionCount.value.toString() + " 次"
}
function lazyChanged(index: number): void {
  lazyCount.value += 1
  lazyEvent.value = index.toString() + " · " + reportTabs[index].label + " · 累计 " + lazyCount.value.toString() + " 次"
}
function resetLazy(): void {
  // 组件保留已挂载项；重建实例才能重新对比 lazy/preload 的初始行为。
  lazyCurrent.value = 0
  lazyCount.value = 0
  lazyEvent.value = "尚未触发"
  lazyKey.value += 1
}
</script>

<style>
.demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; }
.demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.demo-title { color: var(--xtf-color-text, #0f172a); font-size: 42rpx; font-weight: 700; margin-bottom: 12rpx; }
.demo-section { display: flex; flex-direction: column; padding: 24rpx 0; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #e2e8f0); }
.demo-heading { color: var(--xtf-color-text, #172033); font-size: 30rpx; font-weight: 700; margin-bottom: 16rpx; }
.demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 12rpx; }
.demo-button { margin: 0 12rpx 8rpx 0; padding: 0 18rpx; font-size: 24rpx; background-color: var(--xtf-color-surface, #ffffff); color: var(--xtf-color-text-secondary, #334155); border-radius: 8rpx; }
.demo-primary { color: #ffffff; background-color: #2563eb; }
.demo-pane { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; justify-content: center; }
.demo-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.demo-line { padding: 12rpx 0; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #e2e8f0); margin-bottom: 8rpx; }
.demo-control { min-height: 72rpx; margin-bottom: 8rpx; }
.demo-label { color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; line-height: 34rpx; }
.demo-body { color: var(--xtf-color-text-secondary, #334155); font-size: 24rpx; line-height: 38rpx; }
.demo-pane-title { color: var(--xtf-color-text, #0f172a); font-size: 28rpx; font-weight: 700; line-height: 44rpx; }
.demo-amount { color: var(--xtf-color-text, #0f172a); font-size: 40rpx; font-weight: 700; line-height: 64rpx; }
.demo-positive { color: #0f766e; font-size: 22rpx; line-height: 34rpx; }
.demo-warning { color: #b45309; font-size: 22rpx; line-height: 34rpx; }
.demo-slider { margin: 12rpx 8rpx 20rpx; }
.demo-state { color: var(--xtf-color-text-secondary, #334155); font-size: 24rpx; line-height: 36rpx; margin-top: 8rpx; }
.demo-event { color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; line-height: 34rpx; }
.demo-input { height: 64rpx; width: 100%; padding: 0 12rpx; margin-top: 12rpx; background-color: var(--xtf-color-surface, #ffffff); border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 8rpx; font-size: 24rpx; color: var(--xtf-color-text-secondary, #334155); }
</style>
