<template>
  <!--  @mouseleave="ClearData" -->
  <q-page class="relative gap-1 animate__animated duration5 overflow-hidden"
  :class="[$q.platform.is.desktop?'window-height':'vh100']" @mouseleave="ClearData"
  :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}">
    <div class="absolute top0 right0 bottom0 left0 indexNavFormP row no-wrap">
        <div class="column justify-between carousel1-left relative" @mouseenter.stop.prevent="ClearData"
        v-if="$q.platform.is.desktop">
          <div class="text-center" style="padding-top: 100px;"
          @mouseenter.stop.prevent="ClearData"
          >
            <img class="carousel1-leftImg inline-block" :src="plugData.Logo">
            <p class="font-serifEn fz20 q-pt-lg text-secondary opacity-80">{{plugData.SubTitle}}</p>
          </div>
          <div class="column relative" style="z-index: 3;">
            <!-- style="padding-top: 60px;" -->
            <div class="column" @mouseenter.stop.prevent="ClearData"
            :style="{'z-index': CurrentIndex==null?-2:2}">
              <ul class="column MenuListBox MenuListBoxH row relative justify-end">
                <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"
                      @click="OpenNewUrl(item.LinkUrl)">
                        <div class="row min-w-50px" v-on:mouseenter="handleMouseEnter($event,index)">
                          <div class="navMenuName font-serifEn writing-modes-vertical p text-gray-700">
                            <span class="inline-block tracking-6 fontW300">
                              {{item.MenuName}}
                            </span>
                          </div>
                          <p class="font-serifEn writing-modes-vertical text-s text-secondary mlF5">
                            <span class="navMenuSubName inline-block tracking-normal fontW100 remText">{{item.MenuSubName}}</span>
                          </p>
                        </div>
                      </div>
                    </li>
                  </template>
                </div>


              </ul>
              <div class="col full-height full-width" style="min-height: 250px;">
                <div class="SubMenuListBox2 full-height full-width "
                :class="[CurrentIndex==null?'':'full-height full-width animate__fadeInUpBig relative']"
                >
                  <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"
                      :class="[CurrentIndex==index?'full-height full-width active':'']"
                      v-show="CurrentIndex==index">
                        <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="fz14 font-serif tracking-1 cursor-pointer">{{item.LinkTitle}}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="carousel1-right overflow-hidden relative"
        :class="[$q.platform.is.desktop?'col':'col-12']" @mouseenter.stop.prevent="ClearData">
        <template v-if="windowWidth>=768">
          <template v-if="FileUrlList[slide-1]&&FileUrlList[slide-1].FileType">
            <q-img v-show="FileUrlList[slide-1].FileType==1" class="carousel1-rightImg" @mouseenter.stop.prevent="ClearData"
            :class="[oldCoverImg!=coverImg?'active':'']"
            :src="FileUrlList[slide-1].FileUrl" fill="contain"/>
            <div v-show="FileUrlList[slide-1].FileType==2" class="carousel1-rightImg carousel1-rightV relative"
            :class="[oldCoverImg!=coverImg?'active':'']">
              <!-- :autoplay="PlayBack" controls -->
              <video :src="FileUrlList[slide-1].FileUrl" muted
              ref="videoPlayer"
              @timeupdate="(event)=>handleTimeUpdate(event,`videoPlayer`)"
              @ended="(event)=>handleEnded(event,`videoPlayer`)"
              @mouseenter.stop.prevent="ClearData"></video>
            </div>
          </template>
          </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.FileUrl" />
              </template>
            </q-carousel>
            <div class="MBgColorBox column justify-center items-center">
              <q-img class="MBgColorImg" :src="plugData.MLogo" fill="contain"></q-img>
              <p class="font-serifEn fz20 q-pt-lg text-white opacity-80">{{plugData.SubTitle}}</p>
            </div>
          </template>


          <div class="absolute indexNavxcText cursor-pointer"
          :class="[$q.platform.is.desktop?'':'writing-modes-vertical active']"
          @click="isMenu=true">
            <div class="row item-center q-py-md q-px-md">
              <template v-if="$q.platform.is.desktop">
                <span>Search</span>
                <div class="q-px-md"><q-separator style="height: 1px;width: 30px; margin: auto 0;background: rgba(225,225,225,.7);" vertical/></div>
              </template>
              <span>行程日期搜索</span>
            </div>
          </div>
            <div class="indexNavxcBox row item-center justify-center" v-if="isMenu">
              <div class=""
              :class="[$q.platform.is.mobile?'indexNavxcBoxCenter':'']">
                <i class="iconfont absolute indexNavxcIcon cursor-pointer" style="right: 20px;top: 20px;font-size: 38px; "
                @click.stop="isMenu=false">×</i>
                <div class="q-pb-lg">
                  <div class="text-center indexNavxcT">
                    <p class="font-serifEn text-stone q-pb-sm">Search</p>
                    <p class="font-serif h3 text-gray-900">
                    <span class="inline-block">行程日期搜寻</span></p></div>
                </div>
                <div class="indexNavxcBoxS"
                :class="[$q.platform.is.mobile?'active':'']">
                  <div class="column">
                      <p class="fz15 opacity-50">关键词</p>
                      <q-input
                        outlined
                        id="search_key"
                        v-model="searchKey"
                        class="col"
                        clearable
                        label="搜尋目的地、景點、行程觀光或酒店名稱..."
                        @focus="searchFocusHandler"
                        @blur="searchBlurHandler"
                        @keyup.enter="goSearchHandler"
                        clearable
                      />
                  </div>
                  <div class=""
                  :class="[$q.platform.is.mobile?'column':'row q-pt-md']">
                    <div class="col column">
                      <p class="fz15 opacity-50">线路</p>
                      <div>
                        <q-select outlined
                          v-model="line"
                          :options="plugData.MenuList"
                          emit-value map-options
                          option-label="MenuName"
                          option-value="MenuName"
                          @input="getLine"
                          clearable>
                        </q-select>
                      </div>
                    </div>
                    <template v-if="!isSeries&&SubMenuList.length>0">
                      <div class="split-word q-pl-xs q-pr-xs full-height" v-if="$q.platform.is.desktop">
                        &nbsp;&nbsp;&nbsp;
                      </div>
                      <div class="col column">
                        <p class="fz15 opacity-50">系列</p>
                        <div>
                          <q-select outlined
                            v-model="series"
                            :options="SubMenuList"
                            emit-value map-options
                            option-label="MenuName"
                            option-value="MenuName"
                            @input="getSeries"
                            clearable>
                          </q-select>
                        </div>
                      </div>
                    </template>

                  </div>
                  <div class=""
                  :class="[$q.platform.is.mobile?'column':'row q-pt-md']" v-if="isSeries">
                    <div class="col column">
                      <p class="fz15 opacity-50">门票/住宿/交通</p>
                      <div>
                        <q-select outlined
                          v-model="type1"
                          :options="CategoryList"
                          emit-value map-options
                          option-label="CategoryName"
                          option-value="Id"
                          @input="getType1"
                          clearable>
                        </q-select>
                      </div>
                    </div>
                    <template v-if="optionsList.length>0">
                      <div class="split-word q-pl-xs q-pr-xs full-height" v-if="$q.platform.is.desktop">
                        &nbsp;&nbsp;&nbsp;
                      </div>
                      <div class="col column" :class="[$q.platform.is.mobile?'':'q-pt-md']">
                        <p class="fz15 opacity-50">分类</p>
                        <div>
                          <q-select outlined
                            v-model="type2"
                            :options="optionsList"
                            emit-value map-options
                            option-label="CategoryName"
                            option-value="Id"
                            @input="getType2"
                            clearable>
                          </q-select>
                        </div>
                      </div>
                    </template>
                  </div>
                  <div class="column" :class="[$q.platform.is.mobile?'':'q-pt-md']">
                    <p class="fz15 opacity-50">出发时间</p>
                    <div class=""
                    :class="[$q.platform.is.mobile?'column':'row item-center']">
                      <div class="col">
                        <q-input
                          outlined
                          v-model="searchDate"
                          mask="date"
                          class=""
                          clearable
                        >
                          <template v-slot:append>
                            <q-icon name="event" class="cursor-pointer">
                              <q-popup-proxy ref="qS3DateProxy">
                                <q-date
                                  mask="YYYY-MM-DD"
                                  subtitle="选择"
                                  v-model="searchDate"
                                  @input="() => $refs.qS3DateProxy.hide()"
                                />
                              </q-popup-proxy>
                            </q-icon>
                          </template>
                        </q-input>
                      </div>
                      <div class="split-word q-pl-xs q-pr-xs full-height">
                        至
                      </div>
                      <div class="col">
                        <q-input
                          outlined
                          v-model="searchEndDate"
                          mask="date"
                          class=""
                          clearable
                        >
                          <template v-slot:append>
                            <q-icon name="event" class="cursor-pointer">
                              <q-popup-proxy ref="qS4DateProxy">
                                <q-date
                                  mask="YYYY-MM-DD"
                                  subtitle="选择"
                                  v-model="searchEndDate"
                                  @input="() => $refs.qS4DateProxy.hide()"
                                />
                              </q-popup-proxy>
                            </q-icon>
                          </template>
                        </q-input>
                      </div>
                    </div>
                  </div>
                  <div class="row" :class="[$q.platform.is.mobile?'':'q-pt-lg']">
                    <q-btn unelevated  color="secondary" label="搜 寻" class="col q-mt-lg fz18" @click="goUrl"/>
                  </div>
                </div>

              </div>
            </div>

        </div>
    </div>

  </q-page>
</template>
<script>
import {date} from 'quasar'
export default {
  props: ['plugData','Current','windowWidth','top','currentHeight'],
  data() {
    return {
      isMenu: false,
      CurrentIndex: null,
      ImgObj: {},
      coverImg: '',
      oldCoverImg: '',
      slide: 1,
      autoplay: 5000,
      FileUrlList: [],
      searchKey: '',
      searchDate: "",
      searchEndDate: "",
      showSplitPannel: false,
      CategoryList: [],
      optionsList: [],
      SubMenuList: [],
      line: '',
      lineUrl: '',
      series: '',
      seriesUrl: '',
      isSeries: false,
      type1: '',
      type2: '',
      LinkUrl: '',
      PlayBack: true
    }
  },
  watch: {
    CurrentIndex: {
      handler (val, oldval) {

      }
    }
  },
  created() {

  },
  mounted() {
    let arrList = function(list){
      list.forEach(x=>{
        x.currentTime = 0
      })
    }
    arrList(this.plugData.MenuList)
    this.plugData.MenuList.forEach(x=>{
      if(x.FileUrl){
        this.FileUrlList.push(x)
      }
    })
    this.ImgObj = this.plugData.MenuList[0]
    this.coverImg = this.plugData.MenuList[0].FileUrl

    if (localStorage.baseifo) {
      var jObj = JSON.parse(window.localStorage.getItem('baseifo'))
      this.CategoryList = jObj.CategoryList
      this.CategoryList.splice(0,1)
    }

    setTimeout(()=>{
      if(this.FileUrlList[this.slide-1].FileType==2){
        this.playVideo('videoPlayer')
      }
    },500)
  },
  methods: {
    // 监听视频播放进度的回调
    handleTimeUpdate(event,formName) {
      const audio = event.target;
      if (!audio.duration) return;
      let video = this.$refs[formName]
      if(video&&!video.paused){
        this.FileUrlList[this.slide-1].currentTime = audio.currentTime
      }
    },

    // 视频播放结束调用的回调
    handleEnded(event,formName) {
      if(this.FileUrlList[this.slide-1].currentTime) this.FileUrlList[this.slide-1].currentTime = 0
    },
    playVideo(formName){
      let i = this.slide-1
      if(this.FileUrlList[i].FileType==2){
        let video = this.$refs[formName]
        if(video){
          if(video.paused) {
            if(this.FileUrlList[i].currentTime){
              video.currentTime = this.FileUrlList[i].currentTime
            }
            video.play()
          }else {
            video.pause()
          }
        }
      }
    },
    goUrl(){
      let URL = ''
      if(this.LinkUrl) {
        URL = `${this.LinkUrl.indexOf('/#/searchProduct')!=-1?this.LinkUrl:this.LinkUrl+'?'}${this.searchKey?'&qsearchKey='+this.searchKey:''}${this.searchDate?'&qsearchDate='+this.searchDate:''}${this.searchEndDate?'&qsearchEndDate='+this.searchEndDate:''}${this.type1&&this.type2?'&categoryId='+this.type2:this.type1&&!this.type2?'&categoryId='+this.type1:''}`
        this.OpenNewUrl(URL)
      }
      else {
        this.OpenNewUrl('http://www.oytour.com/#/searchProduct')
      }
    },
    getType2(e){

    },
    getType1(e){
      this.optionsList = []
      let list = this.CategoryList.filter(x=>{
        if(x.Id==e){
          this.lineUrl = x.LinkUrl
          return x.Id==e
        }
      })
      let obj = {
        BackgroundImage: "",
        CategoryName: "不限",
        Icon: "",
        Id: '',
        IsHot: '',
        IsSelfGuidedTour: '',
        Level: 0,
        LinkUrl: '',
        ParentId: 0,
        Sort: 0,
        SubList: null
      }
      if(list[0].SubList[0].CategoryName!='不限') list[0].SubList.unshift(obj)
      this.optionsList = list[0].SubList
    },
    getSeries(e){
      let list = this.SubMenuList.filter(x=>{
        if(x.MenuName==e){
          this.LinkUrl = this.seriesUrl = x.LinkUrl
          if(x.LinkUrl.indexOf('/#/searchProduct')!=-1) {
            this.isSeries = false
          }
          else if(x.LinkUrl) {
            this.isSeries = true
          }else{
            this.LinkUrl = this.lineUrl
          }
          return x.MenuName==e
        }
      })
    },
    getLine(e){
      this.SubMenuList = []
      this.optionsList = []
      this.isSeries = false
      this.series = '不限'
      this.seriesUrl = ''
      this.type1 = ''
      this.type2 = ''
      let list = this.plugData.MenuList.filter(x=>{
        if(x.MenuName==e){
          this.LinkUrl = this.lineUrl = x.LinkUrl
          if(x.LinkUrl.indexOf('/#/searchProduct')!=-1) {
            this.isSeries = false
          }
          else if(x.LinkUrl) {
            this.isSeries = true
          }
          return x.MenuName==e
        }
      })
      let obj = {
        FileType: '',
        FileUrl: '',
        LinkTitle: '',
        LinkUrl: '',
        MenuName: '不限',
        MenuSubName: '',
        SubMenuList: null,
      }
      if(list.length>0&&list[0].SubMenuList[0].MenuName!='不限') list[0].SubMenuList.unshift(obj)
      if(list.length>0) this.SubMenuList = list[0].SubMenuList
    },
    searchFocusHandler() {
      if (this.searchKey == "") {
        setTimeout(() => {
          this.showSplitPannel = true;
        }, 200);
      }
    },
    searchBlurHandler() {
      //this.showSplitPannel = false;
    },
    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
          this.slide = index+1
          this.coverImg = this.FileUrlList[index].FileUrl
          setTimeout(()=>{
            if(this.FileUrlList[index].FileType==2){
              this.playVideo('videoPlayer')
            }
          },500)
        },300)
      }
    },
    ClearData(type){
      this.CurrentIndex = null
    }
  }
}
</script>
<style lang="scss" scoped>
  ::v-deep .indexNavxcBoxS .q-field__control{
    height: 45px;
  }
  ::v-deep .indexNavxcBoxS .q-field--auto-height .q-field__native{
    min-height: 45px;
  }
  ::v-deep .indexNavxcBoxS .q-field--auto-height .q-field__control{
    min-height: 45px;
  }
  .carousel1-rightV{
    background-color: $primary;
  }
  .carousel1-rightV video{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>
<style lang="scss">
  .indexNavxcBoxCenter{
    width: 90%;
  }
  .indexNavxcBoxS{
    width: 750px;
    padding: 60px 80px;
    border-radius: 10px;
    margin: auto;
    background: #fff;
  }
  .indexNavxcBoxS.active{
    width: 100%;
    padding: 20px 10px;
  }
  .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{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: #eee;
  }
  .indexNavxcText{
    z-index: 3;
    background: $secondary;
    padding: 8px 8px;
    color: #fff;
    top: 0;
    right: 0;
  }
  .indexNavxcText.active{
    top: 40%;
    letter-spacing: 3px;
  }
  @media only screen and (max-width: 1280px) {
    .carousel1-left{

    }
  }
  .indexNavForm{
    width: 100vw;
    height: 100vh;
  }
  .indexNavFormP{
    width: 100%;
    height: 100%;
  }
  .carousel1-left{

  }
  .carousel1-leftImg{
    width: 80px;
    display: block;
  }
  .MenuListBox{
    padding: 0 60px;
  }
  .MenuListBox li{
    width: 81px;
    padding-bottom: 15px;
  }
  .navMenuName{
    font-size: 18px;
  }
  .navMenuSubName{
    font-size: 16px;
  }
  .MenuListBox li span,.MenuListBox li p{
    max-height: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .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;
  }
  .SubMenuListBox.active{
    opacity: 1;
  }
 .MenuListItem.active{
    opacity: 1;
    bottom: -.6rem;
  }
  .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: 4px;
    line-height: 23px;
    color: rgb(255,255,255);
    transition: all .5s;
    max-height: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .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: 5rem;
  }
</style>
