<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="notice-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="notice-demo-page xtf-page-scroll-content">
        <text class="notice-demo-title">Notice Bar 通告栏</text>
        <view class="notice-demo-row"><text class="notice-demo-label">深色主题</text><switch id="notice-theme" :checked="dark" color="#17796b" @change="dark = $event.detail.value" /></view>
        <XtfConfigProvider :theme="dark ? 'dark' : 'light'" :custom-style="{ flex: 'none', height: 'auto' }">
          <view class="notice-demo-section" :class="dark ? 'notice-demo-dark' : ''">
            <text class="notice-demo-heading">局部主题预览</text>
            <XtfNoticeBar text="此区域演示独立主题，页面使用共享主题。" :color="themeColor" :background-color="themeBackground" />
          </view>
        </XtfConfigProvider>

        <view id="notice-basic" class="notice-demo-section">
          <text class="notice-demo-heading">01 / 基础公告</text>
          <XtfNoticeBar text="新版本已发布，欢迎体验。" :show-icon="showIcon" @click="record('click', '基础')" />
          <view class="notice-demo-row"><text class="notice-demo-label">公告图标</text><switch id="notice-icon" :checked="showIcon" color="#17796b" @change="showIcon = $event.detail.value" /></view>
        </view>

        <view id="notice-colors" class="notice-demo-section">
          <text class="notice-demo-heading">02 / 自定义颜色</text>
          <XtfNoticeBar text="会员专属：本周积分双倍，订单正常发货。" color="#126b53" background-color="#e5f4eb" show-icon icon="info" @click="record('click', '自定义颜色')" />
        </view>

        <view id="notice-layout" class="notice-demo-section">
          <text class="notice-demo-heading">03 / 单行与换行</text>
          <XtfNoticeBar :single="single" :text="longText" @click="record('click', '排版')" />
          <view class="notice-demo-row"><text class="notice-demo-label">单行省略</text><switch id="notice-single" :checked="single" color="#17796b" @change="single = $event.detail.value" /></view>
        </view>

        <view id="notice-motion" class="notice-demo-section">
          <text class="notice-demo-heading">04 / 滚动公告</text>
          <XtfNoticeBar :scrollable="scrollable" :speed="speed" :show-icon="showIcon" :text="longText" color="#b4233d" background-color="#fff0f3" @click="record('click', '滚动正文')" />
          <view class="notice-demo-row"><text class="notice-demo-label">连续滚动</text><switch id="notice-scrollable" :checked="scrollable" color="#17796b" @change="scrollable = $event.detail.value" /></view>
          <view class="notice-demo-row"><text class="notice-demo-label">滚动速度</text><text class="notice-demo-label">{{ speed }}</text></view>
          <slider id="notice-speed" :value="speed" :min="12" :max="96" :step="12" activeColor="#17796b" @change="speed = $event.detail.value" />
        </view>

        <view id="notice-details" class="notice-demo-section">
          <text class="notice-demo-heading">05 / 查看详情</text>
          <XtfNoticeBar show-icon show-get-more :more-text="detailText ? '详情' : ''" :text="longText" @click="record('click', '详情正文')" @getmore="record('getmore', '详情')" />
          <view class="notice-demo-row"><text class="notice-demo-label">文字入口</text><switch id="notice-more-text" :checked="detailText" color="#17796b" @change="detailText = $event.detail.value" /></view>
        </view>

        <view id="notice-dismiss" class="notice-demo-section">
          <text class="notice-demo-heading">06 / 关闭与恢复</text>
          <XtfNoticeBar :key="restoreKey" scrollable show-icon show-get-more show-close more-text="详情" :text="longText" @click="record('click', '可关闭正文')" @getmore="record('getmore', '可关闭详情')" @close="closed = true; record('close', '关闭')" />
          <view class="notice-demo-row"><text id="notice-visibility" class="notice-demo-label">{{ closed ? '已关闭' : '显示中' }}</text><button id="notice-restore" class="notice-demo-button" size="mini" :disabled="!closed" @tap="restoreKey++; closed = false">恢复公告</button></view>
        </view>

        <view class="notice-demo-section">
          <view class="notice-demo-row"><text class="notice-demo-heading">事件记录</text><button id="notice-clear" class="notice-demo-button" size="mini" @tap="clearEvents">清空</button></view>
          <text id="notice-event-counts" class="notice-demo-label">click: {{ clickCount }} · getmore: {{ moreCount }} · close: {{ closeCount }}</text>
          <text v-if="logs.length == 0" class="notice-demo-log">暂无事件</text>
          <text v-for="(entry, index) in logs" :key="index" class="notice-demo-log">{{ entry }}</text>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfNoticeBar from "@/uni_modules/xtf-linkuiunix/components/xtf-notice-bar/xtf-notice-bar.uvue"

const dark = ref(false)
const showIcon = ref(true)
const single = ref(true)
const scrollable = ref(true)
const speed = ref(36)
const detailText = ref(false)
const closed = ref(false)
const restoreKey = ref(0)
const clickCount = ref(0)
const moreCount = ref(0)
const closeCount = ref(0)
const logs = ref<string[]>([])
const longText = "系统公告：本周五 22:00 至周六 02:00 将进行系统维护，期间部分服务可能短暂不可用，请提前安排订单处理。"
const themeColor = computed((): string => dark.value ? "#a5e4d0" : "#176b56")
const themeBackground = computed((): string => dark.value ? "#233c35" : "#e8f4ef")

function record(event: string, source: string): void {
  if (event == "click") clickCount.value++
  if (event == "getmore") moreCount.value++
  if (event == "close") closeCount.value++
  logs.value = [String(clickCount.value + moreCount.value + closeCount.value) + ". " + event + " · " + source, ...logs.value].slice(0, 8)
}

function clearEvents(): void {
  clickCount.value = 0
  moreCount.value = 0
  closeCount.value = 0
  logs.value = []
}
</script>

<style>
.notice-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; }
.notice-demo-page { display: flex; flex-direction: column; width: 100%; padding: 28rpx; background-color: var(--xtf-color-page, #f6f8f7); }
.notice-demo-dark { background-color: var(--xtf-color-surface, #171e1b); }
.notice-demo-title { color: var(--xtf-color-text, #20352e); font-size: 36rpx; font-weight: 700; margin-bottom: 20rpx; }
.notice-demo-section { display: flex; flex-direction: column; padding: 28rpx 0; border-bottom: 1px solid var(--xtf-color-border, #dce5e0); }
.notice-demo-heading { color: var(--xtf-color-text, #20352e); font-size: 28rpx; font-weight: 600; margin-bottom: 18rpx; }
.notice-demo-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 76rpx; }
.notice-demo-label { flex-shrink: 1; color: var(--xtf-color-text-secondary, #596b63); font-size: 24rpx; line-height: 1.6; }
.notice-demo-button { margin: 0; flex-shrink: 0; color: var(--xtf-color-text-secondary, #176b56); background-color: var(--xtf-color-surface-muted, #e8f4ef); border-radius: 8rpx; }
.notice-demo-log { color: var(--xtf-color-text-secondary, #596b63); font-size: 24rpx; line-height: 1.6; margin-top: 10rpx; }
</style>
