<template>
  <div class="demoSliderContainer" style="height: 100%;width: 100%;" @touchstart="touchstart($event)" @touchend="touchend($event)">
    <ul class="slide-images demoSlider" :class="type">
      <li class="slide-image" v-for="(item,index) in morePic" :key="index" :class="{current:currentSlideNum==index}">
        <img :src="typeof item=='string'?item:item.filePath" alt="">
      </li>
    </ul>
    <div class="options">
      <a v-if="!phone" class="prevSlide" @click="prevSlide" :style="`font-size:${phone?'0.14rem':'14px'}`">Prev</a>
      <ul class="point">
        <template v-for="(item,index) in morePic">
          <li :class="{currentAvtive:index==currentSlideNum}" :style="`height:${!phone?'8px':'0.1rem'};width:${!phone?'8px':'0.1rem'};margin:${!phone?'8px 4px':'0.1rem 0.05rem'}`"></li>
        </template>
      </ul>
      <a class="nextSlide" @click="nextSlide" :style="`font-size:${phone?'0.14rem':'14px'}`" v-if="!phone">Next</a>
    </div>
  </div>
</template>

<script>
    export default {
        name: "jaySwiper",
      props:{
        autoPlay:{
          default:4000
        },
        // height:{},
        // width:{},
        type:{
          default:'transition-opacity'
        },
        morePic:{}
      },
      data(){
          return{
            currentSlideNum:0,
            // transitions:['transition-opacity','transition-left','transition-top','transition-dezoom'],
            phone:/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
            time:null,
            clineXS:0,
            clineXE:0,
          }
      },
      mounted(){
          if(this.autoPlay){
            this.time=setInterval(()=>{
              this.nextSlide();
            },this.autoPlay)
          }
      },
      methods:{
        touchstart(e){
          this.clineXS = e.changedTouches[0].clientX
        },
        touchend(e){
          this.clineXE = e.changedTouches[0].clientX
          if(this.clineXE-this.clineXS>50){
            this.prevSlide()
          }
          if(this.clineXE-this.clineXS<-50){
            this.nextSlide()
          }

        },
        goToSlide(slideNum){
          clearInterval(this.time)
          this.currentSlideNum = slideNum;
          if(this.autoPlay){
            this.time=setInterval(()=>{
              this.nextSlide();
            },this.autoPlay)
          }
        },
        nextSlide(){
          var nextSlideNum = this.currentSlideNum + 1;
          if(nextSlideNum >= this.morePic.length){
            nextSlideNum = 0;
          }
          this.goToSlide(nextSlideNum);
        },
        prevSlide(){
          var prevSlideNum = this.currentSlideNum - 1;
          if(prevSlideNum < 0){
            prevSlideNum = this.morePic.length - 1;
          }
          this.goToSlide(prevSlideNum);

        },
        checkout(index){
          this.goToSlide(index);
        }

      }
    }
</script>

<style scoped lang="scss">
  .point{
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    pointer-events: none;
  li{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: rgba(0,0,0,.2);
  }
  }
  .point li.currentAvtive{
    background: #fff;
  }
  .demoSliderContainer {
    background-color: #000;
    -webkit-box-shadow: 1px 1px 5px #000;
    -moz-box-shadow: 1px 1px 5px #000;
    box-shadow: 1px 1px 5px #000;
    overflow: hidden;
    position: relative;
  }

  ul.demoSlider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    *zoom: 1;
  }
img{
  width: 100%;
  height: 100%;
}
  .slide-images .slide-image {
    list-style: none;
    position: absolute;
    overflow: hidden;
  }
  .slide-image{
    width: 100%;
    height: 100%;
  }
  .slide-images .slide-image img {
    display: block;
    z-index: 2;
  }

  .slide-images .slide-image.current img {
    z-index: 12;
  }

  .demoSliderContainer .slide-pager {
    overflow: hidden;
    *zoom: 1;
  }

  .demoSliderContainer .slide-pager a {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
  }

  .demoSliderContainer .slide-pager a.current {
    display: inline-block;
    text-align: center;
    background-color: #91becc;
    border-radius: 5px 5px 5px 5px;
    color: black;
  }
  .demoSliderContainer .slide-pager a{
    margin: 0 .5%;
  }
  .demoSliderContainer .slide-pager a.current {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #91becc;
    border-radius: 5px 5px 5px 5px;
    color: black;
  }
  .options{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
  }
  .demoSliderContainer .options .prevSlide {
    float: left;
  }

  .demoSliderContainer .options .nextSlide {
    float: right;
  }

  .demoSliderContainer .options {
    padding: 5px 10px;
    text-align: center;
  }

  .demoSliderContainer .options a {
    color: #91BECC;
    font-family: Georgia,Serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
  }

  .demoSliderContainer .options a:hover {
    color: #D3E5EB;
  }

  .slide-images .slide-image,
  .slide-images .slide-image img {
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
  }

  .slide-images.transition-opacity .slide-image {
    opacity: 0;
    width: 100%;
  }

  .slide-images.transition-opacity .slide-image.current {
    opacity: 1;
    width: 100%;
  }

  .slide-images.transition-left .slide-image {
    left: 100%;
    opacity: 0;
  }

  .slide-images.transition-left .slide-image.current {
    left: 0;
    opacity: 1;
  }

  .slide-images.transition-right .slide-image {
    right: 100%;
    opacity: 0;
  }
  .slide-images.transition-right .slide-image.current {
    right: 0;
    opacity: 1;
  }


  .slide-images.transition-top .slide-image {
    opacity: 0;
    top: -100%;
  }
  .slide-images.transition-top .slide-image.current {
    opacity: 1;
    top: 0;
  }

  .slide-images.transition-bottom .slide-image {
    opacity: 0;
    bottom: -100%;
  }
  .slide-images.transition-bottom .slide-image.current {
    opacity: 1;
    bottom: 0;
  }

  .slide-images.transition-cornerzoom .slide-image {
    opacity: 0;
  }

  .slide-images.transition-cornerzoom .slide-image.current {
    opacity: 1;
  }

  .slide-images.transition-cornerzoom .slide-image img {
    width: 0;
  }

  .slide-images.transition-cornerzoom .slide-image.current img {
    width: 100%;
  }

  .slide-images.transition-zoom .slide-image {
    opacity: 0;
  }
  .slide-images.transition-zoom .slide-image.current {
    opacity: 1;
  }
  .slide-images.transition-zoom .slide-image img {
    left: -30%;
    position: relative;
    top: -20%;
    width: 150%;
  }
  .slide-images.transition-zoom .slide-image.current img {
    left: 0;
    top: 0;
    width: 100%;
  }

  .slide-images.transition-dezoom .slide-image {
    -moz-box-shadow: 2px 2px 8px black;
    -webkit-box-shadow: 2px 2px 8px black;
    box-shadow: 2px 2px 8px black;
    opacity: 0;
  }
  .slide-images.transition-dezoom .slide-image.current {
    opacity: 1;
  }
  .slide-images.transition-dezoom .slide-image img {
    left: 30%;
    position: relative;
    top: 20%;
    width: 0;
  }
  .slide-images.transition-dezoom .slide-image.current img {
    left: 0;
    top: 0;
    width: 100%;
  }

  .slide-images.transition-rotate .slide-image {
    opacity: 0;
  }
  .slide-images.transition-rotate .slide-image.current {
    opacity: 1;
  }
  .slide-images.transition-rotate .slide-image img {
    width: 100%;
    height: 100%;
    position: relative;
    left: -100%;
    top: -100%;

  }
  .slide-images.transition-rotate .slide-image.current img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -moz-transform: rotate(1440deg);
    -webkit-transform: rotate(1440deg);
    -o-transform: rotate(1440deg);
    transform: rotate(1440deg);
  }

</style>
