<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="link-demo-scroll xtf-page-scroll" direction="vertical"><view class="link-demo-page xtf-page-scroll-content">
    <text class="link-demo-title">Link 链接</text>
    <view class="link-demo-section">
      <text class="link-demo-heading">内部导航与外部链接</text>
      <view class="link-demo-row"><XtfLink id="link-local" href="/pages/components/xtf-result/index" text="查看订单结果" font-size="16px" show-arrow @click="recordClick" @open="recordOpen" /></view>
      <view class="link-demo-row"><XtfLink id="link-external" href="https://example.com/orders?source=demo" text="订单服务网站" font-size="16px" show-arrow @click="recordClick" @open="recordOpen" @copied="recordCopied" @error="recordError" /></view>
      <view class="link-demo-row"><XtfLink id="link-fallback" href="https://example.com" font-size="16px" @click="recordClick" @open="recordOpen" /></view>
      <view class="link-demo-row"><XtfLink id="link-empty" text="暂未配置地址" font-size="16px" @click="recordClick" /></view>
      <text id="link-events" class="link-demo-state">点击={{ clicks }} 有事件={{ hasEvent }} 外层={{ parentClicks }}</text>
      <text id="link-payload" class="link-demo-state">{{ payload }}</text>
    </view>
    <view class="link-demo-section">
      <text class="link-demo-heading">动态文字与样式</text>
      <input id="link-input" class="link-demo-input" v-model="label" placeholder="链接文字" />
      <view class="link-demo-setting"><text class="link-demo-label">禁用链接</text><switch id="link-disabled" :checked="disabled" @change="disabled = !disabled" /></view>
      <view class="link-demo-setting"><text class="link-demo-label">下划线</text><switch id="link-underline" :checked="underline" @change="underline = !underline" /></view>
      <view class="link-demo-setting"><text class="link-demo-label">箭头</text><switch id="link-arrow" :checked="arrow" @change="arrow = !arrow" /></view>
      <button id="link-style" class="link-demo-control" size="mini" @click="green = !green">切换颜色与字号</button>
      <view class="link-demo-row" @tap="parentClicks++"><XtfLink id="link-dynamic" custom-class="link-demo-custom" href="https://example.com/profile" :text="label" :disabled="disabled" :show-under-line="underline" :show-arrow="arrow" :font-size="green ? '18px' : '32'" :color="green ? '#15803d' : '#2563eb'" @click="recordClick" @open="recordOpen" /></view>
    </view>
    <view class="link-demo-section">
      <text class="link-demo-heading">插槽与长链接</text>
      <view class="link-demo-row"><XtfLink id="link-slot" href="https://example.com/help" text="不会显示的文字" font-size="16px" :show-under-line="false" @click="recordClick" @open="recordOpen"><text class="link-demo-slot">订单 A001 · 售后帮助</text></XtfLink></view>
      <view class="link-demo-narrow"><XtfLink id="link-long" href="https://example.com/orders/ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" font-size="16px" show-arrow :disabled="true" /></view>
    </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 XtfLink from "@/uni_modules/xtf-linkuiunix/components/xtf-link/xtf-link.uvue"
const clicks = ref(0), parentClicks = ref(0), hasEvent = ref(false), payload = ref('等待打开链接')
const label = ref('查看个人订单'), disabled = ref(false), underline = ref(true), arrow = ref(true), green = ref(false)
function recordClick(event: UniPointerEvent): void { clicks.value++; hasEvent.value = event != null }
function recordOpen(event: any): void { payload.value = JSON.stringify(event) }
function recordCopied(href: string): void { payload.value = '已复制：' + href }
function recordError(event: any): void { payload.value = JSON.stringify(event) }
</script>
<style>
.link-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; }
.link-demo-page { display: flex; flex-direction: column; padding: 16px; background-color: var(--xtf-color-page, #f8fafc); }
.link-demo-title { font-size: 26px; font-weight: 700; color: var(--xtf-color-text, #172033); }
.link-demo-section { display: flex; flex-direction: column; margin-top: 12px; padding: 16px 0; border-top: 1px solid var(--xtf-color-border, #dbe2ea); }
.link-demo-heading { font-size: 18px; font-weight: 600; color: var(--xtf-color-text, #172033); margin-bottom: 12px; }
.link-demo-row { display: flex; flex-direction: column; padding: 12px 0; }
.link-demo-state { font-size: 14px; line-height: 1.6; color: var(--xtf-color-text-secondary, #475569); margin-top: 8px; word-break: break-all; }
.link-demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 8px 0; }
.link-demo-label { font-size: 15px; color: var(--xtf-color-text-secondary, #334155); }
.link-demo-control { margin: 4px; font-size: 14px; }
.link-demo-input { height: 42px; padding: 8px; border: 1px solid var(--xtf-color-border, #cbd5e1); background-color: var(--xtf-color-surface, #ffffff); color: var(--xtf-color-text, #0f172a); font-size: 15px; }
.link-demo-slot { color: #15803d; font-size: 16px; }
.link-demo-narrow { display: flex; flex-direction: column; width: auto; align-self: stretch; min-width: 0; max-width: 220px; box-sizing: border-box; padding: 8px; border: 1px solid var(--xtf-color-border, #cbd5e1); }
</style>
