<!--  -->
<template>
    
    <div class="swiper">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <!-- <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div> -->
        <slot></slot>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
  
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  
      <!-- If we need scrollbar -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
 
  </template>
  
  <script>
  export default {
    // import引入的组件需要注入到对象中才能使用
    name: 'PSwiperCon',
    components: { },
    props: {
      onChange: {type: Function},
      showHelp:{type:Boolean, default: () => { return false }}
    },
    data() {
      // 这里存放数据
      return {
        swiper: null
      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.swiper = this.createSwiper()
      // console.log('!!!!!!!!!!!!!!!!!!!!!11',this.swiper,);
      if(this.$isShowHelp == true &&  this.showHelp==true){
        console.log(`
        组件名称：
            PSwiperCon
        使用方法：样式【swiper-slide】必填
            <p-SwiperCon :onChange="onSWChange"> 
              <div class="swiper-slide">插槽1</div> 
              <div class="swiper-slide">插槽2</div> 
              <div class="swiper-slide">插槽3</div> 
            </p-SwiperCon>
        props参数说明：
            props:{
              // 此参数可选  用于相应组件的变化事件  此事件的参数为 当前切换的索引值，索引从0开始  
              onChange: {type: Function},
            },
        `)
      }
    },
    destroyed(){
      // this.swiper &&  this.swiper.destroy(true, true)
      if(this.swiper){
        this.swiper.destroy(true, true)
      }
    },
    // 方法集合
    methods: {
      createSwiper() {
        const self = this
        return new Swiper('.swiper', {
          direction: 'horizontal',
          loop: false, // 循环模式选项
  
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination'
          },
  
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on:{
            slideChange: function(activeIndex){
              // alert('改变了，activeIndex为'+this.activeIndex);
              // console.log('slideChange==============>',activeIndex.activeIndex);
              self.onChange&& self.onChange(activeIndex.activeIndex)
            },
          },
  
          // 如果需要滚动条
          // scrollbar: {
          //   el: '.swiper-scrollbar'
          // }
        })
      },
      goTo(index) {
        if (this.swiper) {
          this.swiper.slideTo(index, 1000)
        } else {
          this.swiper = this.createSwiper()
          this.swiper.slideTo(index, 1000)
        }
      },
      updata() {
        // this.swiper&&this.swiper.updateSize()
        // this.swiper&&this.swiper.updateSlides()
     
        if (this.swiper) {
          this.swiper.update(true)
        } else {
          this.swiper = this.createSwiper()
          this.swiper.update(true)
        }
        // console.log('更新swiper')
      }
    }
  }
  </script>
  <style lang="less">
  .swiper {
    width: 100%;
    height: 100%;
    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  </style>
  