<template>
	<XtfConfigProvider class="demo-theme-root" :theme="demoTheme" :safe-area="true">

		<scroll-view class="icon-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
			<view class="icon-demo-page xtf-safe-bottom xtf-page-scroll-content">
				<view class="icon-demo-hero">
					<XtfText class="icon-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
					<XtfText class="icon-demo-title" level="display" color="inverse" text="Icon" />
					<XtfText class="icon-demo-intro" level="caption" color="inverse" text="使用项目内置 Remix 图标字体及常用名称映射。" />
				</view>

				<view class="icon-demo-section">
					<XtfText class="icon-demo-section-title" level="h3" text="基础名称" />
					<XtfText class="icon-demo-section-desc" level="caption" color="secondary" text="当前内置的常用图标名称映射。" />
					<view class="icon-demo-grid">
						<view class="icon-demo-grid-item"><XtfIcon name="home" size="lg" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="home" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="search" size="lg" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="search" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="close" size="lg" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="close" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="info" size="lg" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="info" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="success" size="lg" theme="success" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="success" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="warning" size="lg" theme="warning" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="warning" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="error" size="lg" theme="danger" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="error" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="download" size="lg" theme="info" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="download" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="back" size="lg" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="back" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="share" size="lg" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="share" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="favorite" size="lg" theme="danger" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="favorite" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="more" size="lg" theme="secondary" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="more" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="expand_more" size="lg" theme="info" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="expand_more" /></view>
					</view>
				</view>

				<view class="icon-demo-section">
					<XtfText class="icon-demo-section-title" level="h3" text="尺寸" />
					<XtfText class="icon-demo-section-desc" level="caption" color="secondary" text="xs、sm、md、lg、xl 尺寸预设。" />
					<view class="icon-demo-size-row">
						<view class="icon-demo-size-item"><XtfIcon name="home" size="xs" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="xs" /></view>
						<view class="icon-demo-size-item"><XtfIcon name="home" size="sm" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="sm" /></view>
						<view class="icon-demo-size-item"><XtfIcon name="home" size="md" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="md" /></view>
						<view class="icon-demo-size-item"><XtfIcon name="home" size="lg" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="lg" /></view>
						<view class="icon-demo-size-item"><XtfIcon name="home" size="xl" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="xl" /></view>
					</view>
				</view>

				<view class="icon-demo-section">
					<XtfText class="icon-demo-section-title" level="h3" text="主题与 soft 变体" />
					<XtfText class="icon-demo-section-desc" level="caption" color="secondary" text="soft 背景与对应语义色成对使用。" />
					<view class="icon-demo-tone-row">
						<XtfIcon name="info" theme="primary" variant="soft" round size="lg" />
						<XtfIcon name="success" theme="success" variant="soft" round size="lg" />
						<XtfIcon name="warning" theme="warning" variant="soft" round size="lg" />
						<XtfIcon name="error" theme="danger" variant="soft" round size="lg" />
						<XtfIcon name="download" theme="info" variant="soft" round size="lg" />
					</view>
				</view>

				<view class="icon-demo-section">
					<XtfText class="icon-demo-section-title" level="h3" text="Plain 语义色" />
					<XtfText class="icon-demo-section-desc" level="caption" color="secondary" text="不带背景时的完整主题色、辅助色和禁用色。" />
					<view class="icon-demo-plain-row">
						<view class="icon-demo-plain-item"><XtfIcon name="info" size="lg" theme="primary" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="primary" /></view>
						<view class="icon-demo-plain-item"><XtfIcon name="success" size="lg" theme="success" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="success" /></view>
						<view class="icon-demo-plain-item"><XtfIcon name="warning" size="lg" theme="warning" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="warning" /></view>
						<view class="icon-demo-plain-item"><XtfIcon name="error" size="lg" theme="danger" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="danger" /></view>
						<view class="icon-demo-plain-item"><XtfIcon name="download" size="lg" theme="info" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="info" /></view>
						<view class="icon-demo-plain-item"><XtfIcon name="more" size="lg" theme="secondary" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="secondary" /></view>
						<view class="icon-demo-plain-item"><XtfIcon name="close" size="lg" theme="disabled" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="disabled" /></view>
					</view>
					<view class="icon-demo-inverse-stage"><XtfIcon name="home" size="lg" theme="inverse" /><XtfText class="icon-demo-inverse-label" level="label" color="inverse" text="inverse" /></view>
				</view>

				<view class="icon-demo-section">
					<XtfText class="icon-demo-section-title" level="h3" text="Remix 名称与状态" />
					<XtfText class="icon-demo-section-desc" level="caption" color="secondary" text="兼容 Material 别名、ri-* 名称和 filled、spin、pulse 状态。" />
					<view class="icon-demo-grid">
						<view class="icon-demo-grid-item"><XtfIcon name="ri-eye-line" size="lg" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="ri-eye-line" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="favorite" size="lg" filled theme="danger" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="filled" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="refresh" size="lg" spin /><XtfText class="icon-demo-label" level="micro" color="secondary" text="spin" /></view>
						<view class="icon-demo-grid-item"><XtfIcon name="notifications" size="lg" pulse theme="warning" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="pulse" /></view>
					</view>
				</view>

				<view class="icon-demo-section">
					<XtfText class="icon-demo-section-title" level="h3" text="自定义表面" />
					<XtfText class="icon-demo-section-desc" level="caption" color="secondary" text="bg、padding、radius 与 round 可组合设置图标容器。" />
					<view class="icon-demo-surface-row">
						<view class="icon-demo-surface-item"><XtfIcon name="home" size="lg" color="#ffffff" bg="#7c3aed" :padding="16" :radius="12" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="square" /></view>
						<view class="icon-demo-surface-item"><XtfIcon name="search" size="lg" color="#ffffff" bg="#0f766e" :padding="16" round /><XtfText class="icon-demo-label" level="micro" color="secondary" text="round" /></view>
						<view class="icon-demo-surface-item"><XtfIcon name="download" size="lg" color="#9a3412" bg="#ffedd5" :padding="18" :radius="24" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="custom" /></view>
					</view>
				</view>

				<view class="icon-demo-section">
					<XtfText class="icon-demo-section-title" level="h3" text="徽标" />
					<XtfText class="icon-demo-section-desc" level="caption" color="secondary" text="dot、badge 与 badge-max。" />
					<view class="icon-demo-badge-row">
						<view class="icon-demo-badge-item"><XtfIcon name="home" size="xl" dot /><XtfText class="icon-demo-label" level="micro" color="secondary" text="dot" /></view>
						<view class="icon-demo-badge-item"><XtfIcon name="download" size="xl" :badge="6" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="badge" /></view>
						<view class="icon-demo-badge-item"><XtfIcon name="info" size="xl" badge="120" :badge-max="99" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="99+" /></view>
						<view class="icon-demo-badge-item"><XtfIcon name="success" size="xl" theme="success" variant="soft" round badge="new" /><XtfText class="icon-demo-label" level="micro" color="secondary" text="soft badge" /></view>
					</view>
				</view>

				<view class="icon-demo-section">
					<XtfText class="icon-demo-section-title" level="h3" text="自定义颜色与点击" />
					<XtfText class="icon-demo-section-desc" level="caption" color="secondary" text="color 可覆盖主题色，clickable 开启点击事件。" />
					<view class="icon-demo-action-row">
						<XtfIcon name="home" size="xl" color="#7c3aed" variant="soft" round clickable @click="countTap" />
						<XtfIcon name="search" size="xl" color="#c2410c" variant="soft" round clickable @click="countTap" />
						<XtfIcon name="close" size="xl" color="#0f766e" variant="soft" round clickable @click="countTap" />
					</view>
					<XtfText class="icon-demo-tap-count" level="caption" color="secondary" align="center" :text="'Icon clicks: ' + tapCount" />
					<button id="basic-icon-reset" @click="tapCount = 0">重置计数</button>
					<button id="basic-icon-toggle" @click="dynamic = !dynamic">切换名称、旋转与动画</button>
					<XtfIcon id="basic-icon-dynamic" :name="dynamic ? 'refresh' : 'name-not-found'" :spin="dynamic" :custom-style="{ alignSelf: 'flex-start', transform: dynamic ? 'rotate(45deg)' : 'rotate(0deg)' }" :badge="tapCount" clickable @click="countTap" />
				</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"

const tapCount = ref(0)
const dynamic = ref(false)

function countTap(): void {
	tapCount.value += 1
}
</script>

<style>
.icon-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.icon-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.icon-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.icon-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.icon-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.icon-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.icon-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); }
.icon-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.icon-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.icon-demo-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
.icon-demo-grid-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25%; height: 132rpx; overflow: visible; }
.icon-demo-label { margin-top: 10rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 20rpx; text-align: center; }
.icon-demo-size-row { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; }
.icon-demo-size-item { display: flex; flex-direction: column; align-items: center; }
.icon-demo-tone-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.icon-demo-plain-row { display: flex; flex-direction: row; flex-wrap: wrap; }
.icon-demo-plain-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25%; height: 120rpx; }
.icon-demo-inverse-stage { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 12rpx; padding: 18rpx; border-radius: 12rpx; background-color: #1e293b; }
.icon-demo-inverse-label { margin-left: 12rpx; color: #ffffff; font-size: 22rpx; }
.icon-demo-surface-row { display: flex; flex-direction: row; justify-content: space-around; }
.icon-demo-surface-item { display: flex; flex-direction: column; align-items: center; overflow: visible; }
.icon-demo-badge-row { display: flex; flex-direction: row; justify-content: space-around; overflow: visible; }
.icon-demo-badge-item { display: flex; flex-direction: column; align-items: center; padding-top: 16rpx; overflow: visible; }
.icon-demo-action-row { display: flex; flex-direction: row; justify-content: space-around; }
.icon-demo-tap-count { margin-top: 22rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; text-align: center; }
</style>
