<template>
    <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="dialog-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
      <view class="dialog-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="dialog-demo-hero">
          <XtfText class="dialog-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / FEEDBACK" />
          <XtfText class="dialog-demo-title" level="display" color="inverse" text="Dialog" />
          <XtfText class="dialog-demo-intro" level="caption" color="inverse" text="确认、选择与业务操作的声明式弹窗。" />
        </view>
        <view class="dialog-demo-section">
          <XtfText level="h3" text="服务调用" />
          <XtfButton id="dialog-service-open" label="服务输入弹窗" @click="dialogManager.prompt({ title: 'service-dialog', inputValue: '初始备注', inputRequired: true })" />
          <XtfText id="dialog-service-state" level="caption" :text="serviceState" />
          <XtfText id="dialog-service-result" level="caption" :text="serviceResult" />
        </view>
        <view class="dialog-demo-section">
          <XtfText class="dialog-demo-section-title" level="h3" text="确认与危险操作" />
          <XtfText class="dialog-demo-section-desc" level="caption" color="secondary" text="默认确认、危险语义和同步关闭拦截。" />
          <XtfButton label="打开确认弹窗" block @click="confirmVisible = true" />
          <XtfButton class="dialog-demo-button" label="添加备注" theme="primary" type="light" block @click="promptVisible = true" />
          <XtfButton class="dialog-demo-button" label="删除账单" theme="danger" type="light" block @click="dangerVisible = true" />
          <XtfButton class="dialog-demo-button" label="打开关闭拦截" theme="warning" type="outline" block @click="guardVisible = true" />
        </view>
        <view class="dialog-demo-section">
          <XtfText class="dialog-demo-section-title" level="h3" text="操作与选项" />
          <XtfText class="dialog-demo-section-desc" level="caption" color="secondary" text="操作列表、单选和多选都会回传声明式状态。" />
          <XtfButton label="操作列表" type="outline" block @click="actionsVisible = true" />
          <XtfButton class="dialog-demo-button" label="选择账本" type="outline" block @click="selectVisible = true" />
          <XtfButton class="dialog-demo-button" label="筛选标签" type="outline" block @click="multiVisible = true" />
          <XtfText class="dialog-demo-result" level="caption" color="secondary" :text="selectionText" />
        </view>
        <view class="dialog-demo-section">
          <XtfText class="dialog-demo-section-title" level="h3" text="插槽与状态" />
          <XtfText class="dialog-demo-section-desc" level="caption" color="secondary" text="自定义标题、正文、底部，以及全屏加载的稳定降级视觉。" />
          <XtfButton label="打开插槽弹窗" theme="success" type="light" block @click="slotVisible = true" />
          <XtfButton class="dialog-demo-button" :label="loadingVisible ? '处理中' : '打开加载弹窗'" theme="info" type="light" block @click="openLoading" />
        </view>
      </view>
    </scroll-view>
    <XtfDialog v-model:show="confirmVisible" title="确认提交本月账单？" message="提交后将同步到共享账本。" confirm-text="提交" @confirm="record('已提交账单')" />
    <XtfDialog v-model:show="promptVisible" type="textarea" title="添加备注" input-label="备注内容" input-placeholder="输入这笔账单的补充说明" :input-value="noteValue" input-required :input-rows="3" @update:input-value="noteValue = $event" @confirm="record('备注已保存：' + noteValue)" />
    <XtfDialog v-model:show="dangerVisible" type="danger" title="删除这条账单？" message="删除后无法恢复，请谨慎操作。" confirm-text="删除" cancel-text="保留" @confirm="record('已删除账单')" />
    <XtfButton class="dialog-demo-button" label="遮罩不可关闭" type="outline" @click="lockedOverlayVisible = true" />
    <XtfButton class="dialog-demo-button" label="关闭入口校验" type="outline" @click="guardVisible = true" />
    <XtfButton class="dialog-demo-button" label="实例方法与日志" type="outline" @click="openByRef" />
    <XtfText class="dialog-demo-result" level="caption" color="secondary" :text="eventLog" />
    <XtfDialog v-model:show="guardVisible" type="warning" title="需要确认" message="关闭图标、遮罩和操作按钮都会经过 beforeClose。" show-close-icon :close-on-click-overlay="true" :before-close="blockClose" @blocked-close="recordCloseAttempt"><view class="dialog-demo-slot-body"><text>允许关闭</text><switch id="dialog-guard-allow" :checked="guardAllowed" @change="guardAllowed = $event.detail.value" /></view></XtfDialog>
    <XtfDialog v-model:show="lockedOverlayVisible" title="遮罩不可关闭" message="点击遮罩和空白区域都不会关闭，只能使用按钮。" :close-on-click-overlay="false" @confirm="record('仅按钮可关闭')" />
    <XtfDialog ref="dialogRef" v-model:show="methodVisible" title="实例打开" message="通过 expose.open() 打开，并可由 close() 关闭。" @open="appendLog('open')" @close="appendLog('close')" />
    <XtfDialog v-model:show="actionsVisible" type="actions" title="更多操作" option-helper="对当前账单执行操作" :options="actionOptions" @action="handleAction" />
    <XtfDialog v-model:show="selectVisible" type="select" title="选择账本" option-required :option-value="bookValue" :options="bookOptions" @update:option-value="updateBook" @confirm="record('账本已更新')" />
    <XtfDialog v-model:show="multiVisible" type="multi-select" title="筛选标签" option-required :option-values="tagValues" :options="tagOptions" button-direction="vertical" @update:option-values="updateTags" @confirm="record('筛选已应用')" />
    <XtfDialog v-model:show="slotVisible" show-cancel footer-note="数据仅保存在本地演示状态。">
      <template #title><XtfText level="h3" bold align="left" text="自定义标题插槽" /></template>
      <view class="dialog-demo-slot-body"><XtfIcon name="success" size="md" theme="success" /><XtfText class="dialog-demo-slot-copy" level="body" color="secondary" text="正文插槽可组合已有组件。" /></view>
      <template #footer><view class="dialog-demo-slot-footer"><XtfButton label="知道了" theme="success" block @click="slotVisible = false" /></view></template>
    </XtfDialog>
    <XtfDialog v-model:show="loadingVisible" fullscreen title="正在同步" message="全屏属性在当前弹窗容器中保持为稳定的大尺寸视觉。" :loading="true" confirm-text="处理中" :show-cancel="false" show-close-icon @update:show="loadingVisible = $event" />
    <XtfDialog service @confirm-detail="serviceResult = JSON.stringify($event)" @cancel-detail="serviceResult = JSON.stringify($event)" />
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, onBeforeUnmount, ref } from "vue"
import { dialogManager } from "@/uni_modules/xtf-linkuiunix/components/xtf-dialog/service.uts"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfDialog from "@/uni_modules/xtf-linkuiunix/components/xtf-dialog/xtf-dialog.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"

const serviceState = computed((): string => JSON.stringify(dialogManager.state.value))
const serviceResult = ref("等待服务操作")
const confirmVisible = ref(false)
const promptVisible = ref(false)
const dangerVisible = ref(false)
const guardVisible = ref(false)
const guardAllowed = ref(false)
let loadingTimer: ReturnType<typeof setTimeout> | null = null
const lockedOverlayVisible = ref(false)
const methodVisible = ref(false)
const actionsVisible = ref(false)
const selectVisible = ref(false)
const multiVisible = ref(false)
const slotVisible = ref(false)
const loadingVisible = ref(false)
const bookValue = ref("family")
const tagValues = ref(["food"] as string[])
const result = ref("尚未选择")
const eventLog = ref("日志：尚未触发")
const dialogRef = ref<any>(null)
const noteValue = ref("")
const actionOptions = [{ label: "编辑账单", value: "edit", keepOpen: true }, { label: "复制一笔", value: "copy" }, { label: "删除账单（禁用）", value: "remove", danger: true, disabled: true }]
const bookOptions = [{ label: "家庭账本", value: "family", description: "共同记录日常支出" }, { label: "个人账本", value: "personal", description: "仅自己可见" }]
const tagOptions = [{ label: "餐饮", value: "food" }, { label: "交通", value: "travel" }, { label: "日用", value: "daily" }]
const selectionText = computed((): string => "当前选择: " + bookValue.value + " / " + tagValues.value.join(", ") + " / " + result.value)
function record(value: string): void { result.value = value }
function blockClose(payload: UTSJSONObject): boolean { appendLog(JSON.stringify(payload) + " allowed=" + guardAllowed.value.toString()); return guardAllowed.value }
function recordCloseAttempt(payload: UTSJSONObject): void { appendLog("blocked:" + payload["source"].toString()) }
function appendLog(value: string): void { eventLog.value = eventLog.value == "日志：尚未触发" ? "日志：" + value : eventLog.value + " → " + value }
function handleAction(event: UTSJSONObject): void { const option = event["option"] as UTSJSONObject; const action = event["action"] as UTSJSONObject; record((action != null ? action["label"] : option["label"]) as string + " / " + event["value"].toString() + " / " + event["type"].toString() + " / " + event["preset"].toString()) }
function updateBook(value: string): void { bookValue.value = value }
function updateTags(values: string[]): void { tagValues.value = values }
function openLoading(): void { if (loadingTimer != null) clearTimeout(loadingTimer); loadingVisible.value = true; loadingTimer = setTimeout(() => { loadingTimer = null; loadingVisible.value = false }, 1400) }
onBeforeUnmount(() => { if (loadingTimer != null) clearTimeout(loadingTimer); dialogManager.close() })
function openByRef(): void { methodVisible.value = false; if (dialogRef.value != null) dialogRef.value.open() }
</script>

<style>
.dialog-demo-scroll { display: flex; flex: 1; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.dialog-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.dialog-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.dialog-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.dialog-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.dialog-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.dialog-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.dialog-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.dialog-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.dialog-demo-button { margin-top: 14rpx; }
.dialog-demo-result { margin-top: 16rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.dialog-demo-slot-body { display: flex; flex-direction: row; align-items: center; padding: 18rpx; border-radius: 12rpx; background-color: var(--xtf-color-success-soft, #dcfce7); }
.dialog-demo-slot-copy { margin-left: 14rpx; color: var(--xtf-color-text-secondary, #475569); }
.dialog-demo-slot-footer { display: flex; flex-direction: column; margin-top: 24rpx; }
</style>
