<template>
  <!--  @mouseleave="ClearData" -->
  <q-page class="relative  gap-1 overflow-hidden" @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="ClearData">
          <div class="row justify-center" @mouseenter="ClearData">
            <q-img class="carousel1-leftImg" width="8rem" :src="plugData.Logo"/>
          </div>
          <div class="p-x40 col row justify-center" @mouseenter="ClearData">
            <ul class="row no-wrap MenuListBox row justify-center">
              <template v-for="(item,index) in plugData.MenuList">
                <li class="MenuListLi row justify-center cursor-pointer animate__animated"
                :class="[CurrentIndex>=0&&CurrentIndex==index?'animate__bounceInUp active':'animate__bounceOutUp']"
                >
                  <div class="cursor-pointer flex flex-col items-center relative justify-end"
                  v-on:mouseenter="handleMouseEnter($event,index)">
                    <div class="row min-w-50px">
                      <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 class="MenuListItem animate__animated"
                    :class="[CurrentIndex==index?'animate__bounceInUp':'animate__bounceOutUp']"></div>
                  </div>
                  <div class="row justify-center items-center SubMenuListBox q-py-lg"
                    :class="[CurrentIndex==index?'animate__bounceInUp':'animate__bounceOutUp']">
                      <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>
                </li>
              </template>
            </ul>
            <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-gray-700 transition-base md:hover:text-secondary">
                  <span class="text-xs font-serif tracking-1 pointer-events-none">{{item.LinkTitle}}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="carousel1-right overflow-hidden relative"
        :class="[windowWidth>1280?'col':'col-12']" @mouseenter="ClearData">
          <template v-if="windowWidth>=768">
            <q-img class="carousel1-rightImg animate__animated" @mouseenter="ClearData"
            :class="[oldCoverImg!=coverImg?'active animate__bounceInUp':'animate__bounceOutUp']"
            :src="coverImg" fill="contain"/>
          </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>
        </div>
    </div>

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

      }
    }
  },
  created() {

  },
  mounted() {
    this.coverImg = this.plugData.MenuList[0].FileUrl
    this.plugData.MenuList.forEach(x=>{
      if(x.FileUrl){
        this.FileUrlList.push(x.FileUrl)
      }
    })
  },
  methods: {
    handleMouseEnter($event,index){
      this.oldCoverImg = JSON.parse(JSON.stringify(this.coverImg))
      if(this.CurrentIndex==index) return
      else if(index>=0) {
        this.CurrentIndex = null
        setTimeout(()=>{
          this.CurrentIndex = index
          if(this.plugData.MenuList[index].FileUrl) this.coverImg = this.plugData.MenuList[index].FileUrl
        },300)
      }
    },
    ClearData(type){
      this.CurrentIndex = null
    }
  }
}
</script>
<style lang="scss">
  @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;
    margin-top: 6rem;
  }
  .MenuListBox{
    padding: 0 40px;
    min-height: 16rem;
  }
  .MenuListBox li{
    width: 81px;
  }
  .MenuListLi{
    height: 14rem;
    margin-top: 3rem;
  }
  .MenuListItem{
    position: absolute;
    bottom: -3.5rem;
    left: 10px;
    opacity: 0;
    transition: .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%;
    height: 16rem;
    transition: .4s;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $primary;
  }
  .MenuListLi.active .MenuListItem{
    opacity: 1;
    bottom: -1rem;
  }
  .MenuListLi.active .SubMenuListBox{
    position: absolute;
    z-index: 999;
    height: 18.5rem;
    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: 0;
  }
  .BottomListBox li:hover{
    color: rgb(05,05,05);
  }
  .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>
