<template>
  <div class="indexSliderBox animate__animated duration2" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave"
  :class="[Current=='left'?'activeL':Current=='right'?'activeR':'']"
  @click="carousel(Current)">
    <div class="relative gap-1 overflow-hidden"
    :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}"
    :class="[currentHeight+top>=top?'':'']">
      <div class="homeContainer indexSliderContainer" @click.stop="carousel(Current)"
        :class="[windowWidth<=768?'active':'']">
          <div
          :class="[windowWidth>=992?'row justify-between no-wrap':'column items-center',
          ]"
          >
            <div class="indexSlider-left h100 column items-center w3">
              <div class="indexSlider-leftTitle row justify-center q-mb-md q-mt-sm">
                <div class="insli-leftTitle font-serifEn writing-modes-vertical h3 text-gray-9">
                  <span class="inline-block leading-snug tracking-6">{{plugData.Title}}</span>
                </div>
                <p class="insli-leftText font-serifEn writing-modes-vertical h5 text-secondary">
                  <span>{{plugData.SubTitle}}</span>
                </p>
              </div>
              <div class="insli-leftDescr font-serifEn text-gray-700  text-center "
              :class="[windowWidth>=992?'q-py-lg':'full-width']">
                {{plugData.Describe}}
              </div>
            </div>

            <div v-if="FileUrlList&&FileUrlList.length>0" class="indexSlider-right h100" @click.stop=""
              >
              <q-carousel
                v-model="slide"
                infinite
                :autoplay="autoplay"

                style="height: 100%;"
                class="indexSliderImgBox"
                :swipeable="windowWidth>=992?false:true"
              >
              <template v-for="(item,index) in FileUrlList">
                <q-carousel-slide :key="index" :name="index+1" class="indexSliderImgC">
                  <div class="col relative h100"
                  :class="[slide==index+1?'':'']">
                    <q-img class="cursor-pointer relative" :ratio="16/9" v-if="item.FileType==1" :src="item.FileUrl" 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>
                    <q-img v-show="item.FileType==2" :ratio="16/9" class="cursor-pointer carousel1-rightV">
                      <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>
                      <!-- controls -->
                      <video :src="item.FileUrl" muted
                      :ref="`videoPlayerSli${index+1}`"
                      @timeupdate="(event)=>handleTimeUpdate(event,`videoPlayerSli${index+1}`,index)"
                      @ended="(event)=>handleEnded(event,`videoPlayerSli${index+1}`,index)"
                      ></video>
                    </q-img>
                    <!-- <div class="absolute inSliMLogo">
                      <q-img v-if="plugData.MLogo" :src="plugData.MLogo"
                      style="width: 2rem;height: 2rem;background: none;"/>
                    </div> -->
                    <div class="inSliSubNameBox absolute cursor-pointer"
                    :style="{'background-color':windowWidth>=992?plugData.BgColor:''}"
                    :class="[windowWidth>=992?'h-66':'',]">
                      <p class="font-serifEn text-primary"
                      :class="[windowWidth>=992?'writing-modes-vertical':'min-w-45',$q.platform.is.desktop?'desktop':'moblie']"
                      :style="{'background-color':windowWidth>=992?'':plugData.BgColor}"><span class="opacity-80 textOverEllipsis">{{item.SubName}}</span></p>
                      <div class="inSliSubNameList isDisplay relative" v-if="windowWidth>=992">
                        <span class="absolute inSliSubNameListL block">{{index>9?index+1:'0'+(index+1)}}</span>
                        <div class="absolute"></div>
                        <span class="absolute inSliSubNameListR block">{{FileUrlList.length>9?FileUrlList.length:'0'+FileUrlList.length}}</span>
                      </div>
                    </div>
                    <div class="inSliSubEnNameBox absolute cursor-pointer">
                      <p class="text-secondary font-serifEn">{{item.SubEnName}}</p>
                    </div>
                    <div class="inSliSubDescribeBox no-wrap justify-between cursor-default"
                    :style="{'background-color':plugData.BgColor}"
                    :class="[windowWidth>=992?'absolute row':' column']">
                      <p class="text-center font-serifEn
                      row text-color85 opacity-80"
                      :class="[windowWidth>=992?'writing-modes-vertical text-left justify-end items-end':'text-center',$q.platform.is.desktop?'desktop':'moblie']"
                      >
                        <!-- {{item.SubDescribe}} -->
                        <!-- <span v-if="windowWidth>=992" v-html="item.SubDescribe"></span> -->
                        <span class="textOverEllipsis"
                        :style="{width: windowWidth>=992?'110px':'100%'}">
                          {{item.SubDescribe2}}
                        </span>
                      </p>
                      <div class="inSliSubDescribeGo row"
                      :class="[windowWidth>=992?'justify-end items-end':'row justify-center items-center w100']">
                        <a class="border border-stone tracking-normal leading-normal border-solid rounded-5
                        font-serifEn transition-base cursor-pointer"
                        :class="[windowWidth>=992?'writing-modes-vertical':'']"
                        @click.stop="OpenNewUrl(item.LinkUrl)">
                          立即出发
                          <i class="iconfont iconpreviewright arrow right q-mt-sm" ></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </q-carousel-slide>
              </template>
              </q-carousel>
              <div v-if="windowWidth<992"
              class="inSliSubDescribeToggle row justify-center">
                <div v-for="(item,index) in FileUrlList"
                class="inSliBox row justify-center items-center"
                :class="[slide==index+1?'active':'']"
                @click.stop="carouselIndex(index)">
                  <div></div>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <!-- <mouse v-if="windowWidth>=768" :X="X" :Y="Y" :isRight="isRight" :Current="Current"></mouse> -->
  </div>

</template>
<script>
import mouse from "./mouse";
export default {
  components: { mouse },
  props: ['plugData','windowWidth','top','currentHeight'],
  data() {
    return {
      X: 0,
      Y: 0,
      Current: null,
      slide: 1,
      autoplay: 50000000,
      FileUrlList: [],
      isRight: false,
      cursorUrlL: require('../../assets/svg/left.svg'),
      cursorUrlR: require('../../assets/svg/right.svg'),
      videoList: [], // 视频列表数据
      videoUpdateTime: [], // 记录video播放的时长
    }
  },
  watch: {
    windowWidth: {
      handler(val, oldval) {

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

  created() {

  },
  mounted() {
    let arrList = function(list){
      list.forEach(x=>{
        x.SubDescribe2 = ''
        x.currentTime = 0
      })
    }
    arrList(this.plugData.NavList)
    let relClass = /s*\s*?=\s*?([‘"])[\s\S]*?\1/g;
    this.plugData.NavList.forEach(x=>{
      if(x.FileUrl){
        x.SubDescribe2 = x.SubDescribe.replace(/<\/br>/g, '')
        this.FileUrlList.push(x)
      }
    })
    setTimeout(()=>{
      if(this.FileUrlList[this.slide-1].FileType==2){
        this.playVideo(`videoPlayerSli${this.slide}`)
      }
    },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){
      let i = this.slide-1
      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()
          }
        }
      }
    },
    carouselIndex(index){
      this.slide = index+1
    },
    carousel(text){
      if(this.windowWidth<768) return
      if(text=='left'){
        if(this.slide>1) this.slide--
        else if(this.slide==1) this.slide = this.FileUrlList.length
      }else if(text=='right'){
        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 this.Current = null
      if(!this.isRight) this.isRight = true
      let width = this.windowWidth/2
      if(el.x<width){
        this.Current = 'left'
        // this.X = el.x+50
      }else if(el.x>width) {
        this.Current = 'right'
        // this.X = el.x-50
      }

      // this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
    },
    handleMouseLeave(){
      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">
  .indexSlider-right {
    .q-carousel{
      background-color: rgba(23,23,23,0) !important;
    }
    .q-panel-parent{
      overflow: unset !important;
      .scroll{
        overflow: unset !important;
      }
    }
  }

  .indexSliderBox{
    height: 100%;
  }
  .indexSliderBox.q-py{
    padding: 80px 0 40px 0;
  }
  .indexSliderContainer{
    position: relative;
    height: 100%;
  }
  .indexSlider-left{
    opacity: 0.9;
  }
  .indexSliderContainer.active .indexSlider-left{
    width: 100%;
    padding: 0 0 40px 0;
  }
  .indexSlider-leftTitle{
    min-width: 50px;
    opacity: .5;
  }
  .insli-leftTitle{
    font-size: 2rem;
  }
  .insli-leftText{
    font-size: 1.2rem;
  }
  .insli-leftDescr{
    font-size: 1rem;
    line-height: 35px;
    opacity: .8;
    max-height: 193px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .indexSlider-right{
    width: 75%;
  }
  .indexSliderContainer.active .indexSlider-right{
    width: 100%;
  }
  .indexSliderImgBox{
    border-radius: 10px;
    /* 10 */
    z-index: 2;
  }

  .indexSliderImgBox .q-img,.indexSliderImgBox .q-video{
    /* height:32rem; */
    height: 100%;
    border-radius: 10px;
    background-color: $primary;
  }
  /* .indexSliderContainer.active .indexSliderImgBox .q-img,
  .indexSliderContainer.active .indexSliderImgBox .q-video{
    height: 11.8rem;
  } */

  .indexSliderImgC{
    padding: 0;
  }

  .inSliSubNameBox{
    /* width: 45px; */
    border-bottom-right-radius: 10px;
    top: 0;
    left: 0;
  }
  .indexSliderContainer.active .inSliSubNameBox{
    width: auto;
    height: 33px;
    overflow: hidden;
    top: 0;
    left: 0;
  }
  .inSliSubNameBox::before{
    background: url(../../assets/img/home/radius.svg) 50%/cover no-repeat;
    content: "";
    height: 30px;
    position: absolute;
    width: 30px;
    right: -30px;
  }
  .indexSliderContainer.active .inSliSubNameBox::before{
    background: url(../../assets/img/home/radius.svg) 50%/cover no-repeat;
    content: "";
    height: 30px;
    position: absolute;
    width: 30px;
    left: unset;
    top: 0;
    right: -30px !important;
    opacity: 0;
  }
  .inSliSubNameBox::after{
    background: url(../../assets/img/home/radius.svg) 50%/cover no-repeat;
    content: "";
    height: 30px;
    position: absolute;
    width: 30px;
    left: 0;
    bottom: -30px;
  }
  .inSliSubNameBox p{
    color: rgb(32,25,50);
  }
  .inSliSubNameBox p.desktop{
    max-width: 50px;
    height: 78%;
    overflow: hidden;
    word-spacing: nowrap;
    text-overflow: ellipsis;
  }
  .inSliSubNameBox p.moblie{
    max-width: 100%;
    overflow: hidden;
    word-spacing: nowrap;
    text-overflow: ellipsis;
  }
  .indexSliderContainer.active .inSliSubNameBox p{
    font-size: 1.3rem;
    letter-spacing: 0;
    border-bottom-right-radius: 10px;
    margin-left: 0;
    height: 3rem;
    line-height: 1.5rem;
    padding-right: 1rem;
  }
  .inSliSubEnNameBox{
    top: -2.5rem;
    right: 0;
    z-index: 2;
    overflow: hidden;
  }
  .indexSliderContainer.active .inSliSubEnNameBox{
    top: 10.7rem;
  }
  .inSliSubEnNameBox p{
    font-size: 2.7rem;
  }
  .indexSliderContainer.active .inSliSubEnNameBox p{
     font-size: 2.1rem;
  }
  .inSliSubDescribeBox{
    width: 170px;
    height: 66%;
    right: 0;
    bottom: 0;
    border-top-left-radius: 10px;
  }
  .indexSliderContainer.active .inSliSubDescribeBox{
    width: 100%;
    padding-top: 30px;
  }
  .inSliSubDescribeBox::before{
    background: url(../../assets/img/home/radius.svg) 50%/cover no-repeat;
    content: "";
    height: 30px;
    position: absolute;
    transform: rotate(180deg);
    width: 30px;
    right: 0;
    top: -30px;
  }
  .indexSliderContainer.active .inSliSubDescribeBox::before{
    opacity: 0;
  }
  .inSliSubDescribeBox::after{
    background: url(../../assets/img/home/radius.svg) 50%/cover no-repeat;
    content: "";
    height: 30px;
    position: absolute;
    transform: rotate(180deg);
    width: 30px;
    bottom: 0;
    left: -30px;
  }
  .inSliSubDescribeBox p{
    margin-left: 20px;
    font-size: 1.1rem;
    opacity: .9;
    line-height: 2.18rem;
  }
  .inSliSubDescribeBox p.desktop{
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .inSliSubDescribeBox p.moblie{
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }
  .indexSliderContainer.active .inSliSubDescribeBox p.moblie{
    height: 11rem;
  }
  .indexSliderContainer.active .inSliSubDescribeBox p{
    width: 100%;
    margin-left: 0;
    padding: 0 3rem;
    min-height: 7rem;
  }
  .indexSliderContainer.active .inSliSubDescribeGo{
    padding-top: 30px;
  }
  .inSliSubDescribeGo a{
    font-size: 1rem;
    padding: 12px 5px;
    opacity: 0.9;
    color: $secondary;
  }
  .indexSliderContainer.active .inSliSubDescribeGo a{
    padding: 5px 12px;
    opacity: .9;
  }
  .inSliSubDescribeGo a:hover{
    color: #fff;
    background: $secondary;
  }

  .inSliSubNameList{
    width: 50px;
    height: 50px;
  }
  .inSliSubNameList div{
    width: 1px;
    height: 40px;
    left: 4px;
    top: 9px;
    transform: rotate(45deg);
    background-color: $secondary;
    opacity: .5;
  }
  .inSliSubNameList span{
    line-height: 1.2rem;
    font-size: 1.2rem;
    font-family: Cormorant Garamond,serif;
    color: $secondary;
  }
  .inSliSubNameListL{
    left: -10px;
  }
  .inSliSubNameListR{
    bottom: 0;
    left: 10px;
    opacity: .5;
  }

  .inSliMLogo{
    bottom: 10px;
    right: 10px;
    background: none;
    z-index: 9999;
  }
  .inSliBox{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 10px;
  /* border: 2px solid none; */
  opacity: .2;
  background: #000;
}
.inSliBox.active{
  opacity: 1;
  background: $secondary;
  /* border: 2px solid $secondary; */
}
.inSliBox:first-child{
  margin-left: 0;
}
.inSliBox div{
  /* width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: $secondary; */
}


</style>
