<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="xtf-demo-scroll xtf-page-scroll" direction="vertical">
    <view class="xtf-demo-page xtf-page-scroll-content">
      <text class="xtf-demo-title">Floating Bubble</text>
      <text class="xtf-demo-copy">拖动气泡后松手观察吸边。点击展开菜单；扇形空间不足时自动回退网格。</text>
      <view class="bubble-lab-row"><text class="xtf-demo-copy">允许拖动</text><switch id="fb-draggable" :checked="draggable" @change="draggable = $event.detail.value" /></view>
      <view class="bubble-lab-row"><text class="xtf-demo-copy">松手吸边</text><switch id="fb-snap" :checked="snap" @change="snap = $event.detail.value" /></view>
      <view class="bubble-lab-row"><text class="xtf-demo-copy">禁用</text><switch id="fb-disabled" :checked="disabled" @change="disabled = $event.detail.value" /></view>
      <view class="bubble-lab-row"><text class="xtf-demo-copy">选择后收起</text><switch id="fb-collapse" :checked="autoCollapse" @change="autoCollapse = $event.detail.value" /></view>
      <view class="bubble-lab-row"><text class="xtf-demo-copy">遮罩</text><switch id="fb-mask" :checked="mask" @change="mask = $event.detail.value" /></view>
      <view class="bubble-lab-row"><text class="xtf-demo-copy">父级接受展开更新</text><switch id="fb-accept" :checked="accept" @change="accept = $event.detail.value" /></view>
      <view class="bubble-lab-actions"><button v-for="item in layouts" :id="'fb-layout-' + item" :key="item" class="bubble-lab-button" @click="layout = item">{{ item }}</button></view>
      <view class="bubble-lab-actions"><button id="fb-left" class="bubble-lab-button" @click="resetPosition('left')">左侧重置</button><button id="fb-right" class="bubble-lab-button" @click="resetPosition('right')">右侧重置</button><button id="fb-expand" class="bubble-lab-button" @click="expanded = !expanded">外部展开 / 收起</button><button id="fb-empty" class="bubble-lab-button" @click="empty = !empty">空菜单 / 恢复</button></view>
      <text id="fb-state" class="xtf-demo-state">layout={{ layout }} / expanded={{ expanded }} / draggable={{ draggable }} / snap={{ snap }}</text>
      <text id="fb-position" class="xtf-demo-state">change={{ positionText }}</text>
      <text id="fb-expanded-event" class="xtf-demo-state">update:expanded={{ expandedEvent }}</text>
      <text id="fb-click-event" class="xtf-demo-state">click={{ clickEvent }}</text>
      <text id="fb-selection" class="xtf-demo-state">{{ status }}</text>
      <XtfFloatingBubble :menu="empty ? [] : menu" label="操作" :badge="3" :menu-layout="layout" :expanded="expanded" :draggable="draggable" :snap-to-edge="snap" :disabled="disabled" :auto-collapse="autoCollapse" :show-mask="mask" :initial-position="initialPosition" @change="recordPosition" @update:expanded="recordExpanded" @click="recordClick" @menu-select="select" />
    </view>
  </scroll-view>
  </XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
import XtfConfigProvider from '@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfFloatingBubble from "@/uni_modules/xtf-linkuiunix/components/xtf-floating-bubble/xtf-floating-bubble.uvue"
const menu = [{ key: "share", label: "分享", shortLabel: "分享", icon: "share", orderId: "SB-001" }, { key: "save", label: "保存", icon: "favorite", badge: 2 }, { key: "disabled", label: "不可用", disabled: true }] as Array<any>
const layouts = ["fan", "column", "grid"]
const layout = ref("fan")
const draggable = ref(true)
const snap = ref(true)
const disabled = ref(false)
const expanded = ref(false)
const autoCollapse = ref(true)
const mask = ref(true)
const accept = ref(true)
const empty = ref(false)
const initialPosition = ref<any>(null)
const status = ref("等待选择")
const positionText = ref("等待位置")
const expandedEvent = ref("等待事件")
const clickEvent = ref("等待事件")
function resetPosition(side: string): void { const info = uni.getWindowInfo(); expanded.value = false; initialPosition.value = { x: side == "left" ? 0 : info.windowWidth, y: Math.max(0, (info.windowHeight - info.windowWidth * 104 / 750) / 2) } }
function recordPosition(value: any): void { positionText.value = JSON.stringify(value) }
function recordExpanded(value: boolean): void { expandedEvent.value = JSON.stringify(value); if (accept.value) expanded.value = value }
function recordClick(value: any): void { clickEvent.value = JSON.stringify(value) }
function select(item: any): void { status.value = JSON.stringify(item) }
</script>
<style>
.xtf-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; }
.xtf-demo-page { display: flex; flex-direction: column; width: 100%; padding: 32rpx; background-color: var(--xtf-color-page, #f8fafc); }
.xtf-demo-title { color: var(--xtf-color-text, #0f172a); font-size: 42rpx; font-weight: 700; }
.xtf-demo-copy { margin-top: 22rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 24rpx; }
.xtf-demo-state { margin-top: 22rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 24rpx; }
.bubble-lab-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 48px; }
.bubble-lab-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 16rpx; }
.bubble-lab-button { margin: 8rpx; padding: 0 16rpx; color: #2563eb; font-size: 24rpx; }
</style>
