<template>
  <view class="demo-container">
    <view class="demo-title">ImageSwiper 轮播图组件演示</view>
    
    <!-- 示例1: 默认圆角 -->
    <view class="demo-section">
      <view class="section-title">示例1: 默认圆角 (8px)</view>
      <ImageSwiper />
    </view>
    
    <!-- 示例2: 无圆角 -->
    <view class="demo-section">
      <view class="section-title">示例2: 无圆角 (0px)</view>
      <ImageSwiper :border-radius="0" />
    </view>
    
    <!-- 示例3: 大圆角 -->
    <view class="demo-section">
      <view class="section-title">示例3: 大圆角 (20px)</view>
      <ImageSwiper :border-radius="20" />
    </view>
    
    <!-- 示例4: 字符串圆角 -->
    <view class="demo-section">
      <view class="section-title">示例4: 字符串圆角 (1rem)</view>
      <ImageSwiper border-radius="1rem" />
    </view>
    
    <!-- 示例5: 自定义图片数据 -->
    <view class="demo-section">
      <view class="section-title">示例5: 自定义图片数据 + 圆角15px</view>
      <ImageSwiper :border-radius="15" :images="customImages" />
    </view>
    
    <!-- 示例7: 多图片测试滑动 -->
    <view class="demo-section">
      <view class="section-title">示例7: 多图片测试缩略图滑动</view>
      <ImageSwiper :border-radius="10" :images="manyImages" />
    </view>
    
    <!-- 示例6: 动态圆角控制 -->
    <view class="demo-section">
      <view class="section-title">示例6: 动态圆角控制</view>
      <view class="control-panel">
        <text>圆角大小: {{ dynamicRadius }}px</text>
        <slider 
          :value="dynamicRadius" 
          :min="0" 
          :max="50" 
          @change="handleRadiusChange"
          activeColor="#007AFF"
        />
      </view>
      <ImageSwiper :border-radius="dynamicRadius" />
    </view>
    
    <!-- 示例8: 自定义高度 -->
    <view class="demo-section">
      <view class="section-title">示例8: 自定义高度 (300px)</view>
      <ImageSwiper :height="300" :border-radius="12" />
    </view>
    
    <!-- 示例9: 小高度轮播图 -->
    <view class="demo-section">
      <view class="section-title">示例9: 小高度轮播图 (120px)</view>
      <ImageSwiper :height="120" :border-radius="8" />
    </view>
    
    <!-- 示例10: 隐藏缩略图 -->
    <view class="demo-section">
      <view class="section-title">示例10: 隐藏缩略图</view>
      <ImageSwiper :show-thumbnails="false" :border-radius="15" />
    </view>
    
    <!-- 示例11: 动态高度和缩略图控制 -->
    <view class="demo-section">
      <view class="section-title">示例11: 动态高度和缩略图控制</view>
      <view class="control-panel">
        <text>高度: {{ dynamicHeight }}px</text>
        <slider 
          :value="dynamicHeight" 
          :min="100" 
          :max="400" 
          @change="handleHeightChange"
          activeColor="#007AFF"
        />
        <view class="checkbox-wrapper">
          <checkbox :checked="showThumbnails" @change="handleThumbnailToggle" />
          <text class="checkbox-label">显示缩略图</text>
        </view>
      </view>
      <ImageSwiper 
        :height="dynamicHeight" 
        :show-thumbnails="showThumbnails" 
        :border-radius="10" 
      />
    </view>
    
    <!-- 示例12: 字符串高度 -->
    <view class="demo-section">
      <view class="section-title">示例12: 字符串高度 (50vh)</view>
      <ImageSwiper height="50vh" :border-radius="20" :show-thumbnails="false" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import ImageSwiper from './index.vue'

// 动态圆角控制
const dynamicRadius = ref(8)

// 动态高度控制
const dynamicHeight = ref(200)

// 缩略图显示控制
const showThumbnails = ref(true)

// 自定义图片数据
const customImages = ref([
  {
    photoUrl: "https://fastly.picsum.photos/id/100/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
    photoName: "自定义图片1",
  },
  {
    photoUrl: "https://fastly.picsum.photos/id/200/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
    photoName: "自定义图片2",
  },
  {
    photoUrl: "https://fastly.picsum.photos/id/300/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
    photoName: "自定义图片3",
  }
])

// 多图片数据，用于测试缩略图滑动
const manyImages = ref([
  { photoUrl: "https://fastly.picsum.photos/id/10/654/400.jpg", photoName: "风景1" },
  { photoUrl: "https://fastly.picsum.photos/id/20/654/400.jpg", photoName: "风景2" },
  { photoUrl: "https://fastly.picsum.photos/id/30/654/400.jpg", photoName: "风景3" },
  { photoUrl: "https://fastly.picsum.photos/id/40/654/400.jpg", photoName: "风景4" },
  { photoUrl: "https://fastly.picsum.photos/id/50/654/400.jpg", photoName: "风景5" },
  { photoUrl: "https://fastly.picsum.photos/id/60/654/400.jpg", photoName: "风景6" },
  { photoUrl: "https://fastly.picsum.photos/id/70/654/400.jpg", photoName: "风景7" },
  { photoUrl: "https://fastly.picsum.photos/id/80/654/400.jpg", photoName: "风景8" },
  { photoUrl: "https://fastly.picsum.photos/id/90/654/400.jpg", photoName: "风景9" },
  { photoUrl: "https://fastly.picsum.photos/id/110/654/400.jpg", photoName: "风景10" }
])

// 处理圆角变化
const handleRadiusChange = (e) => {
  dynamicRadius.value = e.detail.value
}

// 处理高度变化
const handleHeightChange = (e) => {
  dynamicHeight.value = e.detail.value
}

// 处理缩略图显示切换
const handleThumbnailToggle = (e) => {
  showThumbnails.value = e.detail.value
}
</script>

<style scoped lang="scss">
.demo-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.demo-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.demo-section {
  margin-bottom: 60rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
  color: #333;
  border-left: 6rpx solid #007AFF;
  padding-left: 16rpx;
}

.control-panel {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.control-panel text {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
}

slider {
  width: 100%;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.checkbox-label {
  margin-left: 16rpx;
  font-size: 24rpx;
  color: #666;
}
</style>