<template>
  <view class="swiper-container" :class="containerClass">
    <swiper
      class="swiper"
      :class="swiperClass"
      :indicator-dots="indicatorDots"
      :indicator-color="indicatorColor"
      :indicator-active-color="indicatorActiveColor"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      :circular="circular"
      :vertical="vertical"
      :previous-margin="previousMargin"
      :next-margin="nextMargin"
      :display-multiple-items="displayMultipleItems"
      :skip-hidden-item-layout="skipHiddenItemLayout"
      :easing-function="easingFunction"
      @change="handleChange"
      @transition="handleTransition"
      @animationfinish="handleAnimationFinish"
    >
      <swiper-item
        v-for="(item, index) in list"
        :key="getItemKey(item, index)"
        :item-id="getItemId(item, index)"
        class="swiper-item"
        @click="handleItemClick(item, index)"
      >
        <!-- 自定义内容插槽 -->
        <slot name="item" :item="item" :index="index">
          <!-- 默认图片展示 -->
          <view class="swiper-item-default" v-if="item.image || item.src || item.url">
            <image
              class="swiper-image"
              :src="item.image || item.src || item.url"
              :mode="imageMode"
              :lazy-load="lazyLoad"
              @load="handleImageLoad"
              @error="handleImageError"
            />
            <!-- 标题和描述 -->
            <view class="swiper-content" v-if="item.title || item.description">
              <view class="swiper-title" v-if="item.title">
                {{ item.title }}
              </view>
              <view class="swiper-desc" v-if="item.description">
                {{ item.description }}
              </view>
            </view>
          </view>
          
          <!-- 纯文本内容 -->
          <view class="swiper-item-text" v-else>
            <view class="text-content">
              {{ item.title || item.text || item }}
            </view>
          </view>
        </slot>
      </swiper-item>
    </swiper>
    
    <!-- 自定义指示器 -->
    <view 
      class="custom-indicators" 
      v-if="showCustomIndicators"
      :class="indicatorsClass"
    >
      <view
        class="indicator-item"
        :class="{ active: index === currentIndex }"
        v-for="(item, index) in list"
        :key="index"
        @click="handleIndicatorClick(index)"
      >
        <view class="indicator-dot"></view>
      </view>
    </view>
    
    <!-- 左右箭头 -->
    <view class="swiper-arrows" v-if="showArrows">
      <view class="arrow arrow-left" @click="handlePrev">
        <text class="arrow-icon">‹</text>
      </view>
      <view class="arrow arrow-right" @click="handleNext">
        <text class="arrow-icon">›</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Swiper',
  props: {
    // 轮播数据
    list: {
      type: Array,
      default: () => []
    },
    // 是否显示指示点
    indicatorDots: {
      type: Boolean,
      default: true
    },
    // 指示点颜色
    indicatorColor: {
      type: String,
      default: 'rgba(0, 0, 0, .3)'
    },
    // 当前选中的指示点颜色
    indicatorActiveColor: {
      type: String,
      default: '#000000'
    },
    // 是否自动切换
    autoplay: {
      type: Boolean,
      default: true
    },
    // 自动切换时间间隔
    interval: {
      type: Number,
      default: 5000
    },
    // 滑动动画时长
    duration: {
      type: Number,
      default: 500
    },
    // 是否采用衔接滑动
    circular: {
      type: Boolean,
      default: true
    },
    // 滑动方向是否为纵向
    vertical: {
      type: Boolean,
      default: false
    },
    // 前边距
    previousMargin: {
      type: String,
      default: '0px'
    },
    // 后边距
    nextMargin: {
      type: String,
      default: '0px'
    },
    // 同时显示的滑块数量
    displayMultipleItems: {
      type: Number,
      default: 1
    },
    // 是否跳过未显示的滑块布局
    skipHiddenItemLayout: {
      type: Boolean,
      default: false
    },
    // 指定swiper切换缓动动画类型
    easingFunction: {
      type: String,
      default: 'default'
    },
    // 图片裁剪模式
    imageMode: {
      type: String,
      default: 'aspectFill'
    },
    // 图片懒加载
    lazyLoad: {
      type: Boolean,
      default: true
    },
    // 轮播图高度
    height: {
      type: String,
      default: '300rpx'
    },
    // 圆角大小
    borderRadius: {
      type: String,
      default: '0'
    },
    // 是否显示自定义指示器
    showCustomIndicators: {
      type: Boolean,
      default: false
    },
    // 指示器位置
    indicatorPosition: {
      type: String,
      default: 'bottom', // top, bottom, left, right
      validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
    },
    // 是否显示箭头
    showArrows: {
      type: Boolean,
      default: false
    },
    // 唯一标识字段
    keyField: {
      type: String,
      default: 'id'
    },
    // 自定义样式类
    customClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  computed: {
    containerClass() {
      return [
        this.customClass,
        { 'swiper-vertical': this.vertical }
      ]
    },
    swiperClass() {
      return {
        'swiper-custom': this.showCustomIndicators || this.showArrows
      }
    },
    indicatorsClass() {
      return [
        `indicators-${this.indicatorPosition}`
      ]
    }
  },
  methods: {
    // 获取项目唯一标识
    getItemKey(item, index) {
      if (typeof item === 'object' && item[this.keyField]) {
        return item[this.keyField]
      }
      return index
    },
    // 获取项目ID
    getItemId(item, index) {
      return this.getItemKey(item, index).toString()
    },
    // 轮播切换事件
    handleChange(e) {
      this.currentIndex = e.detail.current
      this.$emit('change', {
        current: e.detail.current,
        source: e.detail.source,
        item: this.list[e.detail.current]
      })
    },
    // 轮播过渡事件
    handleTransition(e) {
      this.$emit('transition', e.detail)
    },
    // 动画结束事件
    handleAnimationFinish(e) {
      this.$emit('animationfinish', e.detail)
    },
    // 项目点击事件
    handleItemClick(item, index) {
      this.$emit('click', { item, index })
    },
    // 图片加载成功
    handleImageLoad(e) {
      this.$emit('imageload', e)
    },
    // 图片加载失败
    handleImageError(e) {
      this.$emit('imageerror', e)
    },
    // 指示器点击
    handleIndicatorClick(index) {
      this.currentIndex = index
      this.$emit('change', {
        current: index,
        source: 'touch',
        item: this.list[index]
      })
    },
    // 上一张
    handlePrev() {
      const prevIndex = this.currentIndex > 0 ? this.currentIndex - 1 : this.list.length - 1
      this.handleIndicatorClick(prevIndex)
    },
    // 下一张
    handleNext() {
      const nextIndex = this.currentIndex < this.list.length - 1 ? this.currentIndex + 1 : 0
      this.handleIndicatorClick(nextIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  position: relative;
  width: 100%;
  height: v-bind(height);
  overflow: hidden;
  border-radius: v-bind(borderRadius);
  
  &.swiper-vertical {
    .custom-indicators {
      flex-direction: column;
      
      &.indicators-left {
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      
      &.indicators-right {
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.swiper {
  width: 100%;
  height: 100%;
  
  &.swiper-custom {
    .wx-swiper-dots {
      display: none !important;
    }
  }
}

.swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-item-default {
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
  display: block;
}

.swiper-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 40rpx 32rpx 32rpx;
  color: #fff;
}

.swiper-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.swiper-desc {
  font-size: 24rpx;
  opacity: 0.9;
  line-height: 1.4;
}

.swiper-item-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  
  .text-content {
    font-size: 28rpx;
    color: #333;
    text-align: center;
    padding: 32rpx;
  }
}

.custom-indicators {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  z-index: 10;
  
  &.indicators-top {
    top: 20rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  
  &.indicators-bottom {
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  
  &.indicators-left {
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
  }
  
  &.indicators-right {
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
  }
}

.indicator-item {
  padding: 8rpx;
  cursor: pointer;
  
  .indicator-dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
  }
  
  &.active .indicator-dot {
    background-color: #fff;
    transform: scale(1.2);
  }
}

.swiper-arrows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  &.arrow-left {
    left: 20rpx;
  }
  
  &.arrow-right {
    right: 20rpx;
  }
}

.arrow-icon {
  font-size: 48rpx;
  color: #fff;
  font-weight: bold;
  line-height: 1;
}
</style>