<template>
  <el-carousel trigger="click" :height="isMobile?'5.62667rem':'100vh'" ref="slideCarousel">
    <el-carousel-item v-for="item,index in list" :key="index">
      <img :src="item.image" class="swiper-img" @click="toUrl(item)">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
  import { hasMobile } from '@/utils/mobile.js'
export default {
  name: 'Swiper',
  props: ['list'],
  data() {
    return {
      isMobile:false,
    };
  },

  created() {
    this.isMobile = hasMobile()
  },

  mounted() {
    if(this.isMobile){
      this.slideBanner()
    }
  },

  methods: {
    toUrl(item){
      if(item.url) window.open(item.url)
    },
    slideBanner() {
    	  //选中的轮播图
    	  var box = document.querySelector('.el-carousel__container');
    	  var startPoint = 0;
    	  var stopPoint = 0;
    	  //重置坐标
    	  var resetPoint = function () {
    	    startPoint = 0;
    	    stopPoint = 0;
    	  }
    	  //手指按下
    	  box.addEventListener("touchstart", function (e) {
    	    //手指点击位置的X坐标
    	    startPoint = e.changedTouches[0].pageX;
    	  });
    	  //手指滑动
    	  box.addEventListener("touchmove", function (e) {
    	    //手指滑动后终点位置X的坐标
    	    stopPoint = e.changedTouches[0].pageX;
    	  });
    	  //当手指抬起的时候，判断图片滚动离左右的距离
    	  let that = this
    	  box.addEventListener("touchend", function (e) {
    	    console.log("1：" + startPoint);
    	    console.log("2：" + stopPoint);
    	    if (stopPoint == 0 || startPoint - stopPoint == 0) {
    	      resetPoint();
    	      return;
    	    }
    	    if (startPoint - stopPoint > 0) {
    	      resetPoint();
    	      that.$refs.slideCarousel.next();
    	      return;
    	    }
    	    if (startPoint - stopPoint < 0) {
    	      resetPoint();
    	      that.$refs.slideCarousel.prev();
    	      return;
    	    }
    	  });
    	},
  },
};
</script>

<style lang="scss" scoped>
.swiper-img {
  width: 100%;
  height: 100%;
}

:deep(.el-carousel__arrow) {
  width: 88px;
  height: 88px;
  font-size: 30px;
  background: rgba(0, 0, 0, 0.39);
}

:deep(.el-carousel__button){
  width: 50px;
  height: 6px;
  border-radius: 10px;
}
:deep(.el-carousel__indicator){
  padding-bottom: 40px !important;
}
</style>
