<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="demo-scroll xtf-page-scroll" direction="vertical">
    <view class="demo-page xtf-page-scroll-content" :style="contentStyle">
      <view class="demo-intro">
        <XtfText text="Tabbar 底部导航" level="h1" bold />
        <XtfText class="demo-description" text="对比导航外观、图标排布与消息提醒，也可以开启固定底栏体验。" color="secondary" />
        <view class="demo-controls">
          <XtfButton id="tabbar-add-badge" class="demo-control" label="增加未读" size="sm" type="outline" @click="addUnread" />
          <XtfButton id="tabbar-clear-badge" class="demo-control" label="清除提醒" size="sm" type="outline" @click="clearUnread" />
          <XtfButton id="tabbar-reset" class="demo-control" label="恢复示例" size="sm" type="ghost" @click="reset" />
        </view>
        <view class="demo-fixed-control"><XtfText text="体验固定底栏" /><XtfSwitch id="tabbar-fixed-toggle" v-model="fixedPreview" /></view>
      </view>
      <view class="demo-section">
        <text class="demo-title">图标与文字</text>
        <XtfTabbar id="tabbar-basic" v-model="current" :list="items" :fixed="false" :safe-area-inset-bottom="false" icon-position="top" @change="record('change', $event)" @click-item="record('click-item', $event)" />
        <text class="demo-state">当前：{{ items[current].text }}</text>
      </view>
      <view v-for="(variant, index) in variants" :key="variant" class="demo-section">
        <text class="demo-title">{{ variantNames[index] }} · {{ variant }}</text>
        <XtfTabbar v-model="variantValues[index]" :list="plainItems" :variant="variant" :fixed="false" :safe-area-inset-bottom="false" :border-top="false" show-indicator :indicator-style="variant === 'underline' ? 'line' : 'pill'" @change="record(variant, $event)" />
      </view>
      <view class="demo-section">
        <text class="demo-title">纯图标</text>
        <XtfTabbar v-model="iconValue" :list="plainItems" :fixed="false" :safe-area-inset-bottom="false" :label-visible="false" :icon-only-size="56" show-indicator indicator-style="dot" indicator-position="bottom" @change="record('纯图标', $event)" />
      </view>
      <view class="demo-section">
        <text class="demo-title">图片导航</text>
        <XtfTabbar v-model="imageValue" :list="imageItems" :fixed="false" :safe-area-inset-bottom="false" media-type="image" icon-position="top" :image-size="52" @change="record('图片导航', $event)" />
      </view>
      <view class="demo-section">
        <text class="demo-title">图标在右 / 自定义颜色</text>
        <XtfTabbar v-model="customValue" :list="plainItems" :fixed="false" :safe-area-inset-bottom="false" icon-position="end" active-color="#0f766e" active-item-background="#ecfdf5" :active-radius="16" :active-inset="8" @change="record('自定义', $event)" />
      </view>
      <view id="tabbar-event-panel" class="demo-events">
        <XtfText text="事件回显" level="h3" bold />
        <XtfText id="tabbar-events" class="demo-state demo-event-text" :text="log" selectable />
        <XtfText class="demo-description" text="停用项不会切换；重复点击当前项仅触发 click-item，不重复触发 change。" color="secondary" level="caption" />
        <XtfButton id="tabbar-clear-events" class="demo-clear-events" label="清空记录" size="sm" type="ghost" @click="log = '暂无事件'" />
      </view>
    </view>
  </scroll-view>
  <XtfTabbar v-if="fixedPreview" id="tabbar-fixed-preview" v-model="fixedValue" :list="plainItems" variant="floating" icon-position="top" :height="144" :border-top="false" show-indicator :safe-area-inset-bottom="true" @change="record('固定底栏', $event)" />
  </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 { computed, ref } from 'vue'
import XtfTabbar from '@/uni_modules/xtf-linkuiunix/components/xtf-tabbar/xtf-tabbar.uvue'
import XtfButton from '@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue'
import XtfSwitch from '@/uni_modules/xtf-linkuiunix/components/xtf-switch/xtf-switch.uvue'
import XtfText from '@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue'
const current = ref(0)
const iconValue = ref(0)
const imageValue = ref(0)
const customValue = ref(0)
type DemoTab = { text: string, icon: string, activeIcon?: string, badge?: number, dot?: boolean, disabled?: boolean }
const items = ref<DemoTab[]>([
  { text: '首页', icon: 'home', activeIcon: 'ri-home-5-fill' },
  { text: '消息', icon: 'chat', badge: 8 },
  { text: '我的', icon: 'account_circle', dot: true },
  { text: '停用', icon: 'settings', disabled: true }
])
const plainItems = computed(() => items.value.slice(0, 3))
const imageItems = [
  { text: '应用', image: '/static/logo.png' },
  { text: '工作台', image: '/static/logo.png', badge: 2 },
  { text: '账户', image: '/static/logo.png', dot: true }
]
const variants = ['soft', 'glass', 'floating', 'capsule', 'segment', 'pills', 'underline', 'elevated', 'minimal']
const variantNames = ['柔和背景', '玻璃质感', '悬浮导航', '胶囊导航', '分段选中', '独立胶囊', '下划线', '上浮选中', '简洁导航']
const variantValues = ref(variants.map(() => 0))
const fixedPreview = ref(false)
const fixedValue = ref(0)
const contentStyle = computed((): UTSJSONObject => ({ paddingBottom: fixedPreview.value ? (uni.upx2px(192) + (uni.getWindowInfo().safeAreaInsets?.bottom ?? 0)).toString() + 'px' : '24rpx' }))
const log = ref('暂无事件')
function record(name: string, payload: any): void {
  const entry = name + '：' + JSON.stringify(payload)
  log.value = [entry, ...(log.value == '暂无事件' ? [] : log.value.split('\n'))].slice(0, 6).join('\n')
}
function addUnread(): void { items.value[1].badge = (items.value[1].badge ?? 0) + 1; items.value[2].dot = true }
function clearUnread(): void { items.value[1].badge = 0; items.value[2].dot = false }
function reset(): void {
  current.value = 0; iconValue.value = 0; imageValue.value = 0; customValue.value = 0; fixedValue.value = 0
  variantValues.value = variants.map(() => 0); items.value[1].badge = 8; items.value[2].dot = true
  fixedPreview.value = false; log.value = '暂无事件'
}
</script>
<style>
.demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; background-color: var(--xtf-color-page, #fcf8ff); }
.demo-page { display: flex; flex-direction: column; flex-shrink: 0; width: 100%; max-width: 1120px; align-self: center; min-width: 0; padding: 24rpx; box-sizing: border-box; }
.demo-intro { display: flex; flex-direction: column; flex-shrink: 0; margin-bottom: 32rpx; }
.demo-description { margin-top: 12rpx; }
.demo-controls { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20rpx; }
.demo-control { margin-right: 12rpx; margin-bottom: 12rpx; }
.demo-fixed-control { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 12rpx; }
.demo-section { display: flex; flex-direction: column; flex-shrink: 0; min-width: 0; margin-bottom: 36rpx; padding: 20rpx 16rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); overflow: visible; }
.demo-title { margin-bottom: 18rpx; color: var(--xtf-color-text, #1b1b23); font-size: 30rpx; font-weight: 700; }
.demo-state { margin-top: 14rpx; color: var(--xtf-color-text-secondary, #464554); font-size: 24rpx; line-height: 36rpx; }
.demo-event-text { white-space: pre-wrap; word-break: break-all; }
.demo-events { display: flex; flex-direction: column; flex-shrink: 0; min-width: 0; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.demo-clear-events { align-self: flex-start; margin-top: 12rpx; }
</style>
