<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="empty-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="empty-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <text class="empty-demo-title">Empty 空状态</text>
        <view class="empty-demo-section">
          <text class="empty-demo-heading">预设状态</text>
          <view class="empty-demo-controls">
            <button v-for="item in types" :id="'empty-type-' + item" :key="item" class="empty-demo-control" :class="selectedType == item ? 'empty-demo-selected' : ''" @click="selectedType = item">{{ item }}</button>
          </view>
          <XtfEmpty id="empty-preset" :type="selectedType" :compact="compact" :float="floating" />
          <view class="empty-demo-setting"><text class="empty-demo-label">紧凑布局</text><switch id="empty-compact" :checked="compact" @change="compact = $event.detail.value" /></view>
          <view class="empty-demo-setting"><text class="empty-demo-label">浮动动画</text><switch id="empty-float" :checked="floating" @change="floating = $event.detail.value" /></view>
        </view>
        <view class="empty-demo-section">
          <text class="empty-demo-heading">图片与尺寸</text>
          <view class="empty-demo-setting"><text class="empty-demo-label">使用本地图片</text><switch id="empty-image-toggle" :checked="useImage" @change="useImage = $event.detail.value" /></view>
          <view class="empty-demo-controls">
            <button id="empty-size-default" class="empty-demo-control" @click="imageSize = ''">默认</button>
            <button id="empty-size-number" class="empty-demo-control" @click="imageSize = 180">数字 180</button>
            <button id="empty-size-string" class="empty-demo-control" @click="imageSize = '180'">字符串 180</button>
            <button id="empty-size-px" class="empty-demo-control" @click="imageSize = '96px'">96px</button>
          </view>
          <XtfEmpty id="empty-custom" :image="useImage ? '/static/logo.png' : ''" :image-size="imageSize" title="暂无商品" desc="添加商品后即可开始管理库存。" icon="shopping_bag" :icon-size="32" theme="success" :float="false" custom-class="empty-demo-custom" :custom-style="customObject ? objectStyle : 'background-color: #f0fdf4; padding: 16px;'" />
          <view class="empty-demo-setting"><text class="empty-demo-label">对象样式</text><switch id="empty-style-object" :checked="customObject" @change="customObject = $event.detail.value" /></view>
        </view>
        <view class="empty-demo-section">
          <text class="empty-demo-heading">订单请求</text>
          <XtfEmpty v-if="!loaded" id="empty-retry" type="network" action-text="重新加载" @action="handleAction" @click="handleClick" />
          <view v-else id="empty-loaded" class="empty-demo-result"><text class="empty-demo-label">订单 A001 · 待发货</text></view>
          <text id="empty-event-result" class="empty-demo-note">{{ eventLog }} | action={{ actionCount }} click={{ clickCount }} | 同一事件={{ sameEvent }} | 有事件={{ hasEvent }}</text>
          <button id="empty-reset" class="empty-demo-control" @click="resetRequest">重置请求</button>
        </view>
        <view class="empty-demo-section">
          <text class="empty-demo-heading">图片与操作插槽</text>
          <XtfEmpty id="empty-slots" title="收藏为空" desc="浏览商品，发现值得收藏的内容。" image="/static/logo.png" action-text="不应显示的默认按钮" @action="slotOuterCount += 1" @click="slotOuterCount += 1">
            <template #image><view id="empty-slot-image" class="empty-demo-slot-image"><XtfIcon name="favorite" theme="warning" size="xl" /></view></template>
            <template #action><XtfButton id="empty-slot-action" label="去浏览" theme="warning" type="outline" @click="browseCount += 1" /></template>
          </XtfEmpty>
          <text id="empty-slot-result" class="empty-demo-note">浏览次数={{ browseCount }} | 外层事件={{ slotOuterCount }}</text>
          <view v-if="browseCount > 0" id="empty-browse-result" class="empty-demo-result"><text class="empty-demo-label">推荐商品 · 便携收纳包</text></view>
        </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 XtfEmpty from "@/uni_modules/xtf-linkuiunix/components/xtf-empty/xtf-empty.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"

const types = ["default", "network", "search", "message", "favorite", "order", "notice", "404", "403", "500", "unknown"]
const selectedType = ref("default")
const compact = ref(false)
const floating = ref(true)
const useImage = ref(true)
const imageSize = ref<string | number>("")
const customObject = ref(false)
const objectStyle = { backgroundColor: "#eff6ff", padding: "20px" } as UTSJSONObject
const loaded = ref(false)
const actionCount = ref(0)
const clickCount = ref(0)
const eventLog = ref("等待重试")
const hasEvent = ref(false)
const sameEvent = ref(false)
let actionEvent: UniPointerEvent | null = null
const browseCount = ref(0)
const slotOuterCount = ref(0)

function handleAction(event: UniPointerEvent): void {
  actionCount.value += 1
  actionEvent = event
  hasEvent.value = event != null
  eventLog.value = "action"
  loaded.value = true
}
function handleClick(event: UniPointerEvent): void {
  clickCount.value += 1
  sameEvent.value = actionEvent === event
  eventLog.value += " > click"
}
function resetRequest(): void {
  loaded.value = false
  actionCount.value = 0
  clickCount.value = 0
  eventLog.value = "等待重试"
  actionEvent = null
  hasEvent.value = false
  sameEvent.value = false
}
</script>

<style>
.empty-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.empty-demo-page { display: flex; flex-direction: column; width: 100%; padding: 16px; background-color: var(--xtf-color-page, #f8fafc); }
.empty-demo-title { font-size: 24px; font-weight: 700; color: var(--xtf-color-text, #0f172a); }
.empty-demo-section { display: flex; flex-direction: column; margin-top: 24px; padding-top: 16px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--xtf-color-border, #cbd5e1); }
.empty-demo-heading { font-size: 17px; font-weight: 600; color: var(--xtf-color-text, #0f172a); margin-bottom: 12px; }
.empty-demo-controls { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8px; }
.empty-demo-control { margin: 0 8px 8px 0; padding: 6px 12px; font-size: 13px; line-height: 24px; border-radius: 4px; background-color: var(--xtf-color-surface-muted, #e2e8f0); color: var(--xtf-color-text-secondary, #334155); }
.empty-demo-selected { background-color: #0f766e; color: #ffffff; }
.empty-demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.empty-demo-label { font-size: 14px; color: var(--xtf-color-text-secondary, #334155); flex-shrink: 1; }
.empty-demo-slot-image { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 90px; height: 75px; border-radius: 8px; background-color: #fef3c7; }
.empty-demo-note { margin-top: 12px; margin-bottom: 12px; font-size: 13px; line-height: 22px; color: var(--xtf-color-text-secondary, #475569); }
.empty-demo-result { display: flex; flex-direction: column; padding: 16px; background-color: var(--xtf-color-surface-muted, #ecfdf5); }
</style>
