<template>
  <div class="video-play">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- 幻灯内容 -->
      <swiper-slide
        v-for="(item, index) in videoList"
        :key="index"
      >
        <div class="item-wrap">
          {{item}}
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import {
  searchVideoList,
  addFollow,
  cancelLike,
  addLike,
  addComment,
  getCommentList,
  getVideoById,
  getMyLikeList,
  getDoctorShortVideo
} from "../../api/ShortVideo/ShortVideo";

export default {
  name: "videoPlay",
  data() {
    return {
      videoList: [5, 6, 7, 8, 9, 10],
      page: 0,
      flag: true,
      preFlag: true,
      swiperOption: {
        observer: true,
        initialSlide: 2,    // 设定初始化时slide的索引
        direction: "vertical",
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1,
        mousewheel: true,
        preventClicksPropagation: true,
        mousewheelControl: true,
        height: window.innerHeight, // 高度设置，占满设备高度
        resistanceRatio: 0,
        observeParents: true,     // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
        on: {
          tap: () => {
            this.playAction(this.page);
          },

          // 下滑结束
          slideNextTransitionStart: () => {
            this.$nextTick(_ => {
              this.page += 1;
              this.nextVideo(this.page);
            })
          },

          // 上滑结束
          slidePrevTransitionEnd: () => {
            this.$nextTick(_ => {
              if (this.page > 0) {
                this.page -= 1;
                this.preVideo(this.page)
              }
            })
          },

          // 滑块结束
          slideChangeTransitionEnd: () => {
            this.$nextTick(_ => {
              this.handleSlideChange(this.page)
            })
          }
        }
      }
    };
  },
  components: {
    Swiper,
    SwiperSlide
  },
  mounted() {
    this.page = this.swiperOption.initialSlide===0?this.swiperOptions.initialSlide:this.swiperOption.initialSlide-1;
    // console.log("bingo: ", this.$refs.mySwiper.$swiper.slideTo(4));
  },
  methods: {
    handleSlideChange(currentIndex) {
    },

    nextVideo(index) {
      console.log("下滑成功,当前索引: ", index);
      if(index === this.videoList.length-1 && this.flag) {
        this.videoList = [...this.videoList, ...[11,12,13,14]];
        this.flag = false;
      }
    },

    preVideo(index) {
      console.log("上滑成功,当前索引: ", index);
      if(index === 0 && this.preFlag) {
        this.videoList = [...[0,1,2,3,4], ...this.videoList];    // 加5个数据
        this.preFlag = false;
        this.$nextTick(_=>{
          this.swiperOption.initialSlide = 4;
          this.page = this.swiperOption.initialSlide;
        })
        this.$refs.mySwiper.$swiper.slideTo(4,0,false);
        console.log(this.videoList);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.item-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  width: 100%;
  height: 100%;
}
</style>
