<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme"><scroll-view class="scroll xtf-page-scroll" direction="vertical"><view class="body xtf-page-scroll-content">
    <view class="hero"><XtfText level="display" color="inverse" text="Grid" /><XtfText level="caption" color="inverse" text="数据模式、单项覆盖、分隔线和按压效果" /></view>
    <view class="section"><XtfText level="h3" text="数据入口与单项图标覆盖" /><XtfGrid :items="items" :columns="columns" clickable cascade :column-gap="16" :row-gap="16" :media-width="largeMedia ? 120 : 88" :media-height="largeMedia ? 120 : 88" :media-radius="20" @item-click="onClick" /><view class="row"><XtfButton label="2 columns" type="light" @click="columns = 2" /><XtfButton label="4 columns" type="outline" @click="columns = 4" /></view><view class="row"><button class="demo-grid-reverse" size="mini" @click="items.reverse()">倒序</button><button class="demo-grid-media" size="mini" @click="largeMedia = !largeMedia">切换媒体尺寸</button><button class="demo-grid-empty" size="mini" @click="toggleEmpty">清空 / 恢复</button></view></view>
    <view class="section"><XtfText level="h3" text="分割线与跨度" /><XtfGrid :items="spanItems" :columns="3" divider :divider-inset="20" clickable active-effect="highlight" :item-min-height="110" @click="onClick" /><XtfText level="caption" color="secondary" text="colSpan 会真实占用列宽；Flexbox 下 rowSpan 通过最小高度近似，不重排其他单元。" /></view>
    <view class="section demo-grid-units"><XtfText level="h3" text="数据项尺寸单位" /><button class="demo-grid-units-toggle" size="mini" @click="sizeMode = (sizeMode + 1) % 3">切换 rpx / px / 零值与非法值</button><XtfText class="demo-grid-units-state" level="caption" color="secondary" :text="'尺寸模式 ' + sizeMode" /><XtfText level="caption" color="secondary" text="下方标尺宽 100rpx；非法单项值回退父级配置，0 表示显式零值。" /><view class="demo-unit-scale" /><XtfGrid :items="sizeItems" :columns="2" :item-padding="18" :item-radius="14" :item-min-height="90" /><XtfText level="caption" color="secondary" text="minHeight 是最小高度；rowSpan 仍按至少 120rpx 的行高近似，不提供二维重排。" /></view>
    <view class="section demo-content"><XtfText level="h3" text="共享默认内容与单项覆盖" /><button class="demo-content-update" size="mini" @click="contentLarge = !contentLarge">切换父级媒体与文字参数</button><XtfGrid :items="contentItems" :columns="2" layout="media-top" :icon-size="contentLarge ? '32px' : '24px'" :theme="contentLarge ? 'success' : 'primary'" :media-width="contentLarge ? '96px' : '80px'" :media-height="contentLarge ? '88px' : '72px'" :media-radius="contentLarge ? '16px' : '8px'" :image-width="contentLarge ? '80px' : '64px'" :image-height="contentLarge ? '72px' : '56px'" :image-mode="contentLarge ? 'aspectFit' : 'aspectFill'" :title-size="contentLarge ? '18px' : '14px'" :desc-size="contentLarge ? '13px' : '11px'" :title-color="contentLarge ? '#15803d' : '#1d4ed8'" :desc-color="contentLarge ? '#166534' : '#475569'" :spacing="contentLarge ? '12px' : '6px'" :align="contentLarge ? 'right' : 'left'" /><XtfText level="caption" color="secondary" text="继承项随父级更新；独立图片与图标保留单项配置。" /></view>
    <view class="section"><XtfText level="h3" text="空状态" /><XtfGrid :items="emptyItems" empty-text="没有可展示的入口" empty-desc="数据模式空状态" /></view><XtfText level="caption" color="secondary" :text="eventLog" />
  </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 XtfGrid from "@/uni_modules/xtf-linkuiunix/components/xtf-grid/xtf-grid.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"
const columns = ref(4)
const largeMedia = ref(false)
const contentLarge = ref(false)
const sizeMode = ref(0)
const sizeItems = computed((): Array<any> => [
  { key: "mixed-units", title: "px / rpx", padding: sizeMode.value == 0 ? "20rpx" : sizeMode.value == 1 ? "8px" : 0, radius: sizeMode.value == 0 ? "8px" : sizeMode.value == 1 ? "12rpx" : "0rpx", minHeight: sizeMode.value == 0 ? "160rpx" : sizeMode.value == 1 ? "120px" : "0" },
  { key: "numeric-string", title: "数字字符串 / 回退", padding: sizeMode.value == 0 ? "12" : sizeMode.value == 1 ? "0" : "bad", radius: sizeMode.value == 0 ? "6" : sizeMode.value == 1 ? 0 : Infinity, minHeight: sizeMode.value == 0 ? "100" : sizeMode.value == 1 ? "0px" : NaN },
  { key: "zero", title: "固定零值", padding: 0, radius: "0px", minHeight: "0rpx" },
  { key: "row-span", title: "跨行最小高度", padding: "0", radius: 0, minHeight: sizeMode.value == 0 ? "150rpx" : sizeMode.value == 1 ? "100px" : "0px", rowSpan: 2 }
])
const contentItems: Array<any> = [
  { key: "inherited-image", title: "继承图片", desc: "父级默认值", image: "/static/logo.png" },
  { key: "override-image", title: "独立图片", desc: "固定覆盖", image: "/static/logo.png", imageWidth: "40px", imageHeight: "36px", imageRadius: "0px", imageMode: "aspectFit", titleSize: "12px", descSize: "10px", titleColor: "#7c3aed", descColor: "#b45309", spacing: "2px", align: "center" },
  { key: "inherited-icon", title: "继承图标", icon: "home" },
  { key: "override-icon", title: "独立图标", icon: "star", iconSize: "20px", iconTheme: "warning" },
  { key: "content-loading", title: "加载中", loading: true }
]
const eventLog = ref("等待点击")
const emptyItems = ref([] as Array<any>)
function initialItems(): Array<any> { return [{ key: "bill", title: "账单", desc: "本月", icon: "receipt_long", badge: 3, clickable: true, iconTheme: "success", iconSize: "md" }, { key: "wallet", title: "钱包", image: "/static/logo.png", desc: "余额", clickable: true }, { key: "stats", title: "统计", icon: "bar_chart", clickable: true, iconTheme: "warning" }, { key: "settings", title: "设置", icon: "settings", clickable: false, variant: "card" }] }
const items = ref(initialItems())
const spanItems = ref([{ key: "wide", title: "跨两列", icon: "dashboard", colSpan: 2, clickable: true }, { key: "normal", title: "普通", icon: "star", clickable: true }, { key: "high", title: "高项", icon: "analytics", rowSpan: 2, clickable: true }, { key: "message", title: "消息", icon: "notifications", clickable: true }] as Array<any>)
function toggleEmpty(): void { items.value = items.value.length > 0 ? [] : initialItems() }
function onClick(payload: any): void { eventLog.value = "点击索引: " + payload.index + " / " + payload.item.key }
</script>
<style>
.demo-unit-scale { width: 100rpx; height: 4rpx; background-color: #b45309; }
.scroll { flex: 1; width: 100%; }.body { display: flex; flex-direction: column; padding: 24rpx; }.hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #b45309; }.section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.row { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 18rpx; }
</style>
