<script lang='ts' setup>

import { useRouter, useRoute } from 'vue-router'

const props = withDefaults(defineProps<{
  xnav: any,
  iconMap: {[propName: string]: any}
}>(), {
  iconMap: () => {}
})

const act = defineModel()
const router = useRouter()
const dropdownRef = ref(null)

// 是否被选中
const isAct = (item) => {
  if (item.subs) {
    return item.subs.some(item => item.key === act.value)
  } else {
    return item.key === act.value
  }
}

// 导航切换
const navChange = (item) => {
  dropdownRef.value && dropdownRef.value.handleClose()
  act.value = item.key
  router.push(item.key)
}

</script>

<template>

<el-dropdown :teleported="false" ref="dropdownRef" v-if="xnav.subs" trigger="click">
    
  <div :class="['x-nav', { act: isAct(xnav) }]" >

    <div class="content">
      <div :style="iconMap[xnav.icon]" class="icon"></div>
      <div class="text">{{ xnav.name }}</div>
    </div> 
    
    <div class="act-face"></div>
    
  </div>

  <template #dropdown>
    <div class="submenu">
      <div
        v-for="xsub in xnav.subs"
        :key="xsub.key"
        :class="['x-submenu', { act: isAct(xsub) }]"
        @click="navChange(xsub)"
      >
        {{ xsub.name }}
      </div>
    </div>
  </template>

</el-dropdown>

<div v-else :class="['x-nav', { act: isAct(xnav) }]"
  @click="navChange(xnav)"
>

  <div class="content">
    <div :style="iconMap[xnav.icon]" class="icon"></div>
    <div class="text">{{ xnav.name }}</div>
  </div> 
  
  <div class="act-face"></div>
</div>

</template>

<style lang='scss' scoped>

.x-nav {
  position: relative;
  flex-shrink: 0;
  .content {
    height: 36px;
    font-size: 16px;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    .icon {
      width: 24px;
      height: 24px;
      margin-right: 2px;
    }
  }
  .act-face {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    background: rgba(15, 96, 219, 0.5);
    border-radius: 4px;
    transform: scale(0.9);
    opacity: 0;
  }
  &.act {
    .act-face {
      transition-property: all;
      transition-duration: 0.2s;
      transform: scale(1);
      opacity: 1;
    }
  }
}

.submenu {
  padding: 8px 0;
  position: relative;
  .x-submenu {
    padding: 6px 20px;
    white-space: nowrap;
    cursor: pointer;
    color: white;
    font-size: 16px;

    &.act {
      color: #00aeff;
    }

    &:not(.act):hover {
      background: rgba(124, 213, 255, 0.15);
    }
    
  }
}

</style>