<template>
  <!--  @mouseleave="ClearData" -->
  <q-page class="relative gap-1 overflow-hidden animate__animated duration5" @mouseleave="ClearData"
  :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}" style="height: 100vh;">
    <div class="absolute top0 right0 bottom0 left0 indexNavFormP row">
        <div class="col column carousel1-left relative" @mouseenter.stop.prevent="ClearData">
          <!-- <div class="row justify-center" @mouseenter="ClearData">
            <q-img class="carousel1-leftImg" :src="plugData.Logo"/>
          </div> -->
          <div class="text-center col" style="padding-top: 5rem;" @mouseenter.stop.prevent="ClearData">
            <img class="carousel1-leftImg inline-block" :src="plugData.Logo"/>
          </div>
          <div class="col column" style="position: relative; z-index: 2;">
            <div class="column col" @mouseenter.stop.prevent="ClearData"
            style="padding-top: 40px;flex-grow: 1;"
            :style="{'z-index': CurrentIndex==null?-2:2}">
              <ul class="column MenuListBox row relative">
                <div class="p-x40 row no-wrap justify-center">
                  <template v-for="(item,index) in plugData.MenuList">
                    <li class="MenuListLi row justify-center cursor-pointer"
                    :class="[CurrentIndex>=0&&CurrentIndex==index?' active':'']"
                    >
                      <div class="cursor-pointer flex flex-col items-center relative"
                      >
                        <div class="row min-w-50px" v-on:mouseenter="handleMouseEnter($event,index)">
                          <div class="font-serifEn writing-modes-vertical p text-gray-700">
                            <span class="inline-block tracking-6 fontW300 remTetil">
                              {{item.MenuName}}
                            </span>

                          </div>
                          <p class="font-serifEn writing-modes-vertical text-s text-secondary mlF5">
                            <span class="inline-block tracking-normal fontW100 remText">{{item.MenuSubName}}</span>
                          </p>
                        </div>
                      </div>
                    </li>
                  </template>
                </div>


              </ul>
              <div class="col" >
                <div class="SubMenuListBox2 full-height full-width "
                :class="[CurrentIndex==null?'':'full-height full-width animate__fadeInUpBig']">
                  <ul class="MenuListBox row justify-center">
                    <template v-for="(item,index) in plugData.MenuList">
                      <li class="MenuListLi row justify-center cursor-pointer">
                        <div class="cursor-pointer flex flex-col items-center relative">
                            <div class="MenuListItem" :class="[CurrentIndex==index?'active':'']"></div>
                        </div>
                      </li>
                    </template>
                  </ul>
                  <template v-for="(item,index) in plugData.MenuList">
                    <div class="row justify-center items-center SubMenuListBox q-py-lg textOverEllipsis" v-show="CurrentIndex==index"
                      :class="[CurrentIndex==index?'full-height full-width active':'']">
                        <div class="row justify-center">
                          <template v-for="(items,i) in item.SubMenuList">
                            <a class="SubMenuListText relative writing-modes-vertical
                            remSubText font-serifEn tracking-2 q-px-xs cursor-pointer inline-block row items-center"
                            @click="OpenNewUrl(items.LinkUrl)">
                              <span>{{items.MenuName}}</span>
                            </a>
                            <div v-if="(item.SubMenuList.length-1)!=i" class="SubMenuListLin q-ma-xs row">&nbsp;</div>
                          </template>
                        </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
            <ul class="BottomListBox absolute row justify-center">
              <li class="q-py-sm q-px-lg relative cursor-pointer" v-for="(item,index) in plugData.BottomList"
              @click.stop="OpenNewUrl(item.LinkUrl)">
                <a class="text-grey-7 transition-base">
                  <span class="text-xs font-serif tracking-1 cursor-pointer">{{item.LinkTitle}}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="carousel1-right overflow-hidden relative"
        :class="[windowWidth>=1280?'col':'col-12']" @mouseenter.stop.prevent="ClearData">
        <template v-if="windowWidth>=768">
            <q-img v-if="ImgObj.FileType!=2" class="carousel1-rightImg" @mouseenter.stop.prevent="ClearData"
            :class="[oldCoverImg!=coverImg?'active':'']"
            :src="coverImg" fill="contain"/>
            <q-img v-else alt="" :ratio="16/9" fill="cover">
              <q-video class="carousel1-rightImg" style="width: 100%;" :src="coverImg" frameborder="0"
              allowfullscreen  @mouseenter="ClearData"/>
            </q-img>
          </template>
          <template v-else>
            <q-carousel
                animated
                v-model="slide"
                infinite
                :autoplay="autoplay"
                style="height: 100%;"
              >
              <template v-for="(item,index) in FileUrlList">
                <q-carousel-slide :name="index+1" :img-src="item" />
              </template>
            </q-carousel>
            <div class="MBgColorBox row justify-center items-center">
              <q-img class="MBgColorImg" :src="plugData.MLogo" fill="contain"></q-img>
            </div>
          </template>
          <template v-if="windowWidth<1280">
            <span class="absolute indexNavxcText writing-modes-vertical cursor-pointer" @click="isMenu=true">行程线路</span>
            <div class="absolute indexNavxcBox" v-if="isMenu">
              <div class="relative" style="height: 100vh;">
                <i class="iconfont absolute indexNavxcIcon cursor-pointer" style="right: 20px;top: 20px;font-size: 25px; "
                @click.stop="isMenu=false">×</i>
                <div class="q-pb-lg">
                  <div class="text-center indexNavxcT">
                    <p class="font-serifEn text-stone q-pb-sm">Travel Line</p>
                    <p class="font-serif h3 text-gray-900">
                    <span class="inline-block">行程线路</span></p></div>
                </div>
                <!-- <ul class="q-px-sm row indexNavxcTitleM">
                  <template v-for="(item,index) in plugData.MenuList">
                    <li @click="CurrentIndex=index">{{item.MenuName}}</li>
                  </template>
                </ul> -->
                <ul class="row indexNavxcTM justify-center">
                  <template v-for="(item,index) in plugData.MenuList">
                      <li @click.stop="OpenNewUrl(item.LinkUrl)">{{item.MenuName}}</li>
                  </template>
                </ul>
                <ul class="BottomListBox absolute row justify-center" style="bottom: 0;">
                  <li class="q-py-sm q-px-lg relative cursor-pointer" v-for="(item,index) in plugData.BottomList"
                  @click.stop="OpenNewUrl(item.LinkUrl)" v-if="item.LinkUrl">
                    <a class="text-grey-7 transition-base">
                      <span class="text-xs font-serif tracking-1 pointer-events-none">{{item.LinkTitle}}</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </template>

        </div>
    </div>

  </q-page>
</template>
<script>
export default {
  props: ['plugData','Current','windowWidth','top','currentHeight'],
  data() {
    return {
      isMenu: false,
      CurrentIndex: null,
      ImgObj: {},
      coverImg: '',
      oldCoverImg: '',
      slide: 1,
      autoplay: 5000,
      FileUrlList: [],
    }
  },
  watch: {
    CurrentIndex: {
      handler (val, oldval) {

      }
    }
  },
  created() {

  },
  mounted() {
    this.ImgObj = this.plugData.MenuList[0]
    this.coverImg = this.plugData.MenuList[0].FileUrl
    this.plugData.MenuList.forEach(x=>{
      if(x.FileUrl){
        this.FileUrlList.push(x.FileUrl)
      }
    })
    console.log(this.windowWidth,'---===')
  },
  methods: {
    handleMouseEnter($event,index){
      this.oldCoverImg = JSON.parse(JSON.stringify(this.coverImg))
      if(this.CurrentIndex==index) return
      else if(index>=0) {
        this.ImgObj = {}
        this.CurrentIndex = null
        setTimeout(()=>{
          this.CurrentIndex = index
          if(this.plugData.MenuList[index].FileUrl) {
            this.coverImg = this.plugData.MenuList[index].FileUrl
            this.ImgObj = this.plugData.MenuList[index]
          }
        },300)
      }
    },
    ClearData(type){
      this.CurrentIndex = null
    }
  }
}
</script>
<style lang="scss">
  .indexNavxcTitleM{
    font-size: 15px;
  }
  .indexNavxcTM{
    font-size: 15px;
  }
  .indexNavxcTM li {
    border-radius: 3px;
    background: $secondary;
    color: #fff;
  }
  .indexNavxcT p:nth-child(2){
    font-size: 25px;
  }
  .indexNavxcT p:first-child{
    font-size: 18px;
  }

  .indexNavxcIcon{
    color: $secondary;
  }
  .indexNavxcBox{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    background: #fff;
  }
  .indexNavxcText{
    right: 0;
    top: 50%;
    z-index: 3;
    letter-spacing: 3px;
    background: $secondary;
    padding: 8px 8px;
    color: #fff;
  }
  @media only screen and (max-width: 1280px) {
    .carousel1-left{
      display: none;
    }
  }
  .indexNavForm{
    width: 100vw;
    height: 100vh;
  }
  .indexNavFormP{
    width: 100%;
    height: 100%;
  }
  .carousel1-left{

  }
  .carousel1-leftImg{
    display: block;
  }
  .MenuListBox{
    padding: 0 40px;
  }
  .MenuListBox li{
    width: 81px;
    padding-bottom: 15px;
  }
  .MenuListItem{
    position: absolute;
    left: -5px;
    bottom: -18px;
    opacity: 0;
    /* transition: all .4s; */
    z-index: 3;
  }
  .MenuListItem::after{
    border-color: transparent transparent #052032;
    border-style: solid;
    border-width: 0 7.5px 9px;
    content: "";
    height: 0;
    width: 0;
  }
  .SubMenuListBox{
    width: 100%;
    transition: all .4s;
    opacity: 0;
    background-color: $primary;
    z-index: 3;
  }
  .SubMenuListBox.active{
    opacity: 1;
  }
 .MenuListItem.active{
    opacity: 1;
    bottom: -8px;
  }
  .MenuListLi.active .SubMenuListBox{
    position: absolute;
    z-index: 999;
    opacity: 1;
  }

  .SubMenuListBox div:hover{
    color: rgb(05,05,05);
  }
  .SubMenuListBoxActivve{
    width: 100%;
    height: 16rem;
    background-color: $primary;
    transition: .4s;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    opacity: 0;
  }
  .SubMenuListBoxActivve.active{
    height: 19.5rem;
    opacity: 1;
  }
  .SubMenuListText{
    width: 39px;
    letter-spacing: normal;
    line-height: 23px;
    color: rgb(255,255,255);
    transition: all .5s;
  }
  .SubMenuListText:hover{
    color: $secondary;
  }
  .SubMenuListLin{
    width: 1px;
    background: linear-gradient(to bottom, $primary, #fff, $primary);
  }
  .BottomListBox{
    left: 0;
    right: 0;
    bottom: 15px;
    z-index: -1
    ;
  }
  .BottomListBox li:hover a{
    color: $secondary;
  }
  .BottomListBox li::after{
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    right: -3px;
    top: calc(50% - 0.5px);
    transform: rotate(-50deg) translateY(-50%);
    width: 6px;
    background: $primary;
  }
  .BottomListBox li:last-child::after{
    background: none
  }
  .carousel1-rightImg{
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    transition: all .4s;
  }
  .carousel1-rightImg.active{
    transform: scale(1);
  }
  .MBgColorBox{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }
  .MBgColorImg{
   width: 7.5rem;
  }
</style>
