<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="progress-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="progress-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="progress-demo-hero">
          <XtfText class="progress-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="progress-demo-title" level="display" color="inverse" text="Progress" />
          <XtfText class="progress-demo-intro" level="caption" color="inverse" text="任务进度" />
        </view>

        <view class="progress-demo-section progress-case-task">
          <XtfText class="progress-demo-section-title" level="h3" text="模拟上传" />
          <text class="progress-demo-status">{{ taskStatus }}</text>
          <XtfProgress :percentage="taskProgress" title="账单附件" :format="completionText" active active-mode="forwards" striped />
          <view class="progress-demo-actions">
            <XtfButton custom-class="progress-task-start" :label="taskProgress > 0 && taskProgress < 100 ? '继续' : '开始'" :disabled="running || taskProgress >= 100" @click="startTask" />
            <XtfButton custom-class="progress-task-pause" label="暂停" :disabled="!running" @click="pauseTask" />
            <XtfButton custom-class="progress-task-reset" label="重置" @click="resetTask" />
          </view>
        </view>

        <view class="progress-demo-section progress-case-slider">
          <XtfText class="progress-demo-section-title" level="h3" text="调整完成度" />
          <slider class="progress-demo-slider" :value="sliderValue" :min="0" :max="100" :step="1" show-value @changing="changeProgress" @change="changeProgress" />
          <XtfProgress :percentage="sliderValue" title="当前进度" indicator :show-text="false" />
          <XtfProgress :percentage="sliderValue" inside-text variant="default" />
          <XtfProgress :percentage="sliderValue" active active-mode="backwards" title="从零重播" />
          <XtfProgress :percentage="sliderValue" active active-mode="forwards" title="从上次值衔接" />
        </view>

        <view class="progress-demo-section progress-case-boundaries">
          <XtfText class="progress-demo-section-title" level="h3" text="边界进度" />
          <view v-for="value in boundaryValues" :key="value" class="progress-demo-item">
            <XtfProgress :percentage="value" :title="'输入 ' + value.toString()" inside-text indicator variant="default" />
          </view>
          <XtfProgress custom-class="progress-invalid-nan" percentage="NaN" stroke-width="NaN" steps="Infinity" title="无效数值" />
          <XtfProgress custom-class="progress-invalid-infinity" percentage="Infinity" stroke-width="Infinityrpx" title="非有限数值" />
        </view>

        <view class="progress-demo-section progress-case-aliases">
          <XtfText class="progress-demo-section-title" level="h3" text="别名优先级" />
          <view class="progress-demo-item"><XtfProgress custom-class="progress-percent-first" :percentage="80" :percent="25" title="percent = 25 / percentage = 80" /></view>
          <view class="progress-demo-item"><XtfProgress custom-class="progress-percent-zero" :percentage="80" :percent="0" title="percent = 0 / percentage = 80" /></view>
          <view class="progress-demo-item"><XtfProgress custom-class="progress-info-hidden" :percentage="65" :show-text="true" :show-info="false" title="showInfo = false" /></view>
          <XtfProgress custom-class="progress-info-visible" :percentage="65" :show-text="false" :show-info="true" title="showInfo = true" />
        </view>

        <view class="progress-demo-section progress-case-variants">
          <XtfText class="progress-demo-section-title" level="h3" text="变体与条纹" />
          <view v-for="variant in variants" :key="variant" class="progress-demo-item">
            <XtfProgress :percentage="64" :variant="variant" :title="variant" />
          </view>
          <view class="progress-demo-item"><XtfProgress :percentage="64" striped active indicator title="条纹任务" /></view>
          <XtfProgress indeterminate :show-text="false" title="等待响应" />
        </view>

        <view class="progress-demo-section progress-case-themes">
          <XtfText class="progress-demo-section-title" level="h3" text="主题、尺寸与文案" />
          <view v-for="theme in themes" :key="theme" class="progress-demo-item"><XtfProgress :percentage="68" :theme="theme" :title="theme" variant="default" /></view>
          <view class="progress-demo-item"><XtfProgress :percentage="42" size="sm" color="#0f766e" track-color="#ccfbf1" :format="statusText" /></view>
          <view class="progress-demo-item"><XtfProgress :percentage="76" size="lg" active-color="#7c3aed" inside-text /></view>
          <XtfProgress :percentage="100" theme="success" :format="completionText" />
        </view>

        <view class="progress-demo-section progress-case-steps">
          <XtfText class="progress-demo-section-title" level="h3" text="分段进度" />
          <view class="progress-demo-item"><XtfProgress :percentage="60" :steps="5" title="开户流程" /></view>
          <XtfProgress :percentage="40" :steps="4" theme="success" title="实名认证" :show-info="false" />
        </view>

        <view class="progress-demo-section progress-case-radial">
          <XtfText class="progress-demo-section-title" level="h3" text="圆环与仪表盘" />
          <view class="progress-demo-item"><XtfProgress type="circle" :percentage="75" note="同步完成" /></view>
          <XtfProgress type="dashboard" :percentage="56" theme="success" note="本周目标" />
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, onUnmounted, 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 XtfProgress from "@/uni_modules/xtf-linkuiunix/components/xtf-progress/xtf-progress.uvue"

const taskProgress = ref(0)
const running = ref(false)
const sliderValue = ref(1)
const boundaryValues = [-10, 0, 1, 100, 120] as number[]
const variants = ["default", "gradient", "glass", "glow", "neon"] as string[]
const themes = ["primary", "success", "warning", "danger", "info"] as string[]
let taskTimer: number | null = null
const taskStatus = computed((): string => taskProgress.value >= 100 ? "上传完成" : (running.value ? "上传中" : (taskProgress.value > 0 ? "已暂停" : "待上传")))
function stopTask(): void {
  if (taskTimer != null) { clearInterval(taskTimer!); taskTimer = null }
  running.value = false
}
function startTask(): void {
  if (running.value || taskProgress.value >= 100) return
  running.value = true
  taskTimer = setInterval(() => {
    taskProgress.value = Math.min(100, taskProgress.value + 5)
    if (taskProgress.value >= 100) stopTask()
  }, 500)
}
function pauseTask(): void { stopTask() }
function resetTask(): void { stopTask(); taskProgress.value = 0 }
function changeProgress(event: UniSliderChangeEvent): void { sliderValue.value = event.detail.value }
function statusText(value: number): string { return "已同步 " + Math.round(value).toString() + "%" }
function completionText(value: number): string { return value >= 100 ? "已完成" : Math.round(value).toString() + "%" }
onHide(() => { stopTask() })
onUnload(() => { stopTask() })
onUnmounted(() => { stopTask() })
</script>

<style>
.progress-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.progress-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.progress-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.progress-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.progress-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.progress-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.progress-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); }
.progress-demo-section-title { margin-bottom: 20rpx; color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.progress-demo-status { margin-bottom: 16rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 24rpx; }
.progress-demo-item { display: flex; flex-direction: column; margin-bottom: 24rpx; }
.progress-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-top: 20rpx; }
.progress-demo-slider { width: 100%; margin-bottom: 20rpx; }
</style>
