<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 Item" /><XtfText level="caption" color="inverse" text="插槽默认内容、父级继承与单项覆盖" /></view>
    <view class="section"><XtfText level="h3" text="默认插槽与布局" /><XtfGrid :columns="3" clickable :gap="16" @item-click="onClick"><XtfGridItem item-key="income" title="收入" :col-span="2"><view class="custom"><XtfText level="caption" color="secondary" text="TODAY" /><XtfText level="h2" text="¥ 2,480" /></view></XtfGridItem><XtfGridItem item-key="alert" title="提醒" icon="notifications" icon-theme="warning" /><XtfGridItem item-key="disabled" title="禁用" disabled icon="block" /><XtfGridItem item-key="loading" title="加载" loading icon="loading" /><XtfGridItem item-key="high" title="跨行近似" :row-span="2" icon="analytics" /></XtfGrid></view>
    <view class="section"><XtfText level="h3" text="继承与按压覆盖" /><XtfGrid :columns="2" variant="surface" clickable active-effect="scale" :item-padding="28" divider :divider-inset="18" @click="onClick"><XtfGridItem title="继承 surface" icon="home" /><XtfGridItem title="覆盖 card" variant="card" icon="favorite" icon-theme="danger" active-effect="highlight" /></XtfGrid><XtfText level="caption" color="secondary" :text="eventLog" /></view>
    <view class="section"><XtfText level="h3" text="动态插槽与独立身份" /><button class="demo-slot-reverse" size="mini" @click="entries.reverse()">倒序重复标题项</button><button class="demo-slot-toggle" size="mini" @click="toggleEntry">删除 / 恢复一项</button><button class="demo-slot-span" size="mini" @click="wide = !wide">切换首项跨度</button><XtfGrid :columns="3" clickable divider @item-click="onClick"><XtfGridItem v-for="(entry, index) in entries" :key="entry.id" :item-key="entry.id" title="相同标题" :desc="entry.id" :col-span="wide && index == 0 ? 2 : 1" :clickable="entry.id != 'blocked'" /></XtfGrid></view>
    <view class="section demo-content"><XtfText level="h3" text="共享默认内容与单项覆盖" /><button class="demo-content-update" size="mini" @click="contentLarge = !contentLarge">切换父级媒体与文字参数</button><XtfGrid :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'">
      <XtfGridItem item-key="inherited-image" title="继承图片" desc="父级默认值" image="/static/logo.png" />
      <XtfGridItem item-key="override-image" title="独立图片" desc="固定覆盖" image="/static/logo.png" image-width="40px" image-height="36px" image-radius="0px" image-mode="aspectFit" title-size="12px" desc-size="10px" title-color="#7c3aed" desc-color="#b45309" spacing="2px" align="center" />
      <XtfGridItem item-key="inherited-icon" title="继承图标" icon="home" />
      <XtfGridItem item-key="override-icon" title="独立图标" icon="star" icon-size="20px" icon-theme="warning" />
      <XtfGridItem item-key="content-loading" title="加载中" loading />
    </XtfGrid><XtfText level="caption" color="secondary" 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 XtfGrid from "@/uni_modules/xtf-linkuiunix/components/xtf-grid/xtf-grid.uvue"
import XtfGridItem from "@/uni_modules/xtf-linkuiunix/components/xtf-grid-item/xtf-grid-item.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
const eventLog = ref("等待 item-click")
const entries = ref([{ id: "first" }, { id: "second" }, { id: "blocked" }])
const wide = ref(false)
const contentLarge = ref(false)
function toggleEntry(): void { const index = entries.value.findIndex((entry): boolean => entry.id == "second"); if (index < 0) entries.value.push({ id: "second" }); else entries.value.splice(index, 1) }
function onClick(payload: any): void { eventLog.value = "自定义项索引: " + payload.index + " / " + payload.item.key }
</script>
<style>
.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: #7c3aed; }.section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.custom { display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 120rpx; }
</style>
