<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="editor-demo-scroll" direction="vertical">
    <view class="editor-demo-page">
      <view class="editor-demo-header"><text class="editor-demo-eyebrow">XTF LINKUI / CONTENT</text><text class="editor-demo-title">Editor</text><text class="editor-demo-desc">富文本输入、格式工具、外部内容同步与编辑器实例方法。</text></view>
      <view class="editor-demo-section"><text class="editor-demo-heading">完整工具栏</text><XtfEditor id="editor-controlled" ref="editorRef" v-model="content" :disabled="disabled" :min-height="260" @change="handleChange" @statuschange="handleStatus" @ready="handleReady" @insert-image="record('图片已插入')" /><text class="editor-demo-result">{{ status }}</text><view class="editor-demo-actions"><button id="editor-disabled" class="editor-demo-button" @click="disabled = !disabled">{{ disabled ? '启用编辑' : '禁用编辑' }}</button><button id="editor-external-clear" class="editor-demo-button" @click="content = ''">外部清空</button><button id="editor-rapid-fill" class="editor-demo-button" @click="rapidFill">连续回填</button></view></view>
      <view class="editor-demo-section"><text class="editor-demo-heading">实例方法</text><view class="editor-demo-actions"><button class="editor-demo-button" @click="insertText">插入文本</button><button class="editor-demo-button" @click="insertDate">插入日期</button><button class="editor-demo-button" @click="insertDivider">插入分割线</button><button class="editor-demo-button editor-demo-button-danger" @click="clearContent">清空</button></view><text class="editor-demo-result">{{ methodStatus }}</text></view>
      <view class="editor-demo-section"><text class="editor-demo-heading">受控内容</text><input class="editor-demo-input" v-model="externalHtml" placeholder="输入 HTML 后同步到编辑器" /><view class="editor-demo-actions"><button class="editor-demo-button" @click="applyExternal">同步 HTML</button><button class="editor-demo-button" @click="applyDelta">同步 Delta</button><button class="editor-demo-button" @click="readContents">读取内容</button></view></view>
      <view class="editor-demo-section"><text class="editor-demo-heading">只读与禁用</text><XtfEditor value="<p>这是只读编辑器内容</p>" read-only :show-toolbar="false" :min-height="120" /><XtfEditor value="<p>这是禁用编辑器内容</p>" disabled :show-toolbar="false" :min-height="120" /></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 XtfEditor from "../../../uni_modules/xtf-linkuiunix/components/xtf-editor/xtf-editor.uvue"
type EditorRef = { insertText: (text: string) => void; insertDate: () => void; insertDivider: () => void; clear: () => void; setContents: (value: any) => void; getContents: () => void }
const editorRef = ref<EditorRef | null>(null)
const content = ref("<p>Vapor editor 示例</p>")
const disabled = ref(false)
const externalHtml = ref("<p><strong>来自外部模型的内容</strong></p>")
const status = ref("等待编辑器就绪")
const methodStatus = ref("等待调用实例方法")
function record(value: string): void { methodStatus.value = value }
function handleReady(): void { status.value = "编辑器已就绪" }
function handleChange(value: any): void { status.value = value != null && value.html != null ? "内容已更新" : "内容已读取" }
function handleStatus(value: any): void { if (value != null) status.value = "格式状态已更新" }
function insertText(): void { editorRef.value?.insertText(" 插入文本 "); methodStatus.value = "已插入文本" }
function insertDate(): void { editorRef.value?.insertDate(); methodStatus.value = "已插入日期" }
function insertDivider(): void { editorRef.value?.insertDivider(); methodStatus.value = "已插入分割线" }
function clearContent(): void { editorRef.value?.clear(); methodStatus.value = "已清空" }
function applyExternal(): void { editorRef.value?.setContents(externalHtml.value); methodStatus.value = "已同步 HTML" }
function applyDelta(): void { editorRef.value?.setContents({ ops: [{ insert: "来自 Delta 的内容\n" }] }); methodStatus.value = "已同步 Delta" }
function readContents(): void { editorRef.value?.getContents(); methodStatus.value = "已请求读取内容" }
function rapidFill(): void { editorRef.value?.setContents("<p>第一次回填</p>"); editorRef.value?.setContents({ ops: [{ insert: "最后一次回填\n" }] }); methodStatus.value = "已请求连续回填，最终应显示最后一次内容" }
</script>

<style>
.editor-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; background-color: var(--xtf-color-page, #f6f7f9); }.editor-demo-page { display: flex; flex-direction: column; width: 100%; max-width: 1040px; align-self: center; padding: 28rpx; }.editor-demo-header { display: flex; flex-direction: column; padding: 12rpx 0 28rpx; border-bottom-width: 2rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #20252b); }.editor-demo-eyebrow { color: var(--xtf-color-text-secondary, #64706f); font-size: 20rpx; font-weight: 600; }.editor-demo-title { margin-top: 10rpx; color: var(--xtf-color-text, #20252b); font-size: 40rpx; font-weight: 700; }.editor-demo-desc { margin-top: 10rpx; color: var(--xtf-color-text-secondary, #70797e); font-size: 23rpx; line-height: 1.5; }.editor-demo-section { display: flex; flex-direction: column; padding: 28rpx 0; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #dde2e5); }.editor-demo-heading { margin-bottom: 18rpx; color: var(--xtf-color-text, #20252b); font-size: 28rpx; font-weight: 700; }.editor-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 16rpx; }.editor-demo-button { margin-right: 12rpx; margin-bottom: 12rpx; padding: 0 22rpx; min-height: 64rpx; line-height: 64rpx; color: #ffffff; background-color: #17796b; border-radius: 8rpx; font-size: 23rpx; }.editor-demo-button-danger { background-color: #bf3a48; }.editor-demo-result { margin-top: 12rpx; color: #17796b; font-size: 22rpx; line-height: 1.5; }.editor-demo-input { box-sizing: border-box; width: 100%; height: 76rpx; padding: 0 18rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #d4dcd9); border-radius: 8rpx; background-color: var(--xtf-color-surface, #ffffff); color: var(--xtf-color-text, #20252b); font-size: 24rpx; }
</style>
