<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="state-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="state-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="state-demo-hero">
          <XtfText class="state-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / FEEDBACK" />
          <XtfText class="state-demo-title" level="display" color="inverse" text="State View" />
          <XtfText class="state-demo-intro" level="caption" color="inverse" text="在内容、加载、空数据和异常之间统一切换。" />
        </view>
        <view class="state-demo-section">
          <view class="state-demo-controls">
            <XtfButton v-for="item in statuses" :key="item" :label="item" size="sm" :type="status == item ? 'primary' : 'outline'" @click="status = item" />
          </view>
          <XtfStateView :status="status" loading-text="正在同步订单" title="暂无订单" description="新订单会显示在这里。" action-text="重新加载" :min-height="360" @action="handleAction" @retry="handleRetry">
            <view class="state-demo-content"><text class="state-demo-content-title">今日订单 18 笔</text><text class="state-demo-content-desc">成交金额 CNY 8,420.00</text></view>
          </XtfStateView>
          <text class="state-demo-log">action={{ actionCount }} / retry={{ retryCount }} / {{ lastEvent }}</text>
        </view>
        <view class="state-demo-section">
          <XtfText level="h3" text="骨架加载" />
          <XtfStateView status="loading" loading-variant="skeleton" :skeleton-rows="4" :centered="false" :min-height="220" />
        </view>
        <view class="state-demo-section">
          <XtfText level="h3" text="自定义状态插槽" />
          <XtfStateView status="empty" action-text="创建记录" :min-height="240" @action="customActions += 1">
            <template #empty><view class="state-demo-custom"><XtfIcon name="favorite" size="xl" theme="warning" /><text class="state-demo-custom-text">收藏夹还是空的</text></view></template>
            <template #action><view class="state-demo-slot-action"><text class="state-demo-slot-action-text">创建第一条</text></view></template>
          </XtfStateView>
          <text class="state-demo-log">自定义操作次数：{{ customActions }}</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 XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
import XtfStateView from "@/uni_modules/xtf-linkuiunix/components/xtf-state-view/xtf-state-view.uvue"
type DemoStatus = "content" | "loading" | "empty" | "error"
const statuses = ["content", "loading", "empty", "error"] as DemoStatus[]
const status = ref<DemoStatus>("content")
const actionCount = ref(0)
const retryCount = ref(0)
const customActions = ref(0)
const lastEvent = ref("等待操作")
function handleAction(event: any): void { actionCount.value += 1; lastEvent.value = "action:" + event.status }
function handleRetry(event: any): void { retryCount.value += 1; lastEvent.value = "retry:" + event.status }
</script>

<style>
.state-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.state-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.state-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #b45309; }
.state-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.state-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }
.state-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; }
.state-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); }
.state-demo-controls { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 16rpx; }
.state-demo-content { display: flex; flex-direction: column; align-self: stretch; padding: 28rpx; border-radius: 8rpx; background-color: #ecfdf5; }
.state-demo-content-title { color: #065f46; font-size: 30rpx; font-weight: 700; }
.state-demo-content-desc { margin-top: 8rpx; color: #047857; font-size: 24rpx; }
.state-demo-log { margin-top: 16rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.state-demo-custom { display: flex; flex-direction: column; align-items: center; }
.state-demo-custom-text { margin-top: 12rpx; color: var(--xtf-color-text, #0f172a); font-size: 26rpx; font-weight: 600; }
.state-demo-slot-action { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 14rpx 24rpx; border-radius: 8rpx; background-color: var(--xtf-color-primary, #2563eb); }
.state-demo-slot-action-text { color: #ffffff; font-size: 23rpx; font-weight: 600; }
</style>
