<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <view class="notify-demo-page"><scroll-view class="notify-demo-scroll xtf-page-scroll" direction="vertical"><view class="notify-demo-body xtf-safe-bottom xtf-page-scroll-content"><view class="notify-demo-hero"><XtfText level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="notify-demo-title" level="display" color="inverse" text="Notify" /><XtfText class="notify-demo-intro" level="caption" color="inverse" text="固定位置的多条业务提示，支持动作、关闭和自动消失。" /></view>
      <view class="notify-demo-section"><XtfText level="h3" text="类型与样式" /><XtfText class="notify-demo-desc" level="caption" color="secondary" text="不同语义类型及 solid、soft、outline 呈现。" /><view class="notify-demo-grid"><view class="notify-demo-button"><XtfButton label="成功" theme="success" block @click="show('success', 'solid')" /></view><view class="notify-demo-button"><XtfButton label="警告" theme="warning" block @click="show('warning', 'soft')" /></view><view class="notify-demo-button"><XtfButton label="错误" theme="danger" block @click="show('danger', 'outline')" /></view><view class="notify-demo-button"><XtfButton label="信息" type="outline" block @click="show('info', 'soft')" /></view></view></view>
      <view class="notify-demo-section"><XtfText level="h3" text="位置与形状" /><XtfText class="notify-demo-desc" level="caption" color="secondary" text="顶部和底部堆叠，以及 rounded、pill、tile 外形。" /><view class="notify-demo-stack"><XtfButton label="顶部圆角通知" block @click="showTop" /><XtfButton class="notify-demo-top" label="底部胶囊通知" type="light" block @click="showBottom" /><XtfButton class="notify-demo-top" label="方形强调通知" theme="info" type="outline" block @click="showTile" /></view></view>
      <view class="notify-demo-section"><XtfText level="h3" text="动作、关闭与定时" /><XtfText class="notify-demo-desc" level="caption" color="secondary" text="声明式 items 由页面增删；0 为常驻，duration 修改会从修改时刻重新计时。" /><view class="notify-demo-stack"><XtfButton label="发送带动作通知" theme="success" block @click="showAction" /><XtfButton class="notify-demo-top" label="发送三秒通知" theme="warning" type="light" block @click="showTimed" /><XtfButton class="notify-demo-top" label="动态调整时长" type="outline" block @click="adjustDuration" /><XtfButton class="notify-demo-top" label="切换进度显示" type="light" block @click="toggleProgress" /><XtfButton class="notify-demo-top" label="清空全部通知" theme="danger" type="outline" block @click="clearAll" /></view><XtfText class="notify-demo-event" level="caption" color="secondary" :text="eventText" /></view>
      <view class="notify-demo-section"><XtfText level="h3" text="列表生命周期" /><XtfText class="notify-demo-desc" level="caption" color="secondary" text="验证删除、整体替换、clear，以及同 id 移除后重建不会被旧计时关闭。" /><view class="notify-demo-stack"><XtfButton label="同 id 移除再创建" theme="info" block @click="rebuildSameId" /><XtfButton class="notify-demo-top" label="删除首条" type="outline" block @click="removeFirst" /><XtfButton class="notify-demo-top" label="替换列表" type="light" block @click="replaceList" /><XtfButton class="notify-demo-top" label="清空列表" theme="danger" type="outline" block @click="clearAll" /></view></view>
      <view class="notify-demo-section"><XtfText level="h3" text="服务调用" /><XtfButton id="notify-service-open" label="服务通知与动作" @click="showService" /><XtfButton id="notify-service-timed" label="服务定时通知" type="light" @click="notifyManager.info({ message: 'service-timed', duration: 500 })" /><XtfButton id="notify-service-clear" label="清空服务通知" type="outline" @click="notifyManager.clear()" /><XtfText id="notify-service-state" level="caption" :text="serviceState" /><XtfText id="notify-service-result" level="caption" :text="serviceResult" /></view>
    </view></scroll-view>
     <XtfNotify :items="topItems" placement="top" @close="closeTop" @action="handleAction" @click-item="handleClick" /><XtfNotify :items="bottomItems" placement="bottom" @close="closeBottom" @action="handleAction" @click-item="handleClick" /></view>
    <XtfNotify service @close="serviceResult = 'close:' + $event" @action="serviceResult = 'action:' + $event.id" />
  </XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
 import { computed, onBeforeUnmount, ref } from "vue"
 import { notifyManager } from "@/uni_modules/xtf-linkuiunix/components/xtf-notify/service.uts"
 import XtfNotify from "../../../uni_modules/xtf-linkuiunix/components/xtf-notify/xtf-notify.uvue"
 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 XtfButton from "../../../uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
 type DemoNotifyItem = { id: string; type: string; variant: string; shape: string; title: string; message: string; description?: string; actionText?: string; duration?: number; closeable?: boolean; showProgress?: boolean }
 const serviceState = computed((): string => JSON.stringify(notifyManager.state.value))
 const serviceResult = ref("等待服务操作")
 function showService(): void { notifyManager.success({ title: "service-notify", message: "服务通知", actionText: "处理", duration: 0, onAction: (_item: UTSJSONObject) => { serviceResult.value = "callback" } }) }
 onBeforeUnmount(() => { notifyManager.clear() })
 const topItems = ref([] as DemoNotifyItem[])
 const bottomItems = ref([] as DemoNotifyItem[])
 const eventText = ref("等待通知操作")
 let nextId = 1
 function makeItem(type: string, variant: string, shape: string): DemoNotifyItem { const id = "demo-notify-" + nextId.toString(); nextId += 1; return { id, type, variant, shape, title: type + " 通知", message: "账单状态已更新", closeable: true } }
function show(type: string, variant: string): void { topItems.value.push(makeItem(type, variant, "rounded")); eventText.value = "已发送顶部 " + type + " 通知" }
function showTop(): void { topItems.value.push(makeItem("info", "solid", "rounded")) }
function showBottom(): void { bottomItems.value.push(makeItem("success", "soft", "pill")) }
function showTile(): void { topItems.value.push(makeItem("warning", "outline", "tile")) }
function showAction(): void { const item = makeItem("success", "soft", "rounded"); item.title = "同步完成"; item.message = "点击查看最新账单"; item.actionText = "查看"; topItems.value.push(item) }
 function showTimed(): void { const item = makeItem("warning", "solid", "rounded"); item.title = "库存提醒"; item.message = "该提示会在三秒后关闭"; item.duration = 3000; item.showProgress = true; topItems.value.push(item) }
 function adjustDuration(): void { const item = topItems.value.find((candidate: DemoNotifyItem) => candidate.id == "timed-notify"); if (item != null) { item.duration = item.duration == 0 ? 1800 : 0; eventText.value = item.duration == 0 ? "timed-notify 已改为常驻" : "timed-notify 已重计时 1.8 秒"; return }; const timed = makeItem("warning", "soft", "rounded"); timed.id = "timed-notify"; timed.title = "可调时长"; timed.message = "再次点击切换 1.8 秒和常驻"; timed.duration = 1800; timed.showProgress = true; topItems.value.push(timed) }
 function toggleProgress(): void { const item = topItems.value.find((candidate: DemoNotifyItem) => candidate.id == "timed-notify"); if (item == null) { adjustDuration(); return }; item.showProgress = item.showProgress != true; eventText.value = item.showProgress == true ? "已打开进度显示" : "已关闭进度显示" }
function remove(items: DemoNotifyItem[], id: string): DemoNotifyItem[] { return items.filter((item: DemoNotifyItem) => item.id != id) }
 function closeTop(id: string): void { topItems.value = remove(topItems.value, id); eventText.value = id.length > 0 ? "已关闭顶部通知：" + id : "已清空顶部通知" }
 function closeBottom(id: string): void { bottomItems.value = remove(bottomItems.value, id); eventText.value = id.length > 0 ? "已关闭底部通知：" + id : "已清空底部通知" }
  function handleAction(item: DemoNotifyItem): void { eventText.value = "已执行动作：" + (item.actionText != null ? item.actionText : "") + "（" + item.id + "）" }
  function handleClick(item: DemoNotifyItem): void { eventText.value = "已点击：" + item.title + "（" + item.id + "）" }
 function rebuildSameId(): void { topItems.value = remove(topItems.value, "same-id"); const item: DemoNotifyItem = { id: "same-id", type: "info", variant: "solid", shape: "rounded", title: "同 id 重建", message: "旧计时不应关闭这一条", duration: 2400, showProgress: true, closeable: true }; topItems.value = topItems.value.concat([item]); eventText.value = "已移除并重建 same-id" }
 function removeFirst(): void { if (topItems.value.length > 0) topItems.value = topItems.value.slice(1); eventText.value = "已删除顶部首条" }
 function replaceList(): void { const item: DemoNotifyItem = { id: "replacement", type: "success", variant: "outline", shape: "tile", title: "列表已替换", message: "新 items 列表已生效", duration: 2200, showProgress: true, closeable: true }; topItems.value = [item]; eventText.value = "已替换顶部列表" }
function clearAll(): void { topItems.value = []; bottomItems.value = []; eventText.value = "已清空全部通知" }
</script>
<style>
.notify-demo-page { display: flex; flex: 1; flex-direction: column; min-height: 0; background-color: var(--xtf-color-page, #f8fafc); }.notify-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }.notify-demo-body { display: flex; flex-direction: column; padding: 24rpx; }.notify-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }.notify-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }.notify-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }.notify-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); }.notify-demo-desc { margin-top: 8rpx; margin-bottom: 20rpx; }.notify-demo-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }.notify-demo-button { display: flex; flex-direction: column; width: 48%; margin-bottom: 14rpx; }.notify-demo-stack { display: flex; flex-direction: column; }.notify-demo-top { margin-top: 14rpx; }.notify-demo-event { margin-top: 18rpx; }
</style>
