<template>
  <div class="">
    <div class="relative gap-1 overflow-hidden"
    :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}"
    :class="[windowWidth<768?'gap-M':'']">
      <div class="containerRoll2">
        <div class="indexRoll2Container ContainerW1280">
          <div class=""
          style="transform: translate(0px, 0px); opacity: 1;">
            <div class="text-center relative">
              <p class="indexRoll2Hst font-serifEn text-secondary absolute">
                <span class="inline-block">{{plugData.SubTitle}}</span>
              </p>
              <div class="indexRoll2Htitle font-serifEn">
                <span class="inline-block tracking-2">{{plugData.Title}}</span>
              </div>
            </div>
            <div class="indexRoll2Hd indexRoll2Hd2">
              {{plugData.Describe}}
            </div>
          </div>
        </div>

        <div id="swipercom2" class="swipercomR2"
        :class="[windowWidth>768?'active':'']">
          <swiper :options="swiperOption"
          ref="mySwiper2"
            class="swiper" @slideChange="onSlideChange">
            <swiper-slide :key="index" :index="index" style="width: 12.91vw;"
            class="cursor-pointer swiperR2W" v-for="(item, index) in plugData.NavList">
            <div class="relative">
              <div class="swipercomSubEnLenR2 absolute font-serifEn">
                <span class="writing-modes-vertical">{{item.SubEnName}}</span>
              </div>
            </div>
            <div class="relative swiperR2Hover">
              <template v-if="item.FileType==1">
                  <q-img :src="item.FileUrl" alt="image" :ratio="0.64" fill="cover"
                  @click.stop="OpenNewUrl(item.LinkUrl)">
                  <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>
              <div class="carousel1-rightV">
                <q-img v-show="item.FileType==2" :ratio="0.64">
                  <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 controls-->
                  <video :src="item.FileUrl" muted
                  :ref="`videoPlayerRoll2${index}`"
                  @timeupdate="(event)=>handleTimeUpdate(event,`videoPlayerSli${index}`,index)"
                  @ended="(event)=>handleEnded(event,`videoPlayerSli${index}`,index)"
                  @play="item.videoPlaying = true"
                  @pause="item.videoPlaying = false"></video>
                </q-img>
              </div>

              <div class="swipercomTvR2BjBox" @click.stop="item.FileType==2?playVideo(`videoPlayerRoll2${index}`):''">
                <div class="swipercomTvR2Bj absolute">&nbsp;</div>
                <div class="swipercomTvR2 absolute">
                  <div class="h100 column justify-end text-left">
                    <div class="swipercomTitleLR2 font-serifEn">
                      {{ item.SubName }}
                    </div>
                    <div class="swipercomDesR2 font-serifEn">
                      {{item.SubDescribe}}
                    </div>
                    <div class="q-py-lg">
                      <a class="swipercomMoR2 tracking-normal leading-normal rounded-5
                          font-serifEn transition-base cursor-pointer"
                          @click.stop="OpenNewUrl(item.LinkUrl)">
                            <span>了解更多</span> <i class="swipercomIconR2 relative q-pl-xs iconfont iconpreviewright arrow right q-mt-sm" ></i>
                        </a>
                    </div>
                  </div>
                </div>
              </div>


            </div>

            </swiper-slide>

            <div class="swiper-pagination"  slot="pagination"></div>
            <!-- <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
            <div class="swiper-button-next swiper-button-black" slot="button-next"></div> -->
          </swiper>
        </div>
        <div v-if="windowWidth<768"
        class="col inSliSubDescribeToggle row justify-center items-center">
          <div>
            &nbsp;
          </div>
        </div>

      </div>
    </div>

  </div>
</template>
<script>
  import { swiper, swiperSlide } from "vue-awesome-swiper";
  import "swiper/dist/css/swiper.css";
  export default {
    components: { swiper, swiperSlide },
    props: ['plugData','windowWidth','top','currentHeight'],
    data() {
      const scale = 1 / this.$q.platform.is.win?window.devicePixelRatio:1;
      return {
        slide: 1,
        FileUrlList: [],
        isRight: false,
        swiperOption:{
          slidesPerView: 4,
          spaceBetween: 50,
          breakpoints: {
            1950: {
              slidesPerView: 5.8/scale,
              spaceBetween: 40
            },
            1800: {
              slidesPerView: 4.5/scale,
              spaceBetween: 40
            },
            1700: {
              slidesPerView: 3/scale,
              spaceBetween: 40
            },
            1600: {
              slidesPerView: 3/scale,
              spaceBetween: 40
            },
            1500: {
              slidesPerView: 4/scale,
              spaceBetween: 30
            },
            1400: {
              slidesPerView: 4/scale,
              spaceBetween: 30
            },
            1300: {
              slidesPerView:3.7/scale,
              spaceBetween: 30
            },
            1200: {
              slidesPerView:3.15/scale,
              spaceBetween: 30
            },
            1100: {
              slidesPerView:2.7/scale,
              spaceBetween: 30
            },
            800: {
              slidesPerView:1.3/scale,
              spaceBetween: 30
            },
            640: {
              slidesPerView: 1,
              spaceBetween: 20
            },
          }
        },
        swiper: null,
        activeIndex: 0,
        realIndex: 0,
      }
    },
    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
          x.videoPlaying = false
          x.videoPlaying = false
        })
      }
      arrList(this.plugData.NavList)
      this.plugData.NavList.forEach(x=>{
        if(x.FileUrl){
          this.FileUrlList.push(x)
        }
      })
    },
    mounted() {
      setTimeout(() => {
        // this.swiper = this.$refs.mySwiper2.swiper;
        // if(this.windowWidth<=768) this.swiper.slidesPerView = 1
        // else this.swiper.slidesPerView = 1.5
        this.playVideo(`videoPlayerRoll2${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[`videoPlayerRoll2${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&&this.FileUrlList[i].videoPlaying==false) {
              if(this.FileUrlList[i].currentTime){
                video[0].currentTime = this.FileUrlList[i].currentTime
              }
              // console.log('继续播放')
              this.FileUrlList[i].videoPlaying = true
              video[0].play()
            }else {
              // console.log('暂停')
              this.FileUrlList[i].videoPlaying = false
              video[0].pause()
            }
          }
        }
      },
      onSlideChange(){
        // 获取当前索引
        const swiper = this.$refs.mySwiper2.swiper
        const activeIndex = this.$refs.mySwiper2.swiper.activeIndex;
        this.slide = activeIndex
        this.realIndex = swiper.realIndex
        // console.log('当前索引:', activeIndex);
        setTimeout(()=>{
          this.playVideo(`videoPlayerRoll2${swiper.realIndex+1}`)
        },500)
      },
      carousel(text){
        if(this.windowWidth<768) return
        if(text=='left'){
          this.swiper.slidePrev();
          // if(this.slide>1) this.slide--
          // else if(this.slide==1) this.slide = this.FileUrlList.length
        }else if(text=='right'){
          this.swiper.slideNext()
          // this.$refs.mySwiper.swiper.slideTo(this.activeIndex, 500, false)
          // if(this.slide<this.FileUrlList.length){
          //   this.slide++
          // }else if(this.slide==this.FileUrlList.length) this.slide = 1

        }
      },
      handleMouseMove(el) {
        if(this.windowWidth<768) return
        if(!this.isRight) this.isRight = true
        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)
      },
      handleMouseLeave(){
        this.isRight = false
      }
  }
}
</script>
<style lang="scss" scoped>
  .carousel1-rightV{
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 10px;
    background: $primary ;
  }
  .carousel1-rightV video{
    width: 100%;
    height: 100%;
  }
</style>
<style lang="scss">
.indexRoll2Box{
  overflow: hidden;
  padding-top: 80px;
}
.indexRoll2Hst{
  font-size: 1.25rem;
  left: 0;
  right: 0;
  top: -25px;
  font-weight: 100;
}
.indexRoll2Htitle{
  font-size: 2.4rem;
  color: rgb(17,17,17);
}
.indexRoll2Hd{
  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);
  }
.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;
  }
.swipercomR2 {
  margin-top: 60px;
}
.swipercomR2 .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;
  }
  .swiper-slide{

  }
  .swiper-slide-active{

  }
  .swipercomR2.active .swiper-slide-next{
    /* top: -5rem; */
  }
.swipercomSubEn{
    color: $secondary;
  }
.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: 10px;
  background: none;
}
.swipercomSubEnR{
  font-size: 25px;
}
.swipercomR2{

}
.swiperR2W{

}
.swipercomSubEnLenR2{
  font-size: 2rem;
  left: -1.5rem;
  top: -1rem;
  letter-spacing: .5rem;
  color: $secondary;
  z-index: 2;
}
.swipercomSubEnLenR2 span{
  max-height: 100%;
  overflow: hidden;
}
.swipercomTvR2Bj{
  background: linear-gradient(0deg,#000,transparent);
  z-index: 333;
  opacity: .7;
  border-radius: 10px;
  z-index: 1;
  transition: all .1s;
}
.swipercomTvR2{
  color: #fff;
  z-index: 2;
  padding: 0 20px 40px 20px;
  transition: all .1s;
}
.swipercomTitleLR2{
  font-size: 1.5rem;
  width: 100%;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 1; 
  overflow: hidden;
}
.swipercomDesR2{
  font-size: 1.1rem;
  padding: 15px 0;
  max-height: 109px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 3; 
  overflow: hidden;
}
.swipercomIconR2{
  top: 1px;
}
.swipercomMoR2{
  border: 1px solid #ffff;
  padding: 5px 20px 8px 20px;
  font-size: 1.1rem;
}
.swiperR2Hover{
  overflow: hidden;
}
.swiperR2Hover:hover .swipercomTvR2Bj{
  top: 0;
  bottom: 0;
  opacity: 1;
}
.swiperR2Hover:hover .swipercomTvR2{
  top: 0;
  bottom: 0;
  opacity: 1;
}
</style>
