<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="tooltip-demo-scroll xtf-page-scroll" direction="vertical">
    <view class="tooltip-demo-page xtf-page-scroll-content">
      <text class="tooltip-demo-kicker">XTF LINKUI / FEEDBACK</text>
      <text class="tooltip-demo-title">Tooltip</text>
      <view class="tooltip-demo-section">
        <text class="tooltip-demo-heading">方向与对齐</text>
        <view class="tooltip-demo-options">
          <view v-for="item in placements" :key="item.value" class="tooltip-demo-option" :class="placement == item.value ? 'tooltip-demo-selected' : ''" @click="changePlacement(item.value)"><text class="tooltip-demo-option-text">{{ item.label }}</text></view>
        </view>
        <view class="tooltip-demo-stage">
          <XtfTooltip v-model:show="directionShow" :placement="placement" content="库存含已锁定的订单数量。">
            <view id="tooltip-direction-trigger" class="tooltip-demo-trigger"><text class="tooltip-demo-trigger-text">可用库存</text></view>
          </XtfTooltip>
        </view>
        <text id="tooltip-direction-state" class="tooltip-demo-result">{{ placement }} · {{ directionShow ? '已打开' : '已关闭' }}</text>
      </view>
      <view class="tooltip-demo-section">
        <text class="tooltip-demo-heading">箭头与外部关闭</text>
        <view class="tooltip-demo-setting"><text class="tooltip-demo-label">显示箭头</text><switch id="tooltip-arrow" :checked="arrow" @change="arrow = $event.detail.value" /></view>
        <view class="tooltip-demo-setting"><text class="tooltip-demo-label">点击外部关闭</text><switch id="tooltip-outside" :checked="outside" @change="outside = $event.detail.value" /></view>
        <view class="tooltip-demo-stage">
          <XtfTooltip v-model:show="optionsShow" :arrow="arrow" :close-on-click-outside="outside" content="运费在优惠抵扣后单独计算。">
            <view id="tooltip-options-trigger" class="tooltip-demo-trigger"><text class="tooltip-demo-trigger-text">运费规则</text></view>
          </XtfTooltip>
        </view>
        <XtfButton id="tooltip-options-close" label="关闭运费提示" type="outline" size="sm" @click="optionsShow = false" />
        <text class="tooltip-demo-result">{{ optionsShow ? '已打开' : '已关闭' }} · 箭头{{ arrow ? '开启' : '关闭' }} · 外部关闭{{ outside ? '开启' : '关闭' }}</text>
      </view>
      <view class="tooltip-demo-section">
        <text class="tooltip-demo-heading">受控状态与禁用</text>
        <view class="tooltip-demo-setting"><text class="tooltip-demo-label">禁用触发</text><switch id="tooltip-disabled" :checked="disabled" @change="setDisabled($event.detail.value)" /></view>
        <view class="tooltip-demo-setting"><text class="tooltip-demo-label">父级接受更新</text><switch id="tooltip-accept" :checked="accept" @change="accept = $event.detail.value" /></view>
        <view class="tooltip-demo-stage">
          <XtfTooltip :show="controlledShow" :disabled="disabled" content="此操作仅限店铺管理员。" @update:show="recordRequest" @open="lifecycle = 'open'; opens++" @close="lifecycle = 'close'; closes++">
            <view id="tooltip-controlled-trigger" class="tooltip-demo-trigger" :class="disabled ? 'tooltip-demo-muted' : ''"><text class="tooltip-demo-trigger-text">操作权限</text></view>
          </XtfTooltip>
        </view>
        <view class="tooltip-demo-actions"><view class="tooltip-demo-action"><XtfButton id="tooltip-open" label="打开" size="sm" :disabled="disabled" @click="controlledShow = true" /></view><XtfButton id="tooltip-close" label="关闭" size="sm" type="outline" @click="controlledShow = false" /></view>
        <text id="tooltip-controlled-state" class="tooltip-demo-result">{{ controlledShow ? '已打开' : '已关闭' }} · 状态变更 {{ changes }} 次</text>
        <text id="tooltip-lifecycle" class="tooltip-demo-result">{{ lifecycle }} / open={{ opens }} / close={{ closes }}</text>
        <text id="tooltip-request" class="tooltip-demo-result">update:show={{ requestText }} / accepted={{ accept }}</text>
      </view>
    </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, watch } from "vue"
import XtfTooltip from "@/uni_modules/xtf-linkuiunix/components/xtf-tooltip/xtf-tooltip.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
const placements = [{ label: "上方", value: "top" }, { label: "下方", value: "bottom" }, { label: "左侧", value: "left" }, { label: "右侧", value: "right" }, { label: "起始对齐", value: "bottom-start" }, { label: "末尾对齐", value: "bottom-end" }]
const placement = ref("bottom")
const directionShow = ref(false)
const optionsShow = ref(false)
const controlledShow = ref(false)
const arrow = ref(true)
const outside = ref(true)
const disabled = ref(false)
const accept = ref(true)
const requestText = ref("等待事件")
const changes = ref(0)
const lifecycle = ref("等待事件")
const opens = ref(0)
const closes = ref(0)
function changePlacement(value: string): void { directionShow.value = false; placement.value = value }
function setDisabled(value: boolean): void { disabled.value = value; if (value) controlledShow.value = false }
function recordRequest(value: boolean): void { requestText.value = JSON.stringify(value); if (accept.value) controlledShow.value = value }
watch(controlledShow, () => { changes.value += 1 })
</script>

<style>
.tooltip-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; }
.tooltip-demo-page { display: flex; flex-direction: column; padding: 32rpx; background-color: var(--xtf-color-page, #f8fafc); }
.tooltip-demo-kicker { font-size: 20rpx; color: var(--xtf-color-text-secondary, #64748b); }
.tooltip-demo-title { margin-top: 12rpx; font-size: 42rpx; font-weight: 700; color: var(--xtf-color-text, #0f172a); }
.tooltip-demo-section { display: flex; flex-direction: column; padding-top: 32rpx; padding-bottom: 28rpx; border-bottom: 1px solid var(--xtf-color-border, #e2e8f0); }
.tooltip-demo-heading { font-size: 30rpx; font-weight: 600; color: var(--xtf-color-text, #0f172a); }
.tooltip-demo-options { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20rpx; }
.tooltip-demo-option { padding: 12rpx 18rpx; margin-right: 10rpx; margin-bottom: 10rpx; border-radius: 6px; background-color: var(--xtf-color-surface-muted, #e2e8f0); }
.tooltip-demo-selected { background-color: var(--xtf-color-primary-soft, #ccfbf1); }
.tooltip-demo-option-text { font-size: 24rpx; color: var(--xtf-color-text, #0f172a); }
.tooltip-demo-stage { display: flex; flex-direction: row; justify-content: center; padding-top: 54rpx; padding-bottom: 54rpx; }
.tooltip-demo-trigger { padding: 20rpx 24rpx; border-radius: 6px; background-color: #0f766e; }
.tooltip-demo-trigger-text { font-size: 26rpx; color: #ffffff; }
.tooltip-demo-result { margin-top: 18rpx; font-size: 24rpx; color: var(--xtf-color-text-secondary, #475569); }
.tooltip-demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 20rpx; }
.tooltip-demo-label { font-size: 26rpx; color: var(--xtf-color-text-secondary, #334155); }
.tooltip-demo-actions { display: flex; flex-direction: row; }
.tooltip-demo-action { margin-right: 16rpx; }
.tooltip-demo-muted { background-color: #94a3b8; }
</style>
