<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="watermark-demo-scroll xtf-page-scroll" direction="vertical"><view class="watermark-demo-page xtf-safe-bottom xtf-page-scroll-content">
    <view class="watermark-demo-hero"><XtfText level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="watermark-demo-title" level="display" color="inverse" text="Watermark" /><XtfText class="watermark-demo-intro" level="caption" color="inverse" text="内容容器型平铺水印，不拦截内部操作。" /></view>
    <view class="watermark-demo-section"><XtfWatermark text="仅内部使用" secondary-text="finance-001" show-timestamp timestamp-text="2026-09-20 09:30" density="sm" :opacity="0.25"><view class="watermark-demo-card"><XtfSectionTitle title="经营报表" desc="本月经营数据与审批记录。" /><XtfText class="watermark-demo-copy" text="GMV 128 万，订单 3,208 笔。" /><XtfButton id="watermark-action" label="继续查看" size="sm" type="outline" @click="clicks += 1" /><text id="watermark-clicks">内部按钮点击 {{ clicks }} 次</text></view></XtfWatermark></view>
    <view class="watermark-demo-section"><XtfSectionTitle title="方向与强度" desc="支持横向、斜向和自定义颜色。" /><XtfWatermark text="审批流转单" color="#2563eb" :opacity="0.4" direction="horizontal" density="lg"><view class="watermark-demo-card watermark-demo-card-tall"><XtfText text="审批内容区域" /><XtfText class="watermark-demo-copy" color="secondary" text="水印层 pointer-events 为 none。" /></view></XtfWatermark></view>
    <view class="watermark-demo-section">
      <XtfSectionTitle title="动态配置与图片结果" desc="使用内嵌 PNG；错误用例是明确无效的图片，不请求外网。" />
      <view class="watermark-demo-options"><button id="watermark-direction" @click="direction = direction == 'vertical' ? 'slash' : 'vertical'">方向 {{ direction }}</button><button id="watermark-density" @click="density = density == 'sm' ? 'lg' : 'sm'">密度 {{ density }}</button><button id="watermark-opacity" @click="opacity = opacity == 0.25 ? 0.6 : 0.25">强度 {{ opacity }}</button></view>
      <view class="watermark-demo-options"><button id="watermark-valid" @click="imageSrc = localPng">有效 PNG</button><button id="watermark-invalid" @click="imageSrc = 'data:image/png;base64,invalid'">无效图片</button><button id="watermark-clear" @click="imageSrc = ''; imageResult = '已清除图片'">移除图片</button></view>
      <XtfWatermark text="动态审批凭证" :direction="direction" :density="density" :opacity="opacity" :image-src="imageSrc" @image-load="recordImage('image-load', $event)" @image-error="recordImage('image-error', $event)"><view class="watermark-demo-card"><text>图片失败后继续显示文字水印</text></view></XtfWatermark>
      <text id="watermark-image-result" class="watermark-demo-copy">{{ imageResult }}</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 XtfSectionTitle from "@/uni_modules/xtf-linkuiunix/components/xtf-section-title/xtf-section-title.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfWatermark from "@/uni_modules/xtf-linkuiunix/components/xtf-watermark/xtf-watermark.uvue"
const clicks = ref(0)
const direction = ref("slash")
const density = ref("sm")
const opacity = ref(0.25)
const localPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jRZkAAAAASUVORK5CYII="
const imageSrc = ref("")
const imageResult = ref("等待图片事件")
function recordImage(event: string, payload: any): void { imageResult.value = event + " " + JSON.stringify(payload) }
</script>
<style>.watermark-demo-options { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 16rpx; }</style>
<style>
.watermark-demo-scroll { flex: 1; width: 100%; }.watermark-demo-page { display: flex; flex-direction: column; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.watermark-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #7c3aed; }.watermark-demo-title { margin-top: 8rpx; }.watermark-demo-intro { margin-top: 10rpx; }.watermark-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.watermark-demo-card { display: flex; flex-direction: column; min-height: 240rpx; margin-top: 18rpx; padding: 28rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 14rpx; background-color: var(--xtf-color-surface, rgba(255,255,255,0.9)); }.watermark-demo-card-tall { min-height: 180rpx; }.watermark-demo-copy { margin-top: 24rpx; margin-bottom: 24rpx; }
</style>
