<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="space-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="space-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="space-demo-hero">
          <XtfText class="space-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / LAYOUT" />
          <XtfText class="space-demo-title" level="display" color="inverse" text="Space" />
          <XtfText class="space-demo-intro" level="caption" color="inverse" text="通过数据包装稳定组织间距、换行与分隔内容。" />
        </view>
        <view class="space-demo-section">
          <XtfText level="h3" text="横向换行" />
          <view class="space-demo-controls">
            <XtfButton label="切换间距" size="sm" type="outline" @click="wideGap = !wideGap" />
            <XtfButton label="增减项目" size="sm" type="light" @click="toggleItem" />
          </view>
          <XtfSpace :items="tags" wrap block :gap="wideGap ? 28 : 12" :row-gap="12">
            <template #item="slotProps"><view class="space-demo-chip"><text class="space-demo-chip-text">{{ slotProps.item }}</text></view></template>
          </XtfSpace>
        </view>
        <view class="space-demo-section">
          <XtfText level="h3" text="纵向步骤" />
          <XtfSpace :items="steps" direction="vertical" align="stretch" block :gap="18">
            <template #item="slotProps"><view class="space-demo-step"><text class="space-demo-step-index">{{ slotProps.index + 1 }}</text><text class="space-demo-step-text">{{ slotProps.item }}</text></view></template>
          </XtfSpace>
        </view>
        <view class="space-demo-section">
          <XtfText level="h3" text="插槽与分隔符" />
          <XtfSpace :items="trail" block justify="center">
            <template #item="slotProps"><text class="space-demo-link">{{ slotProps.item }}</text></template>
            <template #separator="slotProps"><text class="space-demo-separator">{{ slotProps.index < 2 ? '/' : '' }}</text></template>
          </XtfSpace>
          <text class="space-demo-note">数据项数量：{{ tags.length }}</text>
        </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 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 XtfSpace from "@/uni_modules/xtf-linkuiunix/components/xtf-space/xtf-space.uvue"
const tags = ref<Array<any>>(["待处理", "已付款", "配送中", "已完成", "已退款"])
const steps = ["提交资料", "平台审核", "完成入驻"] as Array<any>
const trail = ["首页", "订单", "详情"] as Array<any>
const wideGap = ref(false)
function toggleItem(): void { if (tags.value.length > 4) tags.value.pop(); else tags.value.push("已退款") }
</script>

<style>
.space-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.space-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.space-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.space-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.space-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }
.space-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; }
.space-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); }
.space-demo-controls { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 18rpx; margin-bottom: 18rpx; }
.space-demo-chip { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 12rpx 20rpx; border-radius: 8rpx; background-color: var(--xtf-color-primary-soft, #dbeafe); }
.space-demo-chip-text { color: var(--xtf-color-primary, #2563eb); font-size: 23rpx; }
.space-demo-step { display: flex; flex-direction: row; align-items: center; padding: 18rpx; border-radius: 8rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.space-demo-step-index { width: 42rpx; color: var(--xtf-color-primary, #2563eb); font-weight: 700; }
.space-demo-step-text { color: var(--xtf-color-text, #0f172a); font-size: 24rpx; }
.space-demo-link { color: var(--xtf-color-primary, #2563eb); font-size: 24rpx; }
.space-demo-separator { margin-left: 14rpx; margin-right: 14rpx; color: var(--xtf-color-text-disabled, #94a3b8); font-size: 24rpx; }
.space-demo-note { margin-top: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
</style>
