<template>
  <xtf-config-provider 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">
        <view class="xtf-demo-hero"><xtf-text level="display" color="inverse" text="Popover" /><xtf-text class="xtf-demo-hero-copy" level="caption" color="inverse" text="12 个锚点方向、遮罩、偏移与受控显示。" /></view>
        <view class="xtf-demo-section"><xtf-text level="h3" text="基础方向" /><xtf-text class="xtf-demo-copy" level="caption" color="secondary" text="点击触发器打开，再点空白区域关闭。" /><view class="xtf-demo-grid"><XtfPopover placement="top" title="顶部提示" content="定位到触发器顶部"><view class="xtf-demo-trigger"><text class="xtf-demo-trigger-text">Top</text></view></XtfPopover><XtfPopover placement="right" title="右侧提示" content="定位到触发器右侧"><view class="xtf-demo-trigger"><text class="xtf-demo-trigger-text">Right</text></view></XtfPopover><XtfPopover placement="bottom" title="底部提示" content="定位到触发器底部"><view class="xtf-demo-trigger"><text class="xtf-demo-trigger-text">Bottom</text></view></XtfPopover><XtfPopover placement="left" title="左侧提示"><view class="xtf-demo-trigger"><text class="xtf-demo-trigger-text">Left</text></view><template #content><view class="xtf-demo-slot"><text class="xtf-demo-slot-text">内容插槽随锚点定位</text></view></template></XtfPopover></view></view>
        <view class="xtf-demo-section"><xtf-text level="h3" text="对齐与偏移" /><xtf-text class="xtf-demo-copy" level="caption" color="secondary" text="start 与 end 可让浮层对齐触发器边缘。" /><view class="xtf-demo-grid"><XtfPopover placement="top-start" title="Top start" content="起点对齐"><view class="xtf-demo-trigger xtf-demo-trigger-small"><text class="xtf-demo-trigger-text">TS</text></view></XtfPopover><XtfPopover placement="top-end" title="Top end" content="终点对齐"><view class="xtf-demo-trigger xtf-demo-trigger-small"><text class="xtf-demo-trigger-text">TE</text></view></XtfPopover><XtfPopover placement="bottom-start" title="Bottom start" content="起点对齐"><view class="xtf-demo-trigger xtf-demo-trigger-small"><text class="xtf-demo-trigger-text">BS</text></view></XtfPopover><XtfPopover placement="bottom-end" title="Bottom end" content="终点对齐"><view class="xtf-demo-trigger xtf-demo-trigger-small"><text class="xtf-demo-trigger-text">BE</text></view></XtfPopover><XtfPopover placement="right-start" title="Right start" content="纵向起点"><view class="xtf-demo-trigger xtf-demo-trigger-small"><text class="xtf-demo-trigger-text">RS</text></view></XtfPopover><XtfPopover placement="left-end" title="Left end" content="纵向终点"><view class="xtf-demo-trigger xtf-demo-trigger-small"><text class="xtf-demo-trigger-text">LE</text></view></XtfPopover><XtfPopover placement="bottom" :offset-x="18" :offset-y="8" title="偏移量" content="向右 18px，向下 8px"><view class="xtf-demo-trigger xtf-demo-trigger-small"><text class="xtf-demo-trigger-text">XY</text></view></XtfPopover></view></view>
        <view class="xtf-demo-section"><xtf-text level="h3" text="受控与遮罩" /><xtf-text class="xtf-demo-copy" level="caption" color="secondary" text="手动模式由外部状态管理显示。" /><XtfPopover :show="manualVisible" trigger="manual" placement="bottom" overlay title="需要确认" content="点击遮罩或下方按钮关闭。" @close="manualVisible = false"><xtf-button label="打开受控浮层" block @click="manualVisible = true" /></XtfPopover><xtf-button v-if="manualVisible" class="xtf-demo-close" type="outline" label="关闭浮层" block @click="manualVisible = false" /></view>
        <view class="xtf-demo-section">
          <XtfPopover custom-class="popover-persistent" :close-on-click-outside="false" placement="top" title="固定提示" content="再次点击入口收起"><view class="xtf-demo-trigger"><text class="xtf-demo-trigger-text">固定提示</text></view></XtfPopover>
          <XtfPopover custom-class="popover-hover" trigger="hover" placement="top" title="悬停提示" content="查看详细信息"><view class="xtf-demo-trigger"><text class="xtf-demo-trigger-text">悬停查看</text></view></XtfPopover>
        </view>
      </view>
    </scroll-view>
  </xtf-config-provider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfPopover from "@/uni_modules/xtf-linkuiunix/components/xtf-popover/xtf-popover.uvue"
const manualVisible = ref(false)
</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: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.xtf-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }.xtf-demo-hero-copy { margin-top: 12rpx; }.xtf-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.xtf-demo-copy { margin-top: 8rpx; }.xtf-demo-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-top: 24rpx; }.xtf-demo-trigger { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 280rpx; min-height: 100rpx; margin-bottom: 28rpx; border-radius: 12rpx; background-color: #0f766e; }.xtf-demo-trigger-small { width: 148rpx; min-height: 82rpx; }.xtf-demo-trigger-text { color: #ffffff; font-size: 24rpx; font-weight: 700; }.xtf-demo-slot { display: flex; flex-direction: column; }.xtf-demo-slot-text { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }.xtf-demo-close { margin-top: 16rpx; }
</style>
