<template>
  <view class="xd-swiper-wrap" :style="{width: width}">
    <swiper
      v-if="list.length > 0"
      class="swiper xd-swiper-content"
      :style="{width: width, height: height}"
      :indicator-dots="indicatorDots && list.length > 1"
      :autoplay="interval === 0 ? false: true"
      :interval="interval"
      :duration="duration"
      :current="current"
      circular
      @change="handleChange"
      @animationfinish="handleAnimationFinish"
    >
      <swiper-item v-for="(item,index) in list" :key="index" @click.stop="handleClick(item,index)">
        <slot :item="item" :index="index">
         <view class="swiper-item uni-bg-red">{{item}}</view>
        </slot>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>


  /***
   * @example https://uniapp.dcloud.io/component/swiper
   */
  export default {
    name: "XdSwiper",
    props:{
      list: {
        type: Array,
        required: false,
        default(){
          return [];
        },
      },
      width: {
        type: String,
        default: '750rpx',
      },
      height: {
        type: String,
        default: '100rpx',
      },

      current: {
        type: Number,
        default: 0,
      },

      /**
       * @default 是否显示指示面版
       * @type boolean
       */
      indicatorDots: {
        type: Boolean,
        default: true,
      },

      /**
       * @description 自动轮播周期时间 0=》 不自动轮播
       * @type number
       */
      interval: {
        type: Number,
        default: 10000,
      },

      /**
       * @description 动画执行时长
       * @type number
       */
      duration: {
        type: Number,
        duration: 500,
      }

    },

    data(){
      return {
        background: ['color1', 'color2', 'color3'],
      }
    },
    methods: {
      handleAnimationFinish(item){
        this.$emit('animationfinish', item);
      },
      handleChange(e){
        this.$emit('change', e);
      },
      handleClick(item,index){
        this.$emit('onClickItem', item, index);
      },
    }
  }
</script>

<style scoped lang="less">

  .xd-swiper-wrap {
    /* #ifdef H5 */
    /deep/ uni-image {
      width: 100%;
      height: 100%;
    }
    /* #endif */

    /* #ifdef MP-WEIXIN */
    /deep/ swiper-item {
      image {
        width: 100%;
        height: 100%;
      }
    }
    /* #endif */

    /deep/ .uni-swiper-slides {
      width: 100%;
      height: 100%;
    }

  }

</style>
