<template>
  <div class="no-course" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave"
  @click="carousel(Current)">
    <div class="relative gap-1 overflow-hidden"
    :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}">
      <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':'']">
                {{plugData.Describe}}
              </div>
            </div>
            <div v-if="FileUrlList&&FileUrlList.length>0" class="indexSlider-right h100 animate__fadeInUp" @click.stop="">
             <!-- animated -->
              <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">
                <!-- :class="[slide==index+1?'animate__bounceInUp':'animate__bounceOutUp']" -->
                <q-carousel-slide :key="index" :name="index+1" class="indexSliderImgC">
                  <div class="col relative h100"
                  :class="[slide==index+1?'animate__bounceInUp':'animate__bounceOutUp']">
                    <q-img class="cursor-pointer" :ratio="16/9" v-if="item.FileType==1" :src="item.FileUrl" fill="cover" @click.stop="OpenNewUrl(item.LinkUrl)">
                      <template v-slot:error>
                        <div class="absolute inSliMLogo">
                          <q-img v-if="plugData.MLogo" :src="plugData.MLogo"
                          style="width: 2rem;height: 2rem;background: none;"/>
                        </div>
                      </template>
                    </q-img>
                    <q-img v-else :ratio="16/9">
                      <q-video class="cursor-pointer" :src="item.FileUrl" frameborder="0" allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
                    </q-img>
                    <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',]"
                      :style="{'background-color':windowWidth>=992?'':plugData.BgColor}"><span class="opacity-80">{{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 row justify-between cursor-default"
                    :style="{'background-color':plugData.BgColor}"
                    :class="[windowWidth>=992?'absolute':'']">
                      <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']">
                        <!-- {{item.SubDescribe}} -->
                        <span v-if="windowWidth>=992" v-html="item.SubDescribe"></span>
                        <span v-else>
                          {{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&&isRight" :X="X" :Y="Y" :isRight="isRight" :Current="Current"></mouse>
  </div>

</template>
<script>
import mouse from "./mouse";
export default {
  components: { mouse },
  props: ['plugData','windowWidth'],
  data() {
    return {
      X: 0,
      Y: 0,
      Current: null,
      slide: 2,
      autoplay: 40000000,
      FileUrlList: [],
      isRight: false,
    }
  },
  watch: {
    windowWidth: {
      handler: function (val, oldval) {

      }
    }
  },

  created() {

  },
  mounted() {
    let arrList = function(list){
      list.forEach(x=>{
        x.SubDescribe2 = ''
      })
    }
    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)
      }
    })
  },
  methods: {
    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
      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)
      // if(y<950||y>1620) this.isRight = false
      // else this.isRight = true
      let width = this.windowWidth/2
      if(el.x<width){
        this.Current = 'left'
      }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">

  .indexSlider-right {
    .q-carousel{
      background-color: rgba(23,23,23,0) !important;
    }
    .q-panel-parent{
      overflow: unset !important;
      .scroll{
        overflow: unset !important;
      }
    }
  }

  .indexSliderBox{
    cursor: none;
    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;
  }
  .indexSlider-right{
    width: 75%;
  }
  .indexSliderContainer.active .indexSlider-right{
    width: 100%;
  }
  .indexSliderImgBox{
    border-radius: 10px;
    z-index: 10;
  }

  .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);

  }
  .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;
  }
  .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{
    top:  9rem;
    right: .5rem;
    background: none;
  }
  .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>
