<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" :safe-area="true">
    <scroll-view class="badge-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="badge-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="badge-demo-hero"><XtfText class="badge-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="badge-demo-title" level="display" color="inverse" text="Badge" /><XtfText class="badge-demo-intro" level="caption" color="inverse" text="数字、图标、圆点与独立状态标记。" /></view>
        <view id="badge-group-basic" class="badge-demo-section">
          <XtfText class="badge-demo-section-title" level="h3" text="数值、文字与图标" />
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge :value="8"><XtfButton label="Inbox" size="sm" type="light" /></XtfBadge></view><view class="badge-demo-item"><XtfBadge :value="120" :max="99" theme="danger"><XtfButton label="Alerts" size="sm" type="light" /></XtfBadge></view><view class="badge-demo-item"><XtfBadge :value="0" show-zero theme="info"><XtfButton label="Zero" size="sm" type="light" /></XtfBadge></view></view>
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge text="NEW" icon="success" theme="success" standalone /></view><view class="badge-demo-item"><XtfBadge text="HOT" icon="warning" icon-position="end" theme="danger" standalone /></view></view>
        </view>
        <view id="badge-group-counter" class="badge-demo-section">
          <XtfText class="badge-demo-section-title" level="h3" text="计数与显示边界" />
          <view class="badge-demo-row"><view v-if="shown" class="badge-demo-item"><XtfBadge id="badge-counter" :value="count" :show-zero="showZero" :max="maxValue" :dot="dot"><view class="badge-demo-anchor"><text class="badge-demo-label">消息</text></view></XtfBadge></view><text id="badge-counter-state" class="badge-demo-label badge-demo-item">{{ 'value=' + count + ' / max=' + maxValue }}</text></view>
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfButton id="badge-decrease" label="-1" size="sm" @click="count -= 1" /></view><view class="badge-demo-item"><XtfButton id="badge-increase" label="+1" size="sm" @click="count += 1" /></view><view class="badge-demo-item"><XtfButton id="badge-reset" label="归零" size="sm" @click="count = 0" /></view><view class="badge-demo-item"><XtfButton id="badge-max" :label="'max ' + maxValue" size="sm" @click="maxValue = maxValue == 9 ? 99 : 9" /></view></view>
          <view class="badge-demo-row"><view class="badge-demo-toggle badge-demo-item"><text class="badge-demo-label">showZero</text><switch id="badge-show-zero" :checked="showZero" @change="showZero = $event.detail.value" /></view><view class="badge-demo-toggle badge-demo-item"><text class="badge-demo-label">dot</text><switch id="badge-dot" :checked="dot" @change="dot = $event.detail.value" /></view><view class="badge-demo-toggle badge-demo-item"><text class="badge-demo-label">显示</text><switch id="badge-show" :checked="shown" @change="shown = $event.detail.value" /></view></view>
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge id="badge-max-equal" :value="99" :max="99" standalone /></view><view class="badge-demo-item"><XtfBadge id="badge-max-over" value="100" max="99" standalone /></view><view class="badge-demo-item"><XtfBadge id="badge-max-zero" :value="1" :max="0" standalone /></view><view class="badge-demo-item"><XtfBadge id="badge-text-zero" text="0" standalone /></view><view class="badge-demo-item"><XtfBadge id="badge-empty" value="" standalone /></view></view>
        </view>
        <view id="badge-group-motion" class="badge-demo-section">
          <XtfText class="badge-demo-section-title" level="h3" text="动效与静态对照" />
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfButton id="badge-motion-pulse" label="Pulse" size="sm" @click="motion = 'pulse'" /></view><view class="badge-demo-item"><XtfButton id="badge-motion-bounce" label="Bounce" size="sm" @click="motion = 'bounce'" /></view><view class="badge-demo-item"><XtfButton id="badge-motion-wave" label="Wave" size="sm" @click="motion = 'wave'" /></view><view class="badge-demo-item"><XtfButton id="badge-motion-none" label="静态" size="sm" @click="motion = ''" /></view></view>
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge id="badge-motion-active" :value="8" :motion="motion"><view class="badge-demo-anchor"><text class="badge-demo-label">{{ motion.length > 0 ? motion : '静态' }}</text></view></XtfBadge></view><view class="badge-demo-item"><XtfBadge id="badge-motion-static" :value="8"><view class="badge-demo-anchor"><text class="badge-demo-label">静态对照</text></view></XtfBadge></view><view class="badge-demo-item"><XtfBadge id="badge-motion-hidden" :value="0" :motion="motion"><view class="badge-demo-anchor"><text class="badge-demo-label">Hidden</text></view></XtfBadge></view></view>
        </view>
        <view id="badge-group-position" class="badge-demo-section">
          <XtfText class="badge-demo-section-title" level="h3" text="圆点、定位与偏移" />
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge id="badge-dot-sm" dot size="sm" position="top-left"><XtfIcon name="home" size="lg" theme="info" variant="soft" round /></XtfBadge></view><view class="badge-demo-item"><XtfBadge id="badge-dot-lg" dot size="lg" position="bottom-right" theme="success"><XtfIcon name="favorite" size="lg" theme="danger" variant="soft" round /></XtfBadge></view><view class="badge-demo-item"><XtfBadge id="badge-offset" text="3" position="middle-right" color="#7c3aed" soft-color="#ede9fe" text-color="#ffffff" :offset-x="-4" offset-y="6rpx"><XtfButton label="Custom" size="sm" type="outline" /></XtfBadge></view></view>
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge id="badge-top-center" :value="2" position="top-center"><view class="badge-demo-anchor"><text class="badge-demo-label">上中</text></view></XtfBadge></view><view class="badge-demo-item"><XtfBadge id="badge-bottom-left" :value="3" position="bottom-left"><view class="badge-demo-anchor"><text class="badge-demo-label">左下</text></view></XtfBadge></view><view class="badge-demo-item"><XtfBadge id="badge-center" :value="4" position="center"><view class="badge-demo-anchor" /></XtfBadge></view><view class="badge-demo-item"><XtfBadge id="badge-standalone-position" text="独立" position="bottom-right" :offset-x="30" standalone /></view></view>
        </view>
        <view id="badge-group-variants" class="badge-demo-section">
          <XtfText class="badge-demo-section-title" level="h3" text="尺寸、主题与双色气泡" />
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge text="S" size="sm" variant="soft" standalone /></view><view class="badge-demo-item"><XtfBadge text="M" size="md" variant="outline" theme="warning" standalone /></view><view class="badge-demo-item"><XtfBadge text="L" size="lg" variant="glass" theme="info" standalone /></view><view class="badge-demo-item"><XtfBadge text="VIP" variant="bubble" theme="danger" standalone /></view></view>
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge id="badge-bubble-coral" text="NEW" variant="bubble" color="#dc2626" bubble-end-color="#f59e0b" standalone /></view><view class="badge-demo-item"><XtfBadge id="badge-bubble-teal" text="VIP" variant="bubble" color="#0284c7" bubble-end-color="#14b8a6" standalone /></view></view>
        </view>
        <view id="badge-group-event" class="badge-demo-section">
          <XtfText class="badge-demo-section-title" level="h3" text="自定义插槽与点击" />
          <view class="badge-demo-row"><view class="badge-demo-item"><XtfBadge id="badge-click-standalone" :text="'Clicked ' + tapCount" standalone clickable theme="danger" shape="rounded" @click="countTap" /></view><view class="badge-demo-item"><XtfBadge id="badge-click-slot" text="NEW" clickable @click="countTap"><view id="badge-slot-content" class="badge-demo-anchor"><XtfIcon name="home" size="sm" /><text class="badge-demo-label">工作台</text></view></XtfBadge></view><view class="badge-demo-item"><XtfBadge id="badge-click-disabled" text="不可点" standalone @click="countTap" /></view></view>
          <text id="badge-event-detail" class="badge-demo-count">{{ 'Clicks: ' + tapCount + '\n' + eventDetail }}</text>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfBadge from "@/uni_modules/xtf-linkuiunix/components/xtf-badge/xtf-badge.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"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"

const tapCount = ref(0)
const count = ref(8)
const showZero = ref(false)
const dot = ref(false)
const shown = ref(true)
const maxValue = ref(9)
const motion = ref<"" | "pulse" | "bounce" | "wave">("pulse")
const eventDetail = ref("尚未点击")
function countTap(event: UniPointerEvent): void {
  tapCount.value += 1
  eventDetail.value = 'type=' + event.type
  if (typeof event.clientX == "number" && typeof event.clientY == "number" && isFinite(event.clientX) && isFinite(event.clientY)) {
    eventDetail.value += '\nclientX=' + event.clientX + ', clientY=' + event.clientY
  }
}
</script>

<style>
.badge-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.badge-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.badge-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.badge-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.badge-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.badge-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.badge-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx 0; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #cbd5e1); overflow: visible; }
.badge-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.badge-demo-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; padding: 12rpx 0 0; overflow: visible; }
.badge-demo-item { margin: 12rpx; overflow: visible; }
.badge-demo-anchor { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 136rpx; height: 72rpx; border-radius: 8rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.badge-demo-toggle { display: flex; flex-direction: column; align-items: center; }
.badge-demo-label { color: var(--xtf-color-text, #0f172a); font-size: 22rpx; line-height: 1.5; }
.badge-demo-count { margin-top: 24rpx; width: 100%; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.6; white-space: normal; }
</style>
