<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="demo-scroll" direction="vertical">
    <view class="demo-page">
      <view class="demo-section">
        <text class="demo-title">图片轮播</text>
        <XtfSwiper v-model="current" :items="items" :height="360" :autoplay="autoplay" :circular="circular" :disable-touch="disableTouch"
          :layout="layout" :animation="animation" :indicator="indicator" @change="recordChange" @item-click="recordClick" @image-error="log = '图片加载失败，请检查网络'" />
        <view class="demo-setting"><text class="demo-label">自动播放</text><switch :checked="autoplay" @change="autoplay = $event.detail.value" /></view>
        <view class="demo-setting"><text class="demo-label">循环播放</text><switch :checked="circular" @change="circular = $event.detail.value" /></view>
        <view class="demo-setting"><text class="demo-label">禁用手势</text><switch :checked="disableTouch" @change="disableTouch = $event.detail.value" /></view>
        <view class="demo-setting"><text class="demo-label">布局</text><picker :range="layouts" @change="layout = layouts[Number($event.detail.value)]"><text class="demo-picker">{{ layout }} ›</text></picker></view>
        <view class="demo-setting"><text class="demo-label">动画</text><picker :range="animations" @change="animation = animations[Number($event.detail.value)]"><text class="demo-picker">{{ animation }} ›</text></picker></view>
        <view class="demo-setting"><text class="demo-label">指示器</text><picker :range="indicators" @change="indicator = indicators[Number($event.detail.value)]"><text class="demo-picker">{{ indicator }} ›</text></picker></view>
        <view class="demo-controls">
          <button class="demo-button" :disabled="!circular && current === 0" @click="previous">上一张</button>
          <text class="demo-label">{{ current + 1 }} / {{ items.length }}</text>
          <button class="demo-button" :disabled="!circular && current === items.length - 1" @click="next">下一张</button>
        </view>
      </view>
      <view class="demo-section">
        <text class="demo-title">卡片预览</text>
        <XtfSwiper :items="items" layout="peek" animation="coverflow" indicator="fraction" :height="320" @item-click="recordClick" />
      </view>
      <view class="demo-section">
        <text class="demo-title">纵向轮播</text>
        <XtfSwiper :items="items" vertical indicator="bars" :height="320" @item-click="recordClick" />
      </view>
      <view class="demo-section">
        <text class="demo-title">自定义内容</text>
        <XtfSwiper :items="items" :height="260" indicator="number">
          <template #item="{ item, index, active }">
            <view class="demo-slot" :style="{ backgroundColor: index === 0 ? '#0f766e' : index === 1 ? '#9f1239' : '#3730a3' }" @click="recordClick({ item, index })">
              <text class="demo-slot-index">0{{ index + 1 }}</text>
              <text class="demo-slot-title">{{ item.title }}</text>
              <text class="demo-slot-desc">{{ active ? item.desc : '' }}</text>
            </view>
          </template>
        </XtfSwiper>
      </view>
      <text class="demo-title">事件回显</text><text class="demo-state">{{ log }}</text>
    </view>
  </scroll-view>
  </XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
import XtfConfigProvider from '@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue'
const demoTheme = useDemoTheme()
import { ref } from 'vue'
import XtfSwiper from '@/uni_modules/xtf-linkuiunix/components/xtf-swiper/xtf-swiper.uvue'
const current = ref(0)
const autoplay = ref(false)
const circular = ref(true)
const disableTouch = ref(false)
const layout = ref('classic')
const animation = ref('slide')
const indicator = ref('dots')
const log = ref('暂无事件')
const layouts = ['classic', 'card', 'inset', 'peek', 'poster', 'editorial', 'magazine', 'split', 'glass', 'polaroid', 'spotlight', 'fullscreen', 'stack', 'deck', 'coverflow']
const animations = ['slide', 'fade', 'zoom', 'coverflow', 'flip', 'rotate', 'blur', 'bounce', 'stack', 'float', 'skew', 'glow', 'none']
const indicators = ['dots', 'bars', 'number', 'fraction', 'fraction-dots', 'none']
const items = [
  { id: 'mountain', title: '山野之间', desc: '远山与湖泊', badge: '01', image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1000&q=85&fit=crop' },
  { id: 'forest', title: '林间漫步', desc: '光影与绿意', badge: '02', image: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1000&q=85&fit=crop' },
  { id: 'coast', title: '海岸日记', desc: '海浪与沙滩', badge: '03', image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1000&q=85&fit=crop' }
]
function previous(): void { current.value = circular.value ? (current.value + items.length - 1) % items.length : Math.max(0, current.value - 1) }
function next(): void { current.value = circular.value ? (current.value + 1) % items.length : Math.min(items.length - 1, current.value + 1) }
function recordChange(value: number): void { log.value = 'change：第 ' + (value + 1) + ' 张' }
function recordClick(payload: any): void { log.value = 'item-click：' + payload.item.title }
</script>
<style>
.demo-scroll { flex: 1; width: 100%; background-color: var(--xtf-color-page, #fcf8ff); }
.demo-page { display: flex; flex-direction: column; padding: 24rpx; }
.demo-section { display: flex; flex-direction: column; margin-bottom: 36rpx; }
.demo-title { margin-bottom: 18rpx; color: var(--xtf-color-text, #1b1b23); font-size: 30rpx; font-weight: 700; }
.demo-label { color: var(--xtf-color-text-secondary, #464554); font-size: 24rpx; }
.demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 16rpx; }
.demo-picker { padding: 12rpx 0 12rpx 24rpx; color: #6366f1; font-size: 24rpx; }
.demo-controls { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 20rpx; }
.demo-button { margin: 0; padding: 0 24rpx; line-height: 64rpx; font-size: 24rpx; color: var(--xtf-color-text-secondary, #6366f1); background-color: var(--xtf-color-surface-muted, #f5f2fe); }
.demo-state { color: var(--xtf-color-text-secondary, #464554); font-size: 24rpx; line-height: 36rpx; }
.demo-slot { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 32rpx; border-radius: 28rpx; }
.demo-slot-index { color: #ffffff; font-size: 22rpx; }
.demo-slot-title { margin-top: 10rpx; color: #ffffff; font-size: 32rpx; font-weight: 700; }
.demo-slot-desc { margin-top: 8rpx; color: #ffffff; font-size: 24rpx; }
</style>
