<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="circle-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
      <view class="circle-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="circle-demo-hero">
          <XtfText class="circle-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="circle-demo-title" level="display" color="inverse" text="Circle" />
          <XtfText class="circle-demo-intro" level="caption" color="inverse" text="Canvas 环形进度，支持渐变、缺口、方向控制与动画。" />
        </view>

        <view class="circle-demo-section">
          <XtfText class="circle-demo-section-title" level="h3" text="动态进度" />
          <XtfText class="circle-demo-section-desc" level="caption" color="secondary" text="调整目标值，组件按 speed 从当前值平滑过渡；目标不变时切换 speed 也即时生效。" />
          <view class="circle-demo-stage">
            <XtfCircle :percent="dynamicPercent" :speed="speed" :size="220" :stroke-width="14" color="#2563eb" />
          </view>
          <slider class="circle-demo-slider" :value="dynamicPercent" :min="0" :max="100" :step="1" active-color="#2563eb" @changing="changeProgress" @change="changeProgress" />
          <view class="circle-demo-actions">
            <view class="circle-demo-action"><XtfButton label="归零" type="outline" block @click="setProgress(0)" /></view>
            <view class="circle-demo-action circle-demo-action-right"><XtfButton id="circle-complete" label="完成" block @click="setProgress(100)" /></view>
          </view>
          <view class="circle-demo-actions"><button id="circle-speed" @click="speed = speed == 18 ? 80 : 18">切换速度 {{ speed }}ms</button><button id="circle-instant" @click="speed = 0">立即完成</button></view>
        </view>

        <view class="circle-demo-section">
          <XtfText class="circle-demo-section-title" level="h3" text="颜色与填充" />
          <XtfText class="circle-demo-section-desc" level="caption" color="secondary" text="纯色与 from/to 线性渐变均直接绘制到进度弧。" />
          <view class="circle-demo-grid">
            <view class="circle-demo-grid-item">
              <XtfCircle :percent="72" :speed="0" :size="180" :stroke-width="12" color="#16a34a" track-color="#dcfce7" />
              <XtfText class="circle-demo-label" level="caption" text="纯色" />
            </view>
            <view class="circle-demo-grid-item">
              <XtfCircle :percent="84" :speed="0" :size="180" :stroke-width="14" :color="gradientColor" track-color="#e0f2fe" fill="#f8fafc" />
              <XtfText class="circle-demo-label" level="caption" text="渐变 + 填充" />
            </view>
          </view>
        </view>

        <view class="circle-demo-section">
          <XtfText class="circle-demo-section-title" level="h3" text="真实缺口与四方位" />
          <XtfText class="circle-demo-section-desc" level="caption" color="secondary" text="轨道与进度共用缩短后的弧段，缺口中心可位于上、右、下、左。" />
          <view class="circle-demo-grid circle-demo-grid-wrap">
            <view v-for="position in gapPositions" :key="position" class="circle-demo-quarter">
              <XtfCircle :percent="68" :speed="0" :size="142" :stroke-width="10" color="#0f766e" track-color="#ccfbf1" :gap-degree="72" :gap-position="position" stroke-linecap="butt" />
              <XtfText class="circle-demo-label" level="caption" :text="position" />
            </view>
          </view>
        </view>

        <view class="circle-demo-section">
          <XtfText class="circle-demo-section-title" level="h3" text="方向与起始角" />
          <XtfText class="circle-demo-section-desc" level="caption" color="secondary" text="逆时针使用同一缺口几何；显式 start-angle=0 从右侧开始。" />
          <view class="circle-demo-grid">
            <view class="circle-demo-grid-item">
              <XtfCircle :percent="76" :speed="0" :size="180" :stroke-width="12" color="#dc2626" :clockwise="false" :gap-degree="50" gap-position="bottom" />
              <XtfText class="circle-demo-label" level="caption" text="逆时针" />
            </view>
            <view class="circle-demo-grid-item">
              <XtfCircle :percent="58" :speed="0" :size="180" :stroke-width="12" color="#d97706" :start-angle="0" />
              <XtfText class="circle-demo-label" level="caption" text="startAngle = 0" />
            </view>
          </view>
        </view>

        <view class="circle-demo-section">
          <XtfText class="circle-demo-section-title" level="h3" text="默认插槽与格式化" />
          <XtfText class="circle-demo-section-desc" level="caption" color="secondary" text="默认文本可由 textFormat 改写，也可用默认插槽完整替换。" />
          <view class="circle-demo-grid">
            <view class="circle-demo-grid-item">
              <XtfCircle :percent="43" :speed="0" :size="180" :text-format="formatRemaining" color="#7c3aed" />
              <XtfText class="circle-demo-label" level="caption" text="textFormat" />
            </view>
            <view class="circle-demo-grid-item">
              <XtfCircle :percent="91" :speed="0" :size="180" :color="gradientColor">
                <view class="circle-demo-slot">
                  <XtfIcon name="success" size="lg" theme="success" />
                  <XtfText class="circle-demo-slot-text" level="label" text="已达标" />
                </view>
              </XtfCircle>
              <XtfText class="circle-demo-label" level="caption" text="默认插槽" />
            </view>
          </view>
        </view>

        <view class="circle-demo-section">
          <XtfText class="circle-demo-section-title" level="h3" text="边界值" />
          <XtfText class="circle-demo-section-desc" level="caption" color="secondary" text="输入值钳制到 0 至 100；以下同时验证空进度与完整进度。" />
          <view class="circle-demo-grid">
            <view class="circle-demo-grid-item"><XtfCircle :percent="-20" :speed="0" :size="160" color="#475569" /><XtfText class="circle-demo-label" level="caption" text="-20 → 0" /></view>
            <view class="circle-demo-grid-item"><XtfCircle :percent="140" :speed="0" :size="160" color="#16a34a" /><XtfText class="circle-demo-label" level="caption" text="140 → 100" /></view>
          </view>
        </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 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"
import XtfCircle from "@/uni_modules/xtf-linkuiunix/components/xtf-circle/xtf-circle.uvue"

const dynamicPercent = ref(36)
const speed = ref(18)
const gradientColor = { from: "#2563eb", to: "#06b6d4" } as UTSJSONObject
const gapPositions = ["top", "right", "bottom", "left"] as string[]

function eventValue(event: any): number {
  return Number(event.detail != null ? event.detail.value : event)
}

function changeProgress(event: any): void {
  dynamicPercent.value = eventValue(event)
}

function setProgress(value: number): void {
  dynamicPercent.value = value
}

function formatRemaining(percent: number): string {
  return (100 - percent).toString() + " left"
}
</script>

<style>
.circle-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.circle-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.circle-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.circle-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.circle-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.circle-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.circle-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); }
.circle-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.circle-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.circle-demo-stage { display: flex; flex-direction: row; align-items: center; justify-content: center; padding-top: 8rpx; padding-bottom: 12rpx; }
.circle-demo-slider { width: 100%; margin-top: 8rpx; }
.circle-demo-actions { display: flex; flex-direction: row; margin-top: 12rpx; }
.circle-demo-action { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.circle-demo-action-right { margin-left: 14rpx; }
.circle-demo-grid { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-around; }
.circle-demo-grid-wrap { flex-wrap: wrap; }
.circle-demo-grid-item { display: flex; flex-direction: column; align-items: center; width: 50%; min-width: 0; }
.circle-demo-quarter { display: flex; flex-direction: column; align-items: center; width: 50%; min-width: 0; margin-bottom: 24rpx; }
.circle-demo-label { margin-top: 14rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; text-align: center; }
.circle-demo-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.circle-demo-slot-text { margin-top: 6rpx; color: var(--xtf-color-text, #0f172a); font-size: 22rpx; font-weight: 700; }
</style>
