<template>
  <div id="tab">
    <transition-group name="tab">
      <div class="main" key="tabMain">
        <div class="main-bg"></div>
        <transition-group name="mainTabs" class="main-content" tag="div">
          <div class="tab-item"
            v-for="item,index in tabList.data"
            :key="item.name"
            @click="changePage(item.routeName)"
          >
            <img class="tab-icon" :src="index===2? item.iconOn: item.icon" alt="">
            <span class="tab-label">{{item.name}}</span>
          </div>
        </transition-group>
      </div>
      <div class="sub" v-if="showSub" key="tabSub">
        <div class="sub-content">
          <span class="options" :class="{'highlight': subType==='hsx'}" @click="handleChangeSub('hsx')">杭申线</span>
          <i class="divider"></i>
          <!-- <span class="options" :class="{'highlight': subType==='chsx'}" @click="handleChangeSub('chsx')">长湖申线</span> -->
          <span style="cursor: not-allowed;" class="options" :class="{'highlight': subType==='chsx'}">长湖申线</span>
        </div>
      </div>
    </transition-group>
    <under-water v-if="sxdxShow"/>
  </div>
</template>

<script>
export default {
  name: 'TabSwitch',
}
</script>

<script setup>
  import { reactive, watch, nextTick, ref, onBeforeMount } from 'vue';
  import { useRouter } from 'vue-router'
  import { ueCallfullExtent, ueCallFlyToHsx } from '@/utils/UIInteractions'
  import UnderWater from './cpns/UnderWater.vue';
  import bus from '@/utils/bus'

  const router = reactive(useRouter())
  const showSub = ref(false)
  const subType = ref('hsx')

  function sortTabList() {
    showSub.value = router.currentRoute.name==='AccessMonitor'? true : false
    tabList.data.forEach((i,index) => {
      if(i.routeName===router.currentRoute.name) {
        let tabTemp = [...tabList.data]
        while(index!==2) {
          if(index<2) {
            tabTemp.unshift(tabTemp.pop())
            index++
          }
          if(index>2) {
            tabTemp.push(tabTemp.shift())
            index--
          }
        }
        tabList.data = tabTemp
        return
      }
    })
  }

  onBeforeMount(() => {
    sortTabList()
  })

  watch(router, (n, o) => {
    nextTick(() => {
      sortTabList()
    })
  }, { immediate: true })

  const tabList = reactive({data: [
    { name: '交通安全', icon: require('@/assets/imgs/navi/icon-jtaq.png'), iconOn: require('@/assets/imgs/navi/icon-jtaq-s.png'), routeName: 'TrafficSafty' },
    { name: '航道疏浚', icon: require('@/assets/imgs/navi/icon-hdsj.png'), iconOn: require('@/assets/imgs/navi/icon-hdsj-s.png'), routeName: 'LaneDredge' },
    { name: '运营监管', icon: require('@/assets/imgs/navi/icon-yyjg.png'), iconOn: require('@/assets/imgs/navi/icon-yyjg-s.png'), routeName: 'OperationSupervision' },
    { name: '水上客运', icon: require('@/assets/imgs/navi/icon-ssky.png'), iconOn: require('@/assets/imgs/navi/icon-ssky-s.png'), routeName: 'WaterTransport' },
    { name: '卡口监控', icon: require('@/assets/imgs/navi/icon-kkjk.png'), iconOn: require('@/assets/imgs/navi/icon-kkjk-s.png'), routeName: 'AccessMonitor' },
  ]})

  function handleChangeSub(type) {
    subType.value = type
  }

  function changePage(name) {
    if (name === "AccessMonitor"){
      ueCallFlyToHsx()
    }else {
      ueCallfullExtent()
    }

    router.push({
      name
    })
  }

  const sxdxShow = ref(false)
  bus.on('toggle_sxdx', (param) => {
    sxdxShow.value = param
  })

</script>

<style lang="scss" scoped>
#tab {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  .main {
    position: relative;
    width: 100%;
    height: 160px;

    .main-bg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 64px;
      background: url('@/assets/imgs/navi/bg-main.png') no-repeat;
      background-size: 100% 64px;
      z-index: 3;
    }

    .main-content {
      position: absolute;
      bottom: 26px;
      left: 50%;
      width: 600px;
      height: 120px;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 4;
    }
    

    .tab-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &.disabed {
        cursor: not-allowed;
        opacity: 0.5;
      }
      .tab-icon {
        width: 85px;
        height: 85px;
      }
      .tab-label {
        font-size: 20px;
        font-family: YSBTH;
        font-weight: 400;
        font-style: italic;
        color: #fff;
        transform: translateY(-3px);
        padding-right: 4px;
      }
      &:hover .tab-icon {
        transform: scale(1.05) translateY(-3px);
      }
    }

    .tab-item:nth-child(1), .tab-item:nth-child(5) {
      .tab-label {
        color: #F2FBFF;
      }
    }

    .tab-item:nth-child(2), .tab-item:nth-child(4) {
      transform: translateY(-10px);
    }

    .tab-item:nth-child(3) {
      transform: translateY(-20px);
      .tab-icon {
        width: 105px;
        height: 112px;
      }
      .tab-label {
        color: transparent;
        background: linear-gradient(0deg, #FFEFC9 0%, #FFD46F 100%);
        -webkit-background-clip: text;
        transform: translateY(-16px);
      }
    }

  }

  .mainTabs-move,.mainTabs-enter-active,.mainTabs-leave-active {
    transition: all 0.5s ease;
  }

  .tab-move,.tab-enter-active {
    transition: all 0.5s ease;
  }
  .tab-leave-active {
    display: none;
  }
  .tab-enter-from, .tab-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

  .sub {
    position: relative;
    width: 100%;
    height: 30px;

    .sub-content {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 4;
      .options {
        position: relative;
        width: 112px;
        height: 44px;
        box-sizing: border-box;
        padding-top: 6px;
        font-size: 18px;
        font-family: YSBTH;
        color: transparent;
        background: linear-gradient(0deg, rgba(97, 155, 214, 1) 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        cursor: pointer;
        z-index: 5;
        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: url('@/assets/imgs/page_kkjk/sub-navi.png') no-repeat;
          background-size: 100% 100%;
          z-index: 4;
        }

        &.highlight {
          background: linear-gradient(0deg, #D6D660 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
          &::after {
            background: url('@/assets/imgs/page_kkjk/sub-navi-s.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }

      .divider {
        display: inline-block;
        width: 1px;
        height: 17px;
        margin: 0 60px;
        background: #FFFFFF;
        opacity: 0.4;
      }
    }
    
  }
}
</style>
