<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="slider-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
      <view class="slider-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="slider-demo-hero"><XtfText class="slider-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="slider-demo-title" level="display" color="inverse" text="Slider" /><XtfText class="slider-demo-intro" level="caption" color="inverse" text="用于设置连续数值、范围阈值与分级选项的滑动控件。" /></view>
        <view class="slider-demo-section"><XtfText class="slider-demo-section-title" level="h3" text="单值与事件" /><XtfText class="slider-demo-section-desc" level="caption" color="secondary" text="拖动时实时更新，松开后记录 change 事件；可动态禁用或外部赋值。" /><XtfSlider id="slider-live" v-model="volume" :disabled="liveDisabled" title="提醒音量" desc="会议室通知音" unit="%" show-value show-bubble @changing="recordChanging" @change="recordChange" /><button id="slider-disable" class="slider-demo-toggle" @click="liveDisabled = !liveDisabled">{{ liveDisabled ? '启用滑块' : '禁用滑块' }}</button><button id="slider-external" class="slider-demo-toggle" @click="volume = 20">外部设为20</button><view class="slider-demo-event"><text class="slider-demo-event-label">Last change</text><text class="slider-demo-event-value">{{ eventText }}</text></view></view>
        <view class="slider-demo-section"><XtfText class="slider-demo-section-title" level="h3" text="范围与刻度" /><XtfText class="slider-demo-section-desc" level="caption" color="secondary" text="点击刻度会移动距离最近的端点。" /><XtfSlider v-model="budget" range :step="5" title="预算区间" unit="k" :marks="budgetMarks" mark-clickable show-range show-bubble bubble-visible-mode="always" min-label="0k" max-label="100k" @change="recordChange" /></view>
        <view class="slider-demo-section"><XtfText class="slider-demo-section-title" level="h3" text="垂直控制" /><XtfText class="slider-demo-section-desc" level="caption" color="secondary" text="垂直轨道从下至上递增。" /><view class="slider-demo-vertical-row"><view class="slider-demo-vertical-item"><XtfSlider v-model="temperature" vertical theme="success" title="冷藏温度" :min="-10" :max="20" :step="1" :format="temperatureFormat" :bubble-format="temperatureBubble" show-value show-bubble bubble-visible-mode="drag" show-range /></view><view class="slider-demo-vertical-item"><XtfSlider v-model="light" vertical theme="warning" variant="glow" title="灯光" unit="%" show-bubble bubble-visible-mode="always" /></view></view></view>
          <view class="slider-demo-section"><XtfText class="slider-demo-section-title" level="h3" text="预设与变体" /><XtfText class="slider-demo-section-desc" level="caption" color="secondary" text="颜色、渐变、轨道与进度圆角可单独覆盖。" /><view class="slider-demo-stack"><view class="slider-demo-slider-item"><XtfSlider v-model="progress" variant="glass" preset="bold-minimal" title="部署进度" :progress-color="'#0f766e'" :block-color="'#0f766e'" show-value /></view><view class="slider-demo-slider-item"><XtfSlider v-model="signal" variant="neon" preset="cyberpunk-edge" title="信号强度" theme="info" show-bubble bubble-visible-mode="always" /></view><view class="slider-demo-slider-item"><XtfSlider v-model="custom" title="自定义轨道" track-color="#fde68a" active-color="#c2410c" block-color="#c2410c" :thumb-size="42" :track-height="14" show-value /></view><view class="slider-demo-slider-item"><XtfSlider v-model="gradientProgress" title="渐变进度" track-color="#dbeafe" progress-start-color="#2563eb" progress-end-color="#14b8a6" :progress-gradient-angle="45" :track-radius="20" :progress-radius="20" show-value /></view><view class="slider-demo-slider-item"><XtfSlider v-model="blockProgress" title="粗轨道进度" active-color="#7c3aed" block-color="#7c3aed" :thumb-size="46" :track-height="30" :track-radius="4" :progress-radius-top-left="4" :progress-radius-bottom-left="4" show-value /></view></view></view>
        <view class="slider-demo-section"><XtfText class="slider-demo-section-title" level="h3" text="气泡、标签与状态" /><XtfText class="slider-demo-section-desc" level="caption" color="secondary" text="支持仅显示标签、禁用和只读状态。" /><view class="slider-demo-stack"><XtfSlider v-model="priority" title="优先级" :min="0" :max="3" :step="1" :marks="priorityMarks" mark-clickable show-range show-bubble value-placement="both" bubble-style="indicator" /><XtfSlider :value="35" title="禁用项目" disabled show-value /><XtfSlider :value="68" title="只读进度" readonly show-value show-bubble /></view></view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
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 XtfSlider from "@/uni_modules/xtf-linkuiunix/components/xtf-slider/xtf-slider.uvue"
import { ref } from "vue"
const liveDisabled = ref(false)
const volume = ref(42)
const budget = ref([25, 75] as number[])
const temperature = ref(4)
const light = ref(66)
const progress = ref(72)
const signal = ref(58)
const custom = ref(36)
const gradientProgress = ref(56)
const blockProgress = ref(64)
const priority = ref(2)
const eventText = ref("42%")
const budgetMarks = [{ value: 0, label: "0" }, { value: 25, label: "25" }, { value: 50, label: "50" }, { value: 75, label: "75" }, { value: 100, label: "100" }]
const priorityMarks = [{ value: 0, label: "Low" }, { value: 1, label: "Normal" }, { value: 2, label: "High" }, { value: 3, label: "Urgent" }]
function temperatureFormat(value: number): string { return value.toString() + " C" }
function temperatureBubble(value: number): string { return value.toString() + " deg" }
function recordChanging(value: any): void { eventText.value = Array.isArray(value) ? value[0].toString() + " - " + value[1].toString() : value.toString() }
function recordChange(value: any): void { recordChanging(value) }
</script>

<style>
.slider-demo-toggle { margin-top: 12rpx; font-size: 24rpx; }
.slider-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }.slider-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.slider-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }.slider-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }.slider-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }.slider-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.slider-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); }.slider-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }.slider-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }.slider-demo-stack { display: flex; flex-direction: column; }.slider-demo-slider-item { margin-bottom: 22rpx; }.slider-demo-event { display: flex; flex-direction: row; align-items: center; margin-top: 18rpx; padding: 16rpx; border-radius: 10rpx; background-color: var(--xtf-color-surface-muted, #eff6ff); }.slider-demo-event-label { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }.slider-demo-event-value { margin-left: 12rpx; color: #2563eb; font-size: 24rpx; font-weight: 700; }.slider-demo-vertical-row { display: flex; flex-direction: row; align-items: flex-start; width: 100%; min-height: 440rpx; }.slider-demo-vertical-item { display: flex; flex-direction: column; align-items: center; width: 50%; min-width: 0; }
</style>
