<template>
  <div class="no-course" @mouseleave="handleMouseLeave"
  @click="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="cursor-pointer">
              <div class="relative" :style="{'background':`url(${item.FileUrl})no-repeat`,'background-size':'cover'}"
              style="border-radius:10px;" @click.stop="OpenNewUrl(item.LinkUrl)" @mousemove.stop="handleMouseLeave">
                <q-img alt="image" :ratio="16/9" fill="cover"/>
                <!-- <template v-if="item.FileType==1">
                    <q-img :src="item.FileUrl" no-default-spinner alt="image" :ratio="16/9" fill="cover"
                    v-if="index==0||index==(plugData.NavList.length-1)"
                    @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 :src="item.FileUrl" alt="image" :ratio="16/9" fill="cover"
                    @click.stop="OpenNewUrl(item.LinkUrl)"/>
                </template>
                <q-img v-else alt="" :ratio="16/9" fill="cover">
                  <q-video class="cursor-pointer" :src="item.FileUrl" frameborder="0"
                  allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
                </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" ></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>1280" 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>
      <template v-if="windowWidth>=992">
        <div class="absolute" style="width: 25%;left: 0;top: 0;bottom: 0;z-index: 2;" @mousemove="handleMouseMove"></div>
        <div class="absolute" style="width: 25%;right: 0;top: 0;bottom: 0;z-index: 2;" @mousemove="handleMouseMove"></div>
        <div class="absolute" style="width: 50%;right: 25%;top: 0;z-index: 2;height: 35vh;" @mousemove="handleMouseMove"></div>
        <div class="absolute" style="width: 50%;right: 25%;bottom: 0;z-index: 2;height: 23vh;" @mousemove="handleMouseMove"></div>
      </template>
    </div>

    <mouse v-if="windowWidth>=992" :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'],
    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"));
                // console.log(obj,'-----')  //  需要执行的事件
              }
            },
          },
          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: 4000,
            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,
      }
    },
    watch: {
      windowWidth: {
        handler(val, oldval) {

        }
      }
    },

    created() {
      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()
      }, 500);
    },
    methods: {
      slideChangeTransitionEnd(){
        //  this.$refs.mySwiper.swiper.activeIndex;
        this.slide = this.$refs.mySwiper.swiper.activeIndex
      },
      onSlideChange(){
        // 获取当前索引
        const activeIndex = this.$refs.mySwiper.swiper.activeIndex;
        this.slide = activeIndex
        // console.log('当前索引:', activeIndex);
      },
      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
        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">
.indexRoll1Box{
  overflow: hidden;
  padding-top: 80px;
}
.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);
  }
  .swipercomTitleR{
    padding-right: 20px;
    overflow: hidden;
    letter-spacing: .29rem;
    line-height: 2.18rem;
  }
.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;
  }
  .swipercom.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{
  top:  9rem;
  right: .5rem;
  background: none;
}
.swipercomSubEnR{
  font-size: 25px;
}

</style>
<style>
.line-feature * {
  line-height: normal !important;
}
.line-feature .draggable{
  position: absolute;
}
.slider-container{
  overflow: unset;
}
.slider-item {
  /* transform: scale(1);
  transition-timing-function: ease;
  transition-duration: 300ms; */
  width: 50%;
}
.slider-item.slider-active {
  /* transform: scale(1);
  z-index: 999; */
  width: 50%;
}
.trip-text img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.trip-text {
  line-height: 1.6;
}
.slider-item.slider-active-copy {
  transform: scale(1);
  z-index: 999;
}
.active-trip-module {
  color: var(--q-color-primary);
  font-weight: 800;
  position: relative;
}
.active-trip-module::before {
  position: absolute;
  content: " ";
  top: 0;
  bottom: 0;
  left: -25px;
  width: 5px;
  border-radius: 5px;
  background: var(--q-color-primary);
}
.trip-module {
  color: #9e9e9e;
  transition: all 0.3s;
  font-weight: 100;
  text-align: center;
  line-height: 38px;
  font-size: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-family: lettergothicstd;
}
.active-trip-moduleDay {
  position: relative;
  border: 0;
  left: -15px;
  font-size: 51px;
}
.active-trip-moduleDay.active::before {
  opacity: 1;
}
.active-trip-moduleDay::before {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -50px;
  content: "DAY";
  font-size: 13px;
  font-family: fangsong;
  line-height: 58px;
  opacity: 0;
}
#setZoom > div {
  zoom: calc(100 / 1000);
}
.large-feature img{
  width:100% !important
}
.tripImages-footer{
  /* background: url('../assets/img/trip/otherBjThree.jpg') repeat; */
  padding: 115px 0 32px 0;
}
</style>
