<template><XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="tabs-demo-scroll xtf-page-scroll" direction="vertical"><view class="tabs-demo-page xtf-page-scroll-content"><view class="tabs-demo-hero"><text class="tabs-demo-kicker">XTF LINKUI / COMPONENTS</text><text class="tabs-demo-title">Tabs</text><text class="tabs-demo-intro">分组切换、禁用项和可管理标签。</text></view><view class="tabs-demo-section"><text class="tabs-demo-heading">等宽下划线</text><XtfTabs v-model="current" :items="items" equal @change="changed" /><text class="tabs-demo-value">已选: {{ current }}</text></view><view class="tabs-demo-section"><text class="tabs-demo-heading">卡片样式</text><XtfTabs v-model="cardCurrent" :items="items" variant="card" equal /></view><view class="tabs-demo-section"><text class="tabs-demo-heading">滚动、增加与关闭</text><XtfTabs v-model="manageCurrent" :items="manyItems" scrollable closable addable @add="added" @close="closed" /><text class="tabs-demo-value demo-managed-state">{{ manyItems.length }} 个标签 · 当前 {{ manageCurrent }} · {{ status }}</text><button class="demo-reset-tabs" size="mini" @click="reset">重置标签</button></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 XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfTabs from "@/uni_modules/xtf-linkuiunix/components/xtf-tabs/xtf-tabs.uvue"
const current = ref("all")
const cardCurrent = ref("all")
const manageCurrent = ref(0)
const status = ref("等待操作")
const items = [{ label: "全部", value: "all" }, { label: "处理中", value: "doing" }, { label: "已完成", value: "done", disabled: true }] as Array<any>
function initialItems(): Array<any> { return [{ key: "overview", label: "概览", value: 0 }, { key: "orders", label: "订单", value: 1 }, { key: "goods", label: "商品", value: 2 }, { key: "clients", label: "客户", value: 3 }] }
const manyItems = ref(initialItems())
let nextValue = 4
function changed(payload: any): void { current.value = payload.value }
function added(): void { const value = nextValue++; manyItems.value.push({ key: "extra-" + value, label: "新标签 " + value, value }); manageCurrent.value = value; status.value = "已新增 " + value }
function closed(payload: any): void {
  const index = manyItems.value.findIndex((item: any): boolean => item.value === payload.value)
  if (index < 0) return
  manyItems.value.splice(index, 1)
  if (manageCurrent.value === payload.value) manageCurrent.value = manyItems.value.length > 0 ? manyItems.value[Math.min(index, manyItems.value.length - 1)].value : -1
  status.value = "已关闭 " + payload.item.label
}
function reset(): void { manyItems.value = initialItems(); manageCurrent.value = 0; nextValue = 4; status.value = "已恢复初始标签" }
</script>
<style>.tabs-demo-scroll { flex: 1; width: 100%; height: 100%; }.tabs-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.tabs-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }.tabs-demo-kicker, .tabs-demo-intro { color: #ffffff; font-size: 22rpx; }.tabs-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }.tabs-demo-intro { margin-top: 12rpx; }.tabs-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.tabs-demo-heading { margin-bottom: 20rpx; color: var(--xtf-color-text, #172033); font-size: 30rpx; font-weight: 700; }.tabs-demo-value { margin-top: 18rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 24rpx; }</style>
