<template>
  <div class="indexRoll1Box" @mouseover.stop.prevent="handleMouseMove" @mouseleave.stop.prevent="handleMouseLeave"
  :class="[Current=='left'?'activeL':Current=='right'?'activeR':'']"
  @click.stop="carousel(Current)">
    <div class="relative gap-1 overflow-hidden"
    :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}">
      <div class="homeContainer">
        <div class="indexRoll1Container ContainerW1280">
          <div class=""
          style="transform: translate(0px, 0px); opacity: 1;">
            <div class="text-center relative">
              <p class="indexRoll1Hst font-serifEn text-secondary absolute">
                <span class="inline-block">{{plugData.SubTitle}}</span>
              </p>
              <div class="indexRoll1Htitle font-serifEn">
                <span class="inline-block tracking-2">{{plugData.Title}}</span>
              </div>
            </div>
            <div class="indexRoll1Hd">
              {{plugData.Describe}}
            </div>
          </div>
        </div>

        <div id="swipercom" class="swipercom"
        :class="[windowWidth>768?'active':'']">
          <swiper :options="swiperOption"
            ref="mySwiper"
            class="swiper" @slideChange="onSlideChange"
            @slideChangeTransitionEnd="slideChangeTransitionEnd">
            <template v-for="(item, index) in plugData.NavList">
              <swiper-slide :key="index" :index="index"
              class="">
              <div class="relative" :style="{'background':`url(${item.FileUrl})no-repeat`,'background-size':'cover'}"
              style="border-radius:10px;" @click.stop="OpenUrl(item.LinkUrl,index)" >
                <template v-if="item.FileType==1">
                    <q-img :src="item.FileUrl" no-default-spinner alt="image" :ratio="16/9" fill="cover"
                    @click.stop="OpenUrl(item.LinkUrl,index)" class="relative">
                      <template v-slot:error>
                        <img class="absolute inSliMLogo" v-if="plugData.MLogo" :src="plugData.MLogo"
                        style="width: 35px;background: rgba(25,25,25,0);"/>
                      </template>
                    </q-img>
                </template>
                <q-img v-if="item.FileType==2" :ratio="16/9" class="carousel1-rightV"
                @click.stop="OpenUrl(item.LinkUrl,index)">
                  <template v-slot:error>
                    <img class="absolute inSliMLogo" v-if="plugData.MLogo" :src="plugData.MLogo"
                    style="width: 35px;background: rgba(25,25,25,0);"/>
                  </template>
                <!-- autoplay -->
                  <video :src="item.FileUrl" muted
                  :ref="`videoPlayerRoll1${index}`"
                  @timeupdate="(event)=>handleTimeUpdate(event,`videoPlayerRoll1${index}`,index)"
                  @ended="(event)=>handleEnded(event,`videoPlayerRoll1${index}`,index)"></video>
                </q-img>
                <div class="swipercomSubEnLen absolute bg-white row items-center justify-center">
                  <div class="swipercomSubEnNum row" v-if="windowWidth>=992">
                    <span class="swipercomSubEnN relative block font-serifEn">{{index>9?index+1:'0'+(index+1)}}</span>
                    <div class="relative" style="top: -1px;"></div>
                    <span class="swipercomSubEnT relative block font-serifEn text-right">{{plugData.NavList.length>9?plugData.NavList.length:'0'+plugData.NavList.length}}</span>
                  </div>
                  <template v-else>
                    <i class="swipercomSubEnR iconfont iconpreviewright text-secondary cursor-pointer"  @click.stop="OpenNewUrl(item.LinkUrl)"></i>
                  </template>
                </div>
              </div>

                <div class="swipercomTitle"
                :class="[windowWidth<1280?'column':'row items-center no-wrap']">
                  <div class="swipercomTitleL row">
                    <div class="font-serifEn">{{ item.SubName }}</div>
                  </div>
                  <div v-if="windowWidth>=768" class="swipercomTitleA">
                    <q-separator vertical inset class="q-mx-lg q-py-lg" />
                  </div>
                  <div class="swipercomTitleR text-left font-serifEn col">
                    <span v-html="item.SubDescribe"></span>
                  </div>
                </div>
                <div class="swipercomSubEn absolute font-serifEn"
                :class="[windowWidth>760?'writing-modes-vertical':'',]">
                  {{item.SubEnName}}
                </div>

              </swiper-slide>
            </template>

            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
        </div>

        <div v-if="windowWidth<768"
        class="col inSliSubDescribeToggle row justify-center items-center">
          <div>
            &nbsp;
          </div>
        </div>

      </div>

    </div>

    <!-- <mouse v-if="windowWidth>=992&&isRight" :X="X" :Y="Y" :isRight="isRight" :Current="Current"></mouse> -->
  </div>
</template>
<script>
  import { swiper, swiperSlide } from "vue-awesome-swiper";
  import "swiper/dist/css/swiper.css";
  import mouse from "./mouse";
  export default {
    components: {
      swiper,
      swiperSlide,
      mouse },
    props: ['plugData','windowWidth','top','RollingHeight'],
    data() {
      return {
        X: 0,
        Y: 0,
        Current: 'left',
        slide: 1,
        FileUrlList: [],
        isRight: false,
        swiperOption:{
          on:{
            click:(event)=>{
              if (event.target.getAttribute("data-v")) {
                let obj = JSON.parse(event.target.getAttribute("data-v"));
              }
            },
          },
          pagination: {
            // el: ".swiper-pagination",
            // clickable: true
            //区分不同Swiper的组件
          },
          //显示分页
          loop: true,
          //loopFillGroupWithBlank: true,
          spaceBetween: 50,
          initialSlide: 1,
          centeredSlides: true,
          loopedSlides: 6,//开启循环
          slidesPerView: 1.5,//设置平滑
          slidesPerGroup: 1,
          //设置能够同时显示的数量（可设置 auto）
          speed: 1000,
          autoplay: {
            delay: 60000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          // 开启自动轮播后，设置自动轮播的延迟时间
          loopAdditionalSlides: 1000,
          parallax: true,
          breakpoints: {
            1440: {
              slidesPerView: 1.5,
              spaceBetween: 50
            },
            992: {
              slidesPerView: 1,
              spaceBetween: 20,
              pagination:{
                el: ".swiper-pagination",
                clickable: true
              }
            },
            768: {
              slidesPerView: 1,
              spaceBetween: 10,
              pagination:{
                el: ".swiper-pagination",
                clickable: true
              }
            },
          },
        },
        swiper: null,
        swiper2: null,
        activeIndex: 0,
        realIndex: 1,
      }
    },
    watch: {
      windowWidth: {
        handler(val, oldval) {

        }
      },
      realIndex:{
        handler(val, oldval) {
          setTimeout(()=>{
            this.playVideo(`videoPlayerRoll1${val}`)
          },500)
        },
        immediate: false
      }
    },

    created() {
      let arrList = function(list){
        list.forEach(x=>{
          x.currentTime = 0
        })
      }
      arrList(this.plugData.NavList)
      this.plugData.NavList.forEach(x=>{
        if(x.FileUrl){
          this.FileUrlList.push(x)
        }
      })
    },
    mounted() {
      setTimeout(() => {
        this.swiper = this.$refs.mySwiper.swiper
        let swiperInstance = this.$refs.mySwiper.swiper
        swiperInstance.loopedSlides = this.FileUrlList.length
        swiperInstance.update()
        this.playVideo(`videoPlayerRoll1${this.realIndex}`)
      }, 500);
    },
    methods: {
      // 监听视频播放进度的回调
      handleTimeUpdate(event,formName,index) {
        const audio = event.target;
        if (!audio.duration) return;
        let video = this.$refs[formName]
        if(video&&video[0]&&!video[0].paused){
          this.FileUrlList[index].currentTime = audio.currentTime
        }
      },

      // 视频播放结束调用的回调
      handleEnded(event,formName,index) {
        if(this.FileUrlList[index].currentTime) this.FileUrlList[index].currentTime = 0
      },
      playVideo(formName){
        for(let i=0;i<this.FileUrlList.length;i++){
          if(this.FileUrlList[i].FileType==2){
            let video = this.$refs[`videoPlayerRoll1${i}`]
            if(video&&video[0]&&!video[0].paused){
              video[0].pause()
            }
          }
        }
        let i = this.realIndex
        if(this.FileUrlList[i].FileType==2){
          let video = this.$refs[formName]
          if(video&&video[0]){
            if(video[0].paused) {
              if(this.FileUrlList[i].currentTime){
                video[0].currentTime = this.FileUrlList[i].currentTime
              }
              video[0].play()
            }else {
              video[0].pause()
            }
          }
        }
      },
      OpenUrl(URL,index) {
        if(index!=this.slide) return this.carousel(this.Current)
        this.OpenNewUrl(URL)
      },
      slideChangeTransitionEnd(){
        this.slide = this.$refs.mySwiper.swiper.realIndex
      },
      onSlideChange(){
        // 获取当前索引
        const swiper = this.$refs.mySwiper.swiper
        const activeIndex = this.$refs.mySwiper.swiper.activeIndex;
        this.slide = activeIndex
        this.realIndex = swiper.realIndex
        setTimeout(()=>{
          this.playVideo(`videoPlayerRoll1${swiper.realIndex+1}`)
        },500)
      },
      carousel(text){
        if(this.windowWidth<768) return
        if(text=='left'){
          this.swiper.slidePrev();
        }else if(text=='right'){
          this.swiper.slideNext()

        }
      },
      handleMouseMove(el) {
        if(this.windowWidth<768) return this.Current = null
        if(!this.isRight){
          this.setRight()
        }
        let x = el.x+(document.documentElement.scrollLeft || document.body.scrollLeft)
        let y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)

        let width = this.windowWidth/2
        if(el.x<width){
          this.Current = 'left'
        }else if(el.x>width) {
          this.Current = 'right'
        }
        // this.X = el.x
        // this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
      },
      setRight(){
        this.isRight = true
      },
      handleMouseLeave(e){
        this.Current = null
        return
        this.isRight = false
      }
  }
}
</script>
<style lang="scss" scoped>
  .activeL{
    cursor: url('../../assets/svg/left.svg')35 35,auto;
  }
  .activeR{
    cursor: url('../../assets/svg/right.svg')35 35,auto;
  }
  .carousel1-rightV{
    width: 100%;
    height: 100%;
    background-color: $primary;
  }
  .carousel1-rightV video{
    width: 100%;
    height: 100%;
  }
</style>
<style lang="scss" >
.indexRoll1Box{
  overflow: hidden;
}

.indexRoll1Hst{
  font-size: 1.25rem;
  left: 0;
  right: 0;
  top: -25px;
  font-weight: 100;
}
.indexRoll1Htitle{
  font-size: 2.4rem;
  color: rgb(17,17,17);
}
.indexRoll1Hd{
  margin: auto;
  line-height: 2.18rem;
  letter-spacing: .29rem;
  font-size: 1.1rem;
  color: rgb(85,85,85);
  padding: 40px 0;
}
.swipercomTitleL{
  color: rgb(5,23,50);
  max-width: 226px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  .swipercomTitleR{
    font-size: 16px;
    padding-right: 20px;
    overflow: hidden;
    letter-spacing: 4px;
    line-height: 30px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
.sliderRight{
  z-index: 1;
  backdrop-filter: drop-shadow(2px 2px 2px blue);
  opacity: 0;
  margin: -2rem 0 0 -2rem;
}
.sliderRight.active{
  opacity: 1;
}
.sliderRightC{
  width: 4rem;
  height: 4rem;
}
.sliderRightC.active img {
  transform: rotate(-180deg);
}
.swipercomSubEnLen{
    width: auto;
    padding: 12px 20px 12px 14px;
    height: 2rem;
    right: -2px;
    bottom: 0;
    border-top-left-radius: 10px;
    z-index: 1;
  }
.swipercom {
  margin-top: 60px;
}
.swipercom .swiper-container {
    width: 100%;
    border-radius: 5px;
  }
.swiper-slide {
    text-align: center;
    position: relative;

  }
.swiper-slide .q-img {
  border-radius: 10px;
  border:0 !important
}
  .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom: -60px;
  }
  .swiper-pagination-bullet-active{
    background: $secondary;
  }
  ::v-deep .swiper-pagination-bullet {
    width: 25px;
    height: 3px;
    border-radius: 5px;
  }
  .swiper-container{
    overflow: unset;
  }
  .swipercom .swiper-slide{
    /* transition: all 5s; */
    opacity: .3;
  }
  .swipercom .swiper-slide-active{
    opacity: 1;
    cursor: pointer !important;
  }
  .swipercom.active .swiper-slide-next{
    top: -5rem;
  }
.swipercomSubEn{
    color: $secondary;
    max-height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.swipercomSubEnLen::before{
  background: url(../../assets/img/home/radius-white.svg) 50%/cover no-repeat;
  content: "";
  height: 30px;
  position: absolute;
  transform: rotate(180deg);
  width: 30px;
  right: 2px;
  top: -30px;
}
.swipercomSubEnLen::after{
  background: url(../../assets/img/home/radius-white.svg) 50%/cover no-repeat;
  content: "";
  height: 30px;
  position: absolute;
  transform: rotate(180deg);
  width: 30px;
  bottom: 0;
  left: -28px;
}
.swipercomSubEnLen span{
  line-height: 1.2rem;
  font-size: 1.2rem;
  font-family: Cormorant Garamond,serif;
  color: $secondary;
}
.swipercomSubEnNum div{
  width: 1px;
  height: 40px;
  left: 4px;
  top: 9px;
  transform: rotate(45deg);
  background-color: $secondary;
  opacity: .5;
}
.swipercomSubEnN{
  top: -4px;
}
.swipercomSubEnT{
  bottom: -15px;
  right: -10px;
  opacity: .5;
}

.inSliMLogo{
  bottom: 10px;
  right: 10;
  background: none;
}
.swipercomSubEnR{
  font-size: 25px;
}

</style>
