<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="demo-scroll" direction="vertical">
    <view class="demo-page">
      <text class="demo-title">手写签名</text>
      <view class="demo-settings">
        <text class="demo-label">笔迹</text>
        <view v-for="color in colors" :key="color" class="demo-swatch" :style="{ backgroundColor: color, borderColor: penColor === color ? '#6366f1' : 'transparent' }" @click="penColor = color" />
        <text class="demo-label">{{ penWidth }} px</text>
      </view>
      <slider :value="penWidth" :min="1" :max="12" :step="1" active-color="#6366f1" @change="penWidth = $event.detail.value" />
      <XtfSignature ref="signature" :height="400" :stroke-style="penColor" :line-width="penWidth"
        :disabled="disabled" :readonly="readonly" :trim-whitespace="trim" :export-scale="2"
        @ready="ready = true" @start="log = '开始签名'" @end="onEnd" @clear="onClear"
        @status-change="onStatus" @blocked="log = '当前签名已锁定'" @error="onError" />
      <view class="demo-tools">
        <button class="demo-button" :disabled="!ready || busy" @click="undo">撤销</button>
        <button class="demo-button" :disabled="!ready || busy" @click="clear">清空</button>
        <button class="demo-button" :disabled="!ready || busy" @click="replay">回放</button>
        <button class="demo-button" :disabled="!ready || busy" @click="save">导出图片</button>
        <button class="demo-button" :disabled="!ready || busy" @click="unlock">继续签名</button>
      </view>
      <view class="demo-setting"><text class="demo-label">禁用</text><switch :checked="disabled" @change="disabled = $event.detail.value" /></view>
      <view class="demo-setting"><text class="demo-label">只读</text><switch :checked="readonly" @change="readonly = $event.detail.value" /></view>
      <view class="demo-setting"><text class="demo-label">裁剪空白</text><switch :checked="trim" @change="trim = $event.detail.value" /></view>
      <text class="demo-state">状态：{{ status }} · {{ count }} 笔</text>
      <view class="demo-section">
        <text class="demo-title">笔画回填 / 最多两笔</text>
        <XtfSignature ref="limited" :height="260" :initial-strokes="initialStrokes" :sign-limit="2" stroke-style="#2563eb" @limit-exceed="log = '已达到两笔上限'" />
        <button class="demo-button" @click="restore">恢复初始笔画</button>
      </view>
      <view v-if="preview.length > 0" class="demo-section">
        <text class="demo-title">导出预览</text>
        <XtfSignature readonly :preview-image="preview" :height="260" />
        <text class="demo-state">{{ exportInfo }}</text>
      </view>
      <view class="demo-section"><text class="demo-title">事件回显</text><text class="demo-state">{{ log }}</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 } from 'vue'
import XtfSignature from '@/uni_modules/xtf-linkuiunix/components/xtf-signature/xtf-signature.uvue'
const signature = ref<any>(null)
const limited = ref<any>(null)
const ready = ref(false)
const busy = ref(false)
const disabled = ref(false)
const readonly = ref(false)
const trim = ref(true)
const colors = ['#1f2333', '#2563eb', '#0f766e']
const penColor = ref(colors[0])
const penWidth = ref(6)
const count = ref(0)
const status = ref('draft')
const log = ref('暂无事件')
const preview = ref('')
const exportInfo = ref('')
const initialStrokes = [{ color: '#2563eb', width: 4, points: [
  { x: 24, y: 70 }, { x: 48, y: 32 }, { x: 60, y: 78 }, { x: 90, y: 30 }, { x: 112, y: 68 }, { x: 150, y: 50 }
] }]
function onEnd(meta: any): void { count.value = meta.count; log.value = '完成笔画：' + meta.count }
function onClear(): void { count.value = 0; log.value = '已清空签名' }
function onStatus(payload: any): void { status.value = payload.status }
function onError(error: any): void { log.value = '错误：' + String(error.message ?? error.errMsg ?? error) }
function undo(): void { signature.value?.undo(); count.value = signature.value?.getStrokeMeta().count ?? 0 }
function clear(): void { signature.value?.clear(); preview.value = '' }
function unlock(): void { signature.value?.setStatus('signing') }
function restore(): void { limited.value?.reset(initialStrokes) }
async function replay(): Promise<void> {
  busy.value = true
  try { log.value = await signature.value.replay(24) ? '回放完成' : '暂无笔画或回放已取消' }
  catch (error) { onError(error) }
  finally { busy.value = false }
}
async function save(): Promise<void> {
  if (signature.value == null || signature.value.isEmpty()) { log.value = '请先完成签名'; return }
  busy.value = true
  try {
    const result = await signature.value.getImageData()
    preview.value = result.base64
    exportInfo.value = result.width + ' × ' + result.height + ' px · ' + result.strokeCount + ' 笔'
    log.value = '导出成功，签名已锁定'
  } catch (error) { onError(error) }
  finally { busy.value = false }
}
</script>
<style>
.demo-scroll { flex: 1; width: 100%; background-color: var(--xtf-color-page, #fcf8ff); }
.demo-page { display: flex; flex-direction: column; padding: 24rpx; }
.demo-title { margin-bottom: 18rpx; color: var(--xtf-color-text, #1b1b23); font-size: 30rpx; font-weight: 700; }
.demo-settings { display: flex; flex-direction: row; align-items: center; }
.demo-swatch { width: 44rpx; height: 44rpx; margin: 0 12rpx; border: 4rpx solid transparent; border-radius: 22rpx; }
.demo-label { color: var(--xtf-color-text-secondary, #464554); font-size: 24rpx; }
.demo-tools { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 16rpx; }
.demo-button { margin: 6rpx 10rpx 6rpx 0; padding: 0 18rpx; color: var(--xtf-color-text-secondary, #6366f1); background-color: var(--xtf-color-surface-muted, #f5f2fe); font-size: 24rpx; line-height: 64rpx; }
.demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 16rpx; }
.demo-state { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #464554); font-size: 24rpx; line-height: 36rpx; }
.demo-section { display: flex; flex-direction: column; margin-top: 32rpx; }
</style>
