<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="avatar-group-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="avatar-group-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="avatar-group-demo-hero">
          <XtfText class="avatar-group-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="avatar-group-demo-title" level="display" color="inverse" text="Avatar Group" />
          <XtfText class="avatar-group-demo-intro" level="caption" color="inverse" text="用于紧凑展示一组成员，并保留溢出数量。" />
        </view>
        <view class="avatar-group-demo-section">
          <XtfText class="avatar-group-demo-section-title" level="h3" text="成员群组" />
          <XtfText class="avatar-group-demo-section-desc" level="caption" color="secondary" text="通过 items 渲染图片、文本和状态。" />
           <XtfAvatarGroup id="group-team" :items="team" clickable size="lg" overlap="20" @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
        <view class="avatar-group-demo-section">
          <XtfText class="avatar-group-demo-section-title" level="h3" text="最大展示数" />
          <XtfText class="avatar-group-demo-section-desc" level="caption" color="secondary" text="超过 max 的成员合并为 +N。" />
           <XtfAvatarGroup id="group-max" :items="team" clickable max="3" size="lg" overlap="18" theme="success" @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
        <view class="avatar-group-demo-section">
          <XtfText class="avatar-group-demo-section-title" level="h3" text="形状与重叠" />
          <XtfText class="avatar-group-demo-section-desc" level="caption" color="secondary" text="rounded 形状可与不同 overlap 值组合。" />
           <XtfAvatarGroup id="group-shape" :items="team" clickable max="4" size="lg" shape="rounded" overlap="8" theme="warning" @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
			<view class="avatar-group-demo-section">
				<XtfText class="avatar-group-demo-section-title" level="h3" text="布局与顺序" />
				<XtfText class="avatar-group-demo-section-desc" level="caption" color="secondary" text="stack、spread、wave、reverse 和对齐方式。" />
				<XtfText class="avatar-group-demo-variant-label" level="label" color="secondary" text="Stack" />
				<XtfAvatarGroup id="group-stack" :items="team" max="4" size="md" layout="stack" overlap="16" />
				<XtfText class="avatar-group-demo-variant-label" level="label" color="secondary" text="Spread" />
				<XtfAvatarGroup id="group-spread" :items="team" max="4" size="md" layout="spread" overlap="12" theme="success" />
				<XtfText class="avatar-group-demo-variant-label" level="label" color="secondary" text="Wave reversed" />
				<XtfAvatarGroup id="group-wave" :items="team" max="4" size="md" layout="wave" :reverse="true" overlap="16" theme="info" />
			</view>
			<view class="avatar-group-demo-section">
				<XtfText class="avatar-group-demo-section-title" level="h3" text="溢出项样式" />
				<XtfText class="avatar-group-demo-section-desc" level="caption" color="secondary" text="文字、soft、outline、avatar 和自定义文案。" />
				<XtfText class="avatar-group-demo-variant-label" level="label" color="secondary" text="Soft +N" />
				<XtfAvatarGroup id="group-soft" :items="team" max="3" size="lg" more-variant="soft" />
				<XtfText class="avatar-group-demo-variant-label" level="label" color="secondary" text="Outline Members" />
				<XtfAvatarGroup id="group-outline" :items="team" max="3" size="lg" more-variant="outline" more-text="More" />
				<XtfText class="avatar-group-demo-variant-label" level="label" color="secondary" text="Avatar +N" />
				<XtfAvatarGroup id="group-more-avatar" :items="team" max="3" size="lg" more-type="avatar" more-theme="danger" more-ring />
			</view>
        <view id="demo-dynamic" class="avatar-group-demo-section">
          <XtfText level="h3" text="动态数量与尺寸" />
          <view class="avatar-group-demo-controls">
            <button id="cycle-max" class="avatar-group-demo-button" @click="cycleMax">max: {{ dynamicMax }}</button>
            <button id="cycle-size" class="avatar-group-demo-button" @click="cycleSize">size: {{ dynamicSize }}</button>
          </view>
          <XtfAvatarGroup id="group-dynamic" :items="team" :max="dynamicMax" :size="dynamicSize" clickable wrap @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
        <view id="demo-order" class="avatar-group-demo-section">
          <XtfText level="h3" text="排序与间距" />
          <view class="avatar-group-demo-controls">
            <button id="toggle-position" class="avatar-group-demo-button" @click="morePosition = morePosition == 'end' ? 'start' : 'end'">{{ morePosition }}</button>
            <button id="cycle-layout" class="avatar-group-demo-button" @click="cycleLayout">{{ layout }}</button>
            <button id="toggle-reverse" class="avatar-group-demo-button" @click="reversed = !reversed">反转 {{ reversed }}</button>
            <button id="toggle-overlap" class="avatar-group-demo-button" @click="overlap = overlap == 14 ? 0 : 14">间距 {{ overlap }}</button>
          </view>
          <XtfAvatarGroup id="group-order" :items="team" max="3" :layout="layout" :overlap="overlap" :reverse="reversed" :more-position="morePosition" clickable @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
        <view id="demo-clickable" class="avatar-group-demo-section">
          <XtfText level="h3" text="交互开关" />
          <view class="avatar-group-demo-controls">
            <text class="avatar-group-demo-control-label">成员</text><switch id="toggle-clickable" :checked="clickable" @change="clickable = $event.detail.value" />
            <text class="avatar-group-demo-control-label">更多</text><switch id="toggle-more-clickable" :checked="moreClickable" @change="moreClickable = $event.detail.value" />
            <text class="avatar-group-demo-control-label">禁用</text><switch id="toggle-disabled" :checked="disabled" @change="disabled = $event.detail.value" />
          </view>
          <XtfAvatarGroup id="group-clickable" :items="interactiveTeam" max="3" :clickable="clickable" :more-clickable="moreClickable" :disabled="disabled" @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
        <view id="demo-more" class="avatar-group-demo-section">
          <XtfText level="h3" text="更多文案与图片" />
          <view class="avatar-group-demo-controls">
            <button id="toggle-more-text" class="avatar-group-demo-button" @click="moreText = moreText.length > 0 ? '' : '更多成员'">切换文案</button>
            <button id="cycle-more-src" class="avatar-group-demo-button" @click="cycleMoreSrc">切换图片</button>
          </view>
          <XtfAvatarGroup id="group-more-dynamic" :items="team" max="2" size="lg" :more-text="moreText" :more-src="moreSrc" clickable @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
        <view id="demo-boundaries" class="avatar-group-demo-section">
          <XtfText level="h3" text="空数组与单成员" />
          <XtfAvatarGroup id="group-empty" :items="emptyTeam" clickable @item-click="handleItemClick" @more-click="handleMoreClick" />
          <XtfAvatarGroup id="group-single" :items="singleTeam" max="1" clickable @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
        <view id="demo-members" class="avatar-group-demo-section">
          <XtfText level="h3" text="成员与字段更新" />
          <view class="avatar-group-demo-controls">
            <button id="add-member" class="avatar-group-demo-button" @click="addMember">添加成员</button>
            <button id="remove-member" class="avatar-group-demo-button" @click="members.pop()">删除成员</button>
            <button id="change-fields" class="avatar-group-demo-button" @click="changeFields">更新字段</button>
            <button id="remove-fields" class="avatar-group-demo-button" @click="removeFields">删除字段</button>
            <button id="reset-members" class="avatar-group-demo-button" @click="resetMembers">外部重置</button>
          </view>
          <XtfAvatarGroup id="group-members" :items="members" max="3" ring clickable @item-click="handleItemClick" @more-click="handleMoreClick" />
        </view>
        <view class="avatar-group-demo-section">
          <XtfText class="avatar-group-demo-section-title" level="h3" text="事件" />
          <XtfText class="avatar-group-demo-section-desc" level="caption" color="secondary" text="点击成员或 +N 查看事件计数。" />
          <view class="avatar-group-demo-event-panel">
            <XtfText class="avatar-group-demo-event-label" level="label" color="secondary" text="成员点击" />
            <XtfText class="avatar-group-demo-event-value" level="h3" color="primary" :text="itemClickCount.toString()" />
            <XtfText class="avatar-group-demo-event-label avatar-group-demo-event-label-spaced" level="label" color="secondary" text="更多点击" />
            <XtfText class="avatar-group-demo-event-value" level="h3" color="primary" :text="moreClickCount.toString()" />
          </view>
          <text id="event-payload" class="avatar-group-demo-payload">{{ lastPayload }}</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 XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfAvatarGroup from "@/uni_modules/xtf-linkuiunix/components/xtf-avatar-group/xtf-avatar-group.uvue"

const team = ref<UTSJSONObject[]>([
  { id: "alice", src: "/static/avatar-alice.svg", text: "", name: "Alice", status: "online", department: "设计", account: { uid: 101, role: "owner" } },
  { id: "ben", src: "/static/avatar-ben.svg", text: "", name: "Ben", status: "busy", department: "研发" },
  { id: "chen", src: "", text: "陈", name: "", status: "away" },
  { id: "dana", src: "", text: "Dana", name: "", status: "online" },
  { id: "e", src: "", text: "E", name: "", status: "offline" },
  { id: "f", src: "", text: "F", name: "", status: "" }
])
const itemClickCount = ref(0)
const moreClickCount = ref(0)

const lastPayload = ref("")
const maxCases: (string | number)[] = [3, "2", 0, "0", -1, "invalid", "Infinity", "0.5", "2.8", 99]
let maxIndex = 0
const dynamicMax = ref<string | number>(3)
const sizes: (string | number)[] = ["md", "xs", "lg", 96, "72", "36px"]
let sizeIndex = 0
const dynamicSize = ref<string | number>("md")
const layout = ref("stack")
const morePosition = ref("end")
const reversed = ref(false)
const overlap = ref(14)
const clickable = ref(true)
const moreClickable = ref(true)
const disabled = ref(false)
const interactiveTeam: UTSJSONObject[] = [{ id: "local", name: "单项", clickable: true }, { id: "disabled", name: "禁用", disabled: true }, { id: "inherit", name: "继承" }, { id: "hidden", name: "隐藏" }]
const emptyTeam: UTSJSONObject[] = []
const singleTeam: UTSJSONObject[] = [{ id: "single", name: "Solo", account: { uid: 900 } }]
const moreText = ref("")
const moreSrc = ref("")
let moreSrcIndex = 0
const members = ref<UTSJSONObject[]>(team.value.map((item: UTSJSONObject): UTSJSONObject => ({ ...item })))
let memberId = 0
function cycleMax(): void { maxIndex = (maxIndex + 1) % maxCases.length; dynamicMax.value = maxCases[maxIndex] }
function cycleSize(): void { sizeIndex = (sizeIndex + 1) % sizes.length; dynamicSize.value = sizes[sizeIndex] }
function cycleLayout(): void { layout.value = layout.value == "stack" ? "spread" : layout.value == "spread" ? "wave" : "stack" }
function cycleMoreSrc(): void {
  moreSrcIndex = (moreSrcIndex + 1) % 3
  moreSrc.value = moreSrcIndex == 1 ? "/static/avatar-group-missing.png" : moreSrcIndex == 2 ? "/static/avatar-alice.svg" : ""
}
function addMember(): void { memberId += 1; members.value.push({ id: "added-" + memberId, name: "成员 " + memberId, department: "运营", account: { uid: 1000 + memberId } }) }
function changeFields(): void {
  if (members.value.length == 0) return
  const item = members.value[0]
  item["src"] = item["src"] == "/static/avatar-group-missing.png" ? "/static/avatar-alice.svg" : "/static/avatar-group-missing.png"
  item["text"] = "更新"
  item["status"] = "busy"
  item["ring"] = false
  item["size"] = 80
  item["department"] = "财务"
}
function removeFields(): void {
  if (members.value.length == 0) return
  const item = members.value[0]
  delete item["src"]
  delete item["text"]
  delete item["name"]
  delete item["ring"]
  delete item["size"]
  delete item["status"]
}
function resetMembers(): void { members.value = team.value.map((item: UTSJSONObject): UTSJSONObject => ({ ...item })) }
type ItemPayload = { item: UTSJSONObject; index: number; event: UniPointerEvent }
type MorePayload = { restCount: number; items: UTSJSONObject[]; hiddenItems: UTSJSONObject[]; event: UniPointerEvent }
// Copy reactive event data recursively before passing it to the JSON serializer.
function payloadSnapshot(value: any): any {
  if (Array.isArray(value)) return value.map((item: any): any => payloadSnapshot(item))
  if (value == null || typeof value != "object") return value
  const result: UTSJSONObject = {}
  Object.keys(value).forEach((key: string) => { result[key] = payloadSnapshot(value[key]) })
  return result
}
function handleItemClick(payload: ItemPayload): void {
  itemClickCount.value += 1
  lastPayload.value = JSON.stringify({ item: payloadSnapshot(payload.item), index: payload.index, eventType: payload.event.type }) ?? ""
}

function handleMoreClick(payload: MorePayload): void {
  moreClickCount.value += 1
  const items = payloadSnapshot(payload.items)
  const hiddenItems = payloadSnapshot(payload.hiddenItems)
  lastPayload.value = JSON.stringify({ restCount: payload.restCount, items, hiddenItems, eventType: payload.event.type }) ?? ""
}
</script>

<style>
.avatar-group-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.avatar-group-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.avatar-group-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.avatar-group-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.avatar-group-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.avatar-group-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; }
.avatar-group-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.avatar-group-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.avatar-group-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.avatar-group-demo-event-panel { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 18rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.avatar-group-demo-event-label { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.avatar-group-demo-event-label-spaced { margin-left: 24rpx; }
.avatar-group-demo-event-value { margin-left: 8rpx; color: var(--xtf-color-primary, #2563eb); font-size: 28rpx; font-weight: 700; }
.avatar-group-demo-variant-label { margin-top: 18rpx; margin-bottom: 10rpx; }
.avatar-group-demo-controls { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-top: 16rpx; margin-bottom: 20rpx; }
.avatar-group-demo-button { margin: 4rpx; padding: 8rpx 16rpx; font-size: 24rpx; }
.avatar-group-demo-control-label { margin: 8rpx; font-size: 24rpx; }
.avatar-group-demo-payload { margin-top: 16rpx; font-size: 22rpx; line-height: 1.5; word-break: break-all; }
</style>
