<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="skeleton-demo-scroll xtf-page-scroll" direction="vertical">
      <view id="skeleton-demo" class="skeleton-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="skeleton-demo-header"><XtfText level="h1" text="Skeleton" /></view>

        <view id="skeleton-presets" class="skeleton-demo-section">
          <XtfText level="h3" text="预设布局" />
          <XtfSkeleton id="skeleton-article" :rows="4" />
          <view class="skeleton-demo-gap"></view>
          <XtfSkeleton id="skeleton-avatar-list" preset="avatar-list" />
          <view class="skeleton-demo-gap"></view>
          <XtfSkeleton id="skeleton-card" preset="card" animation="pulse" />
          <view class="skeleton-demo-gap"></view>
          <XtfSkeleton id="skeleton-form" preset="form" :rows="2" />
        </view>

        <view id="skeleton-data" class="skeleton-demo-section">
          <XtfText level="h3" text="订单摘要" />
          <view class="skeleton-demo-actions">
            <XtfButton id="skeleton-data-toggle" :label="loading ? '显示订单' : '重新加载'" type="outline" @click="toggleLoading" />
          </view>
          <XtfSkeleton id="skeleton-data-placeholder" :loading="loading" avatar title :paragraph="2">
            <view v-if="!loading" id="skeleton-data-content" class="skeleton-demo-content">
              <XtfText level="h3" :text="orderTitle" />
              <XtfText level="body" :text="orderDetail" />
            </view>
          </XtfSkeleton>
        </view>

        <view id="skeleton-animations" class="skeleton-demo-section">
          <XtfText level="h3" text="动效对照" />
          <view class="skeleton-demo-actions">
            <XtfButton id="skeleton-animation-wave" label="Wave" type="outline" @click="animation = 'wave'" />
            <XtfButton id="skeleton-animation-pulse" label="Pulse" type="outline" @click="animation = 'pulse'" />
            <XtfButton id="skeleton-animation-none" label="None" type="outline" @click="animation = 'none'" />
          </view>
          <XtfText level="caption" :text="animation" />
          <XtfSkeleton id="skeleton-animation-dynamic" :animation="animation" :rows="2" />
          <XtfSkeleton id="skeleton-wave" animation="wave" :rows="1" />
          <XtfSkeleton id="skeleton-pulse" animation="pulse" :rows="1" />
          <XtfSkeleton id="skeleton-none" animation="none" :rows="1" :round="false" />
        </view>

        <view id="skeleton-atomic" class="skeleton-demo-section">
          <XtfText level="h3" text="头像与标题" />
          <XtfSkeleton id="skeleton-atomic-circle" avatar :avatar-size="72" title title-width="65%" :paragraph="3" :custom-style="atomicStyle" />
          <view class="skeleton-demo-gap"></view>
          <XtfSkeleton id="skeleton-atomic-square" avatar avatar-shape="square" avatar-size="48px" title :title-width="160" :paragraph="2" custom-style="padding: 12rpx; background-color: #f0fdf4;" />
        </view>

        <view id="skeleton-boundaries" class="skeleton-demo-section">
          <XtfText level="h3" text="空状态与行数边界" />
          <XtfSkeleton id="skeleton-empty" :loading="false"><view class="skeleton-demo-content"><XtfText level="body" text="暂无订单" /></view></XtfSkeleton>
          <XtfSkeleton id="skeleton-single" :rows="1" animation="none" />
          <XtfSkeleton id="skeleton-zero" :rows="0" animation="none" />
          <XtfSkeleton id="skeleton-negative" :rows="-2" animation="none" />
          <XtfSkeleton id="skeleton-fraction" :rows="2.8" animation="none" />
          <XtfSkeleton id="skeleton-invalid" rows="invalid" animation="none" />
          <XtfSkeleton id="skeleton-paragraph-zero" title :paragraph="0" animation="none" />
        </view>

        <view id="skeleton-timed" class="skeleton-demo-section">
          <XtfText level="h3" text="定时加载与自定义占位" />
          <view class="skeleton-demo-actions">
            <XtfButton id="skeleton-timer-reload" label="重新请求" type="outline" @click="reloadTimed" />
            <XtfButton id="skeleton-timer-mount" :label="timedMounted ? '卸载示例' : '挂载示例'" type="outline" @click="toggleTimed" />
          </view>
          <view v-if="timedMounted" id="skeleton-timer-host" class="skeleton-demo-content">
            <XtfSkeleton id="skeleton-timer-placeholder" :loading="timedLoading" title :paragraph="2">
              <view v-if="timedLoading" id="skeleton-custom-slot" class="skeleton-demo-custom-block"></view>
              <view v-else id="skeleton-timer-content" class="skeleton-demo-content"><XtfText level="body" :text="timedResult" /></view>
            </XtfSkeleton>
          </view>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { onUnmounted, 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 XtfSkeleton from "@/uni_modules/xtf-linkuiunix/components/xtf-skeleton/xtf-skeleton.uvue"

const loading = ref(true)
const animation = ref("wave")
const orderTitle = ref("")
const orderDetail = ref("")
const atomicStyle = { padding: "16rpx", backgroundColor: "#f1f5f9" } as UTSJSONObject
const timedMounted = ref(true)
const timedLoading = ref(true)
const timedResult = ref("")
let timer: number | null = null
let requestCount = 0

function toggleLoading(): void {
  if (loading.value) {
    orderTitle.value = "订单 #20261020"
    orderDetail.value = "共 3 件商品，已付款，等待发货。"
  } else {
    orderTitle.value = ""
    orderDetail.value = ""
  }
  loading.value = !loading.value
}
function clearTimer(): void {
  if (timer != null) { clearTimeout(timer!); timer = null }
}
function reloadTimed(): void {
  clearTimer()
  timedMounted.value = true
  timedLoading.value = true
  timedResult.value = ""
  requestCount += 1
  timer = setTimeout((): void => {
    timer = null
    timedResult.value = "第 " + requestCount + " 次请求完成：已同步 3 笔订单。"
    timedLoading.value = false
  }, 1500)
}
function toggleTimed(): void {
  if (timedMounted.value) { clearTimer(); timedMounted.value = false }
  else { reloadTimed() }
}
reloadTimed()
onUnmounted((): void => { clearTimer() })
</script>

<style>
.skeleton-demo-scroll { display: flex; flex: 1; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.skeleton-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.skeleton-demo-header { display: flex; flex-direction: column; padding: 24rpx 0; }
.skeleton-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, #cbd5e1); }
.skeleton-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 16rpx; margin-bottom: 16rpx; }
.skeleton-demo-gap { display: flex; flex-direction: column; height: 20rpx; }
.skeleton-demo-content { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-top: 16rpx; }
.skeleton-demo-custom-block { display: flex; flex-direction: column; flex-shrink: 0; width: 96rpx; height: 96rpx; margin-left: 20rpx; background-color: #cbd5e1; border-radius: 8rpx; }
</style>
