<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">
              <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>
                      <div class="absolute inSliMLogo">
                        <q-img v-if="plugData.MLogo" :src="plugData.MLogo"
                        style="width: 2rem;height: 2rem;background: none;"/>
                      </div>
                    </template>
                  </q-img>
              </template>
              <q-img v-else alt="" :ratio="0.64" fill="cover">
                <q-video class="cursor-pointer" style="width: 100%;"  :src="item.FileUrl" frameborder="0"
                allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
              </q-img>
              <div class="swipercomSubEnLenR2 absolute writing-modes-vertical font-serifEn">
                {{item.SubEnName}}
              </div>
              <div class="swipercomTvR2BjBox">
                <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() {
      return {
        slide: 1,
        FileUrlList: [],
        isRight: false,
        swiperOption:{
          slidesPerView: 4,
          spaceBetween: 50,
          breakpoints: {
            1950: {
              slidesPerView: 5.8,
              spaceBetween: 40
            },
            1800: {
              slidesPerView: 4.5,
              spaceBetween: 40
            },
            1700: {
              slidesPerView: 3,
              spaceBetween: 40
            },
            1600: {
              slidesPerView: 3,
              spaceBetween: 40
            },
            1500: {
              slidesPerView: 4,
              spaceBetween: 30
            },
            1400: {
              slidesPerView: 4,
              spaceBetween: 30
            },
            1300: {
              slidesPerView:3.7,
              spaceBetween: 30
            },
            1200: {
              slidesPerView:3.15,
              spaceBetween: 30
            },
            1100: {
              slidesPerView:2.7,
              spaceBetween: 30
            },
            800: {
              slidesPerView:1.3,
              spaceBetween: 30
            },
            640: {
              slidesPerView: 1,
              spaceBetween: 20
            },
          }
        },
        swiper: 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.mySwiper2.swiper;
        if(this.windowWidth<=768) this.swiper.slidesPerView = 1
        else this.swiper.slidesPerView = 1.5
      }, 500);
    },
    methods: {
      onSlideChange(){
        // 获取当前索引
        const activeIndex = this.$refs.mySwiper2.swiper.activeIndex;
        this.slide = activeIndex
        // console.log('当前索引:', activeIndex);
      },
      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">
.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{
  top:  9rem;
  right: .5rem;
  background: none;
}
.swipercomSubEnR{
  font-size: 25px;
}
.swipercomR2{
  .swiperR2W{
    /* max-width: 12.91vw !important; */
  }
}
.swipercomSubEnLenR2{
  font-size: 2rem;
  left: -1.5rem;
  top: -1rem;
  letter-spacing: .5rem;
  color: $secondary;
}
.swipercomTvR2BjBox{

}
.swipercomTvR2Bj{
  background: linear-gradient(0deg,#000,transparent);
  z-index: 333;
  opacity: .7;
  border-radius: 10px;
  z-index: 1;
  transition: all .3s;
}
.swipercomTvR2{
  color: #fff;
  z-index: 2;
  padding: 0 20px 40px 20px;
  transition: all .3s;
}
.swipercomTitleLR2{
  font-size: 1.5rem;
}
.swipercomDesR2{
  font-size: 1.1rem;
  padding: 15px 0;
}
.swipercomIconR2{
  top: 1px;
}
.swipercomMoR2{
  border: 1px solid #ffff;
  padding: 5px 20px 8px 20px;
  font-size: 1.1rem;
}
.swiperR2W>div:hover .swipercomTvR2Bj{
  top: 0;
  bottom: 0;
  opacity: 1;
}
.swiperR2W>div:hover .swipercomTvR2{
  top: 0;
  bottom: 0;
  opacity: 1;
}
</style>
