<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="image-demo-scroll xtf-page-scroll" direction="vertical"><view class="image-demo-page xtf-safe-bottom xtf-page-scroll-content">
      <view class="image-demo-hero"><XtfText class="image-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="image-demo-title" level="display" color="inverse" text="Image" /><XtfText class="image-demo-intro" level="caption" color="inverse" text="比例、状态、事件与插槽的本地可运行示例。" /></view>

      <view class="image-demo-section"><XtfText class="image-demo-section-title" level="h3" text="本地视觉与比例" /><XtfText class="image-demo-section-desc" level="caption" color="secondary" text="logo.png 是项目内资源；ratio 支持数字、rpx、px 与百分比宽度。" /><view class="image-demo-ratio-row"><view class="image-demo-ratio-item"><XtfImage src="/static/logo.png" width="180rpx" :ratio="1" caption="180rpx / ratio=1" /><XtfText class="image-demo-note" level="micro" color="secondary" text="数字 ratio" /></view><view class="image-demo-ratio-item image-demo-ratio-second"><XtfImage src="/static/logo.png" width="160px" ratio="4/3" mode="contain" caption="160px / 4:3" /><XtfText class="image-demo-note" level="micro" color="secondary" text="px width" /></view></view><XtfImage src="/static/logo.png" width="100%" ratio="16:9" mode="cover" caption="100% / 16:9" /><XtfImage class="image-demo-top" src="/static/logo.png" :width="300" :height="180" mode="contain" shape="leaf" caption="明确 height 仍按 height 展示" /><XtfImage class="image-demo-top" src="/static/logo.png" :width="220" ratio="0/0" :height="100" caption="非法 ratio：安全回退 height" /></view>

      <view class="image-demo-section"><XtfText class="image-demo-section-title" level="h3" text="动态失败恢复" /><XtfText class="image-demo-section-desc" level="caption" color="secondary" :text="recoveryLabel" /><XtfImage :src="recoverySrc" fallback="/static/logo.png" :height="210" caption="坏图自动回退为 logo" @load="recordEvent('load', $event)" @error="recordEvent('error', $event)" /><view class="image-demo-actions"><button class="image-demo-button" @tap="cycleRecovery">切换坏图 / logo / empty</button><button class="image-demo-button image-demo-button-light" @tap="resetRecovery">恢复 logo</button></view></view>

      <view class="image-demo-section"><XtfText class="image-demo-section-title" level="h3" text="原事件、错误重试与预览隔离" /><XtfText class="image-demo-section-desc" level="caption" color="secondary" text="点击错误层只重试，不会打开外层 preview；普通点击、长按和系统预览各自记录原始详情。" /><XtfImage src="/missing-retry-image.png" :height="170" preview retryable error-text="错误态：点这里重试，不触发 preview" @load="recordEvent('load', $event)" @error="recordEvent('error', $event)" @retry="recordEvent('retry', $event)" @click="recordEvent('click', $event)" @longpress="recordEvent('longpress', $event)" @preview="recordPreview" /><XtfImage class="image-demo-top" src="/static/logo.png" :height="170" preview :preview-list="galleryImages" :preview-current="1" caption="gallery 预览" @preview="recordPreview" /><XtfImage class="image-demo-top" src="/static/logo.png" :height="130" :preview="false" caption="preview=false：点击不打开预览" @click="recordEvent('disabled-preview-click', $event)" /><XtfText class="image-demo-event" level="caption" color="secondary" :text="eventDetail" /></view>

      <view class="image-demo-section"><XtfText class="image-demo-section-title" level="h3" text="lazyLoad 优先级" /><XtfText class="image-demo-section-desc" level="caption" color="secondary" text="lazyLoad 未传时继承 lazy；显式 false 会覆盖 lazy=true。" /><view class="image-demo-lazy-row"><view class="image-demo-lazy-item"><XtfImage src="/static/logo.png" :height="150" lazy caption="lazy=true / lazyLoad 未传" /><XtfText class="image-demo-note" level="micro" color="secondary" text="继承 lazy" /></view><view class="image-demo-lazy-item image-demo-lazy-second"><XtfImage src="/static/logo.png" :height="150" lazy :lazy-load="false" caption="lazy=true / lazyLoad=false" /><XtfText class="image-demo-note" level="micro" color="secondary" text="显式 false 优先" /></view></view></view>

      <view class="image-demo-section"><XtfText class="image-demo-section-title" level="h3" text="插槽实际场景" /><XtfText class="image-demo-section-desc" level="caption" color="secondary" text="默认内容、overlay、top、error 以及组合插槽均直接渲染。" /><view class="image-demo-slot-grid"><XtfImage class="image-demo-slot-item image-demo-slot-left" src="/static/logo.png" :height="150" caption="默认插槽" /><XtfImage class="image-demo-slot-item image-demo-slot-right" src="/static/logo.png" :height="150"><template #overlay><view class="image-demo-slot-overlay"><XtfText class="image-demo-slot-title" level="label" color="inverse" text="overlay 插槽" /><XtfText class="image-demo-slot-desc" level="micro" color="inverse" text="本地视觉层" /></view></template></XtfImage><XtfImage class="image-demo-slot-item image-demo-slot-left" src="/static/logo.png" :height="150"><template #top><view class="image-demo-slot-top"><XtfText class="image-demo-slot-chip" level="micro" color="inverse" text="TOP SLOT" /></view></template></XtfImage><XtfImage class="image-demo-slot-item image-demo-slot-right" src="/missing-slot-image.png" :height="150"><template #error><view class="image-demo-slot-error"><XtfText class="image-demo-slot-title" level="label" color="danger" text="自定义 error" /><XtfText class="image-demo-slot-desc" level="micro" color="secondary" text="点击此处重新加载" /></view></template></XtfImage><XtfImage class="image-demo-slot-item image-demo-slot-left" src="/static/logo.png" :height="150"><template #top><view class="image-demo-slot-top"><XtfText class="image-demo-slot-chip" level="micro" color="inverse" text="组合 TOP" /></view></template><template #overlay><view class="image-demo-slot-overlay"><XtfText class="image-demo-slot-title" level="label" color="inverse" text="组合 OVERLAY" /></view></template></XtfImage><XtfImage class="image-demo-slot-item image-demo-slot-right" src="/static/logo.png" :height="150"><template #default><view class="image-demo-slot-default"><XtfText class="image-demo-slot-title" level="label" color="primary" text="默认内容插槽" /><XtfText class="image-demo-slot-desc" level="micro" color="secondary" text="插槽可以完全替换内容" /></view></template></XtfImage></view></view>
      <view class="image-demo-section"><XtfText level="h3" text="标签主题动态切换" /><XtfImage src="/static/logo.png" :height="180" tag-text="本地资源" :tag-theme="tagTheme" /><button id="image-tag-theme" class="image-demo-button" @click="tagTheme = tagTheme == 'success' ? 'danger' : 'success'">切换 success / danger</button><text id="image-tag-state">tagTheme={{ tagTheme }}</text></view>
    </view></scroll-view>
  </XtfConfigProvider>
</template>

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

const recoveryStep = ref(0)
const tagTheme = ref("success")
const eventDetail = ref("等待 Image 原事件")
const galleryImages = ["/static/logo.png", "/static/logo.png"] as Array<string>
const recoverySrc = computed((): string => recoveryStep.value == 0 ? "/missing-recovery-image.png" : recoveryStep.value == 1 ? "/static/logo.png" : recoveryStep.value == 2 ? "" : "/static/logo.png")
const recoveryLabel = computed((): string => recoveryStep.value == 0 ? "当前：坏图，fallback 将恢复为 logo" : recoveryStep.value == 1 ? "当前：logo，继续切换可进入 empty" : recoveryStep.value == 2 ? "当前：empty src，验证清理 loading / error 状态" : "当前：logo，已从 empty 恢复")
function cycleRecovery(): void { recoveryStep.value = (recoveryStep.value + 1) % 4 }
function resetRecovery(): void { recoveryStep.value = 1 }
function recordEvent(name: string, event: any): void { const detail = event != null && event.detail != null ? JSON.stringify(event.detail) : "{}"; eventDetail.value = name + " detail=" + detail }
function recordPreview(payload: any): void { eventDetail.value = "preview current=" + payload.current + " urls=" + payload.urls.length.toString() + " src=" + payload.src }
</script>

<style>
.image-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.image-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.image-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #2563eb; }
.image-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }.image-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }.image-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }
.image-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; background-color: var(--xtf-color-surface, #ffffff); border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; }.image-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }.image-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.image-demo-ratio-row, .image-demo-lazy-row { display: flex; flex-direction: row; }.image-demo-ratio-item, .image-demo-lazy-item { display: flex; flex-direction: column; flex: 1; min-width: 0; }.image-demo-ratio-second, .image-demo-lazy-second { margin-left: 14rpx; }.image-demo-top { margin-top: 16rpx; }.image-demo-note { margin-top: 8rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 20rpx; text-align: center; }.image-demo-actions { display: flex; flex-direction: row; margin-top: 16rpx; }.image-demo-button { flex: 1; height: 68rpx; padding: 0 12rpx; color: #ffffff; font-size: 22rpx; background-color: #2563eb; border-radius: 10rpx; }.image-demo-button-light { margin-left: 12rpx; color: #1d4ed8; background-color: #dbeafe; }.image-demo-event { margin-top: 16rpx; padding: 14rpx; color: var(--xtf-color-text-secondary, #475569); background-color: var(--xtf-color-surface-muted, #f1f5f9); border-radius: 10rpx; }
.image-demo-slot-grid { display: flex; flex-direction: row; flex-wrap: wrap; }.image-demo-slot-item { width: 48%; margin-bottom: 14rpx; }.image-demo-slot-right { margin-left: 4%; }.image-demo-slot-overlay, .image-demo-slot-default, .image-demo-slot-error { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 12rpx; }.image-demo-slot-overlay { background-color: rgba(15, 23, 42, 0.66); }.image-demo-slot-top { display: flex; flex-direction: row; padding: 10rpx; }.image-demo-slot-chip { padding: 6rpx 10rpx; color: #ffffff; background-color: #dc2626; border-radius: 8rpx; }.image-demo-slot-error { background-color: #fff1f2; }.image-demo-slot-title { color: #ffffff; font-size: 22rpx; font-weight: 700; }.image-demo-slot-desc { margin-top: 6rpx; color: #e2e8f0; font-size: 18rpx; }.image-demo-slot-default { background-color: #eff6ff; }
</style>
