<template>
  <xtf-config-provider class="demo-theme-root" :theme="demoTheme">
    <view class="page">
      <scroll-view class="scroll xtf-page-scroll" direction="vertical"><view class="body xtf-safe-bottom xtf-page-scroll-content">
        <view class="hero"><xtf-text level="display" color="inverse" text="Popup" /><xtf-text level="caption" color="inverse" text="九宫格、偏移、遮罩内缩与受控关闭" /></view>
        <view class="section"><xtf-text level="h3" text="九宫格位置" /><view class="row"><xtf-button label="左上" @click="open('top-left')" /><xtf-button class="row-button-gap" label="上中" @click="open('top-center')" /><xtf-button class="row-button-gap" label="右上" @click="open('top-right')" /></view><view class="row"><xtf-button label="左中" @click="open('center-left')" /><xtf-button class="row-button-gap" label="中心" @click="open('center')" /><xtf-button class="row-button-gap" label="右中" @click="open('center-right')" /></view><view class="row"><xtf-button label="左下" @click="open('bottom-left')" /><xtf-button class="row-button-gap" label="下中" @click="open('bottom-center')" /><xtf-button class="row-button-gap" label="右下" @click="open('bottom-right')" /></view></view>
        <view class="section"><xtf-text level="h3" text="原生边缘与自定义" /><xtf-button label="Bottom handle + safe area" block @click="open('bottom')" /><xtf-button label="Custom coordinate" type="outline" block @click="open('custom')" /><xtf-button label="遮罩内缩" type="light" block @click="openInsetOverlay" /><xtf-button label="同步关闭拦截" type="light" block @click="openBlocked" /></view>
         <view class="section"><xtf-text level="h3" text="遮罩语义" /><view class="overlay-switch-row"><view class="overlay-switch-copy"><xtf-text level="body" :text="closeOnOverlay ? '点击遮罩关闭' : '点击遮罩保持打开'" /><xtf-text level="caption" color="secondary" text="控制当前 Popup 的遮罩关闭行为" /></view><xtf-switch v-model="closeOnOverlay" active-text="开启" inactive-text="关闭" label-placement="outside-right" /></view><view class="row"><xtf-button label="显示遮罩" @click="openOverlay(true)" /><xtf-button class="overlay-button" label="隐藏遮罩" type="outline" @click="openOverlay(false)" /></view><xtf-text level="caption" color="secondary" text="默认开启；关闭开关后，点击遮罩不会关闭面板。beforeClose 仍可拦截关闭。" /><xtf-text level="caption" color="secondary" :text="log" /></view>
      </view></scroll-view>
       <xtf-popup :show="show" :position="position" :overlay="overlay" :close-on-click-overlay="closeOnOverlay" :show-handle="position == 'bottom'" :safe-area-inset-bottom="position == 'bottom'" :show-close="blocked" :before-close="beforeClose" :destroy-on-close="destroyOnClose" :close-on-click-blank="closeOnBlank" :overlay-inset-top="useInsetOverlay ? 80 : 0" :overlay-inset-right="useInsetOverlay ? 24 : 0" :overlay-inset-bottom="useInsetOverlay ? 24 : 0" :overlay-inset-left="useInsetOverlay ? 24 : 0" :overlay-close-only-visible-region="true" :width="position == 'custom' ? 460 : 0" :custom-top="180" :custom-left="96" :custom-gap-x="12" :custom-gap-y="8" :offset-x="position == 'custom' ? 12 : 0" :offset-y="position == 'custom' ? 6 : 0" @update:show="show = $event" @open="setLog('open')" @opened="setLog('opened')" @close="setLog('close')" @closed="setLog('closed')" @blocked-close="setLog('blocked-close')"><view class="popup-content"><xtf-text level="h3" text="Popup panel" /><xtf-text level="caption" color="secondary" :text="'当前: ' + position" /><xtf-button class="popup-close-button" label="Close" block @click="show = false" /></view></xtf-popup>
    </view>
  </xtf-config-provider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
const show = ref(false)
const position = ref("center")
const blocked = ref(false)
const destroyOnClose = ref(true)
const closeOnBlank = ref(true)
const closeOnOverlay = ref(true)
const useInsetOverlay = ref(false)
const overlay = ref(true)
const log = ref("等待事件")
function open(value: string): void { overlay.value = true; useInsetOverlay.value = false; blocked.value = false; closeOnBlank.value = true; position.value = value; show.value = true }
function openInsetOverlay(): void { overlay.value = true; useInsetOverlay.value = true; blocked.value = false; closeOnBlank.value = true; position.value = "center"; show.value = true }
function openBlocked(): void { overlay.value = true; useInsetOverlay.value = false; blocked.value = true; closeOnBlank.value = true; position.value = "center"; show.value = true }
function openOverlay(value: boolean): void { overlay.value = value; useInsetOverlay.value = false; blocked.value = false; closeOnBlank.value = true; position.value = "center"; show.value = true }
function beforeClose(payload: UTSJSONObject): boolean { return !blocked.value || payload["source"] == "api" }
function setLog(value: string): void { log.value = "事件: " + value }
</script>
<style>
.page { display: flex; flex: 1; flex-direction: column; min-height: 0; }.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: #2563eb; }.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; margin-top: 16rpx; }.row-button-gap { margin-left: 16rpx; }.overlay-button { margin-left: 16rpx; }.overlay-switch-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 18rpx; padding: 16rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }.overlay-switch-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; margin-right: 16rpx; }.popup-content { display: flex; flex-direction: column; padding: 36rpx; min-width: 420rpx; }.popup-close-button { margin-top: 22rpx; }
</style>
