<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="tag-demo-scroll xtf-page-scroll" direction="vertical">
      <view id="tag-demo" class="tag-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="tag-demo-hero"><XtfText class="tag-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="tag-demo-title" level="display" color="inverse" text="Tag" /><XtfText class="tag-demo-intro" level="caption" color="inverse" text="用于状态、筛选、业务标记和可关闭内容的轻量标签。" /></view>
        <view class="tag-demo-section">
          <XtfText class="tag-demo-section-title" level="h3" text="业务预设" />
          <view class="tag-demo-wrap"><view v-for="item in presets" :key="item.preset" class="tag-demo-chip"><XtfTag :id="'tag-preset-' + item.preset" :text="item.text" :preset="item.preset" /></view></view>
        </view>
        <view class="tag-demo-section">
          <XtfText class="tag-demo-section-title" level="h3" text="变体、尺寸与形状" />
          <view class="tag-demo-wrap"><view v-for="item in variants" :key="item.variant" class="tag-demo-chip"><XtfTag :text="item.variant" :variant="item.variant" :theme="item.theme" /></view></view>
          <view class="tag-demo-size-row"><view v-for="size in sizes" :key="size" class="tag-demo-size-item"><XtfTag :text="size.toUpperCase()" :size="size" /></view></view>
          <view class="tag-demo-wrap"><view class="tag-demo-chip"><XtfTag text="默认" /></view><view class="tag-demo-chip"><XtfTag text="圆形" shape="round" /></view><view class="tag-demo-chip"><XtfTag text="圆点" shape="dot" theme="success" /></view><view class="tag-demo-chip"><XtfTag text="标记" shape="mark" theme="warning" /></view></view>
        </view>
        <view class="tag-demo-section">
          <XtfText class="tag-demo-section-title" level="h3" text="筛选与状态交互" />
          <view class="tag-demo-wrap">
            <view v-for="(item, index) in filters" :key="item" class="tag-demo-chip"><XtfTag :id="'tag-filter-' + index" :text="item" preset="filter" :checked="activeFilter == item" @change="selectFilter(item, $event)" /></view>
            <view class="tag-demo-chip"><XtfTag id="tag-disabled" text="Disabled" disabled checkable @change="record('disabled', $event)" /></view>
            <view class="tag-demo-chip"><XtfTag id="tag-unbound" text="独立连续切换" checkable @change="record('unbound', $event)" /></view>
          </view>
          <XtfText id="tag-filter-state" class="tag-demo-note" level="caption" color="secondary" :text="'当前筛选：' + activeFilter + '，切换次数：' + filterChanges.toString()" />
          <view class="tag-demo-wrap"><button id="tag-filter-fill" class="tag-demo-button" @click="activeFilter = '餐饮'; record('filter-fill', activeFilter)">回填餐饮</button><button id="tag-filter-reset" class="tag-demo-button" @click="activeFilter = '全部'; record('filter-reset', activeFilter)">重置筛选</button></view>
        </view>
        <view class="tag-demo-section">
          <XtfText class="tag-demo-section-title" level="h3" text="图标、插槽与自定义颜色" />
          <view class="tag-demo-wrap">
            <view class="tag-demo-chip"><XtfTag text="搜索结果" icon="search" icon-position="start" theme="info" /></view>
            <view class="tag-demo-chip"><XtfTag text="已同步" icon="success" icon-position="end" theme="success" /></view>
            <view class="tag-demo-chip"><XtfTag text="前后插槽" color="#0f766e" variant="outlined"><template #prefix><XtfIcon name="star" size="xs" theme="warning" /></template><template #suffix><XtfIcon name="verified" size="xs" theme="success" /></template></XtfTag></view>
            <view class="tag-demo-chip"><XtfTag text="自定义紫色" color="#7c3aed" soft-color="#ede9fe" border-color="#8b5cf6" variant="soft" /></view>
          </view>
        </view>
        <view class="tag-demo-section">
          <XtfText class="tag-demo-section-title" level="h3" text="渐变对照" />
          <view class="tag-demo-wrap">
            <view class="tag-demo-chip"><XtfTag id="tag-gradient-off" text="纯色" color="#2563eb" gradient-end-color="#7c3aed" /></view>
            <view class="tag-demo-chip"><XtfTag id="tag-gradient-on" text="渐变语义" gradient color="#2563eb" gradient-end-color="#7c3aed" /></view>
            <view class="tag-demo-chip"><XtfTag id="tag-gradient-outlined" text="描边不渐变" gradient variant="outlined" color="#2563eb" gradient-end-color="#7c3aed" /></view>
            <view class="tag-demo-chip"><XtfTag id="tag-gradient-bg" text="背景色优先" gradient color="#2563eb" bg-color="#0f766e" gradient-end-color="#7c3aed" /></view>
          </view>
        </view>
        <view class="tag-demo-section">
          <XtfText class="tag-demo-section-title" level="h3" text="可关闭、动效与长文本" />
          <view class="tag-demo-wrap">
            <view class="tag-demo-chip"><XtfTag id="tag-closable" v-model:show="showClosable" text="点击关闭" closable @close="handleClose" /></view>
            <button id="tag-restore" class="tag-demo-button" @click="showClosable = true; closeMessage = '标签已恢复'; record('restore', true)">恢复标签</button>
            <view class="tag-demo-chip"><XtfTag text="Pulse" motion="pulse" theme="success" /></view><view class="tag-demo-chip"><XtfTag text="Bounce" motion="bounce" theme="warning" /></view>
          </view>
          <button id="basic-tag-hairline" class="tag-demo-button" @click="hairline = !hairline">切换细描边</button>
          <view class="tag-demo-long"><XtfTag id="basic-tag-ellipsis" text="这是一段超过容器宽度后会自动省略的业务标签文案" ellipsis max-width="300rpx" variant="outlined" :hairline="hairline" /></view>
          <XtfText id="tag-close-state" class="tag-demo-note" level="caption" color="secondary" :text="closeMessage" />
        </view>
        <view class="tag-demo-section"><XtfText class="tag-demo-section-title" level="h3" text="事件日志" /><button id="tag-clear-log" class="tag-demo-button" @click="logs = []">清空日志</button><text id="tag-log" class="tag-demo-log">{{ logs.join('\n') }}</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 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 XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
import XtfTag from "@/uni_modules/xtf-linkuiunix/components/xtf-tag/xtf-tag.uvue"
const presets = [{ preset: "status", text: "处理中" }, { preset: "success", text: "已完成" }, { preset: "warning", text: "待确认" }, { preset: "danger", text: "失败" }, { preset: "feature", text: "精选" }, { preset: "hot", text: "热门" }, { preset: "promo", text: "促销" }, { preset: "location", text: "位置" }, { preset: "mark", text: "重点" }, { preset: "filter", text: "筛选" }, { preset: "glass", text: "玻璃" }, { preset: "im", text: "IM" }] as Array<any>
const variants = [{ variant: "solid", theme: "primary" }, { variant: "light", theme: "success" }, { variant: "soft", theme: "warning" }, { variant: "outlined", theme: "danger" }, { variant: "ghost", theme: "info" }, { variant: "glass", theme: "primary" }] as Array<any>
const sizes = ["xxs", "xs", "sm", "md", "lg"]
const filters = ["全部", "餐饮", "交通", "已归档"]
const activeFilter = ref("全部")
const filterChanges = ref(0)
const showClosable = ref(true)
const hairline = ref(false)
const closeMessage = ref("等待交互")
const logs = ref([] as Array<string>)
function record(name: string, payload: any): void { const line = name + ": " + JSON.stringify(payload); logs.value = [line].concat(logs.value).slice(0, 20); console.log("[tag]", line) }
function selectFilter(value: string, checked: boolean): void { activeFilter.value = checked ? value : "全部"; filterChanges.value += 1; record("filter", { value, checked, active: activeFilter.value }) }
function handleClose(): void { closeMessage.value = "标签已关闭"; record("close", showClosable.value) }
</script>
<style>
.tag-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.tag-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.tag-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #2563eb; }
.tag-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.tag-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.tag-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; }
.tag-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); }
.tag-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; margin-bottom: 18rpx; }
.tag-demo-wrap { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.tag-demo-chip { display: flex; flex-direction: row; margin-right: 12rpx; margin-bottom: 12rpx; }
.tag-demo-size-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 12rpx; }
.tag-demo-size-item { display: flex; flex-direction: row; margin-right: 12rpx; }
.tag-demo-note { margin-top: 14rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; }
.tag-demo-long { display: flex; flex-direction: row; width: 300rpx; margin-top: 10rpx; }
.tag-demo-button { margin: 0 12rpx 12rpx 0; padding: 8rpx 18rpx; font-size: 24rpx; color: #0f766e; background-color: #ecfdf5; }
.tag-demo-log { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #334155); font-size: 22rpx; white-space: pre-wrap; word-break: break-all; }
</style>
