<!--顶部一级菜单-->
<template>
  <template v-if="isSpecial">
    <div class="menu-special">
      <template v-for="(item, index) in $store.state.menu.allRouters">
        <div class="menu-item-special __hover" :class="{active: deepRouteName(item)}" @click="toMenu(item)">
          {{item.meta.title}}
        </div>
      </template>
    </div>
  </template>
  <template v-else>
    <div class="menu-normal">
      <template v-for="(item, index) in $store.state.menu.allRouters">
        <div class="menu-normal-item __hover" :class="{active: deepRouteName(item)}" :style="`width: ${128 + 16 * (item.meta.title.length - 4 > 0 ? item.meta.title.length - 4 : 0)}px;`" @click="toMenu(item)">
          <div class="menu-normal-item-title">
            {{item.meta.title}}
          </div>
        </div>
      </template>
    </div>
  </template>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
    isSpecial: {}
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
    })
    const toMenu = (menu: any) => {
      if (!route.matched.some(v => menu.path === v.path)) {
        const homeRouteName = store.state.menu.homeRouterName
        if (route.name === homeRouteName || menu.name === homeRouteName) {
          const to = router.resolve({
            path: menu.redirect || menu.path,
          });
          window.open(to.href, "_blank")
        } else {
          router.push({
            path: menu.redirect || menu.path
          })
        }
      }
    }
    const deepRouteName = (item: any) => {
      let bool = false
      const deep = (obj: any) => {
        if (obj.name === route.name) {
          bool = true
        }
        if (obj.children?.length > 0) {
          obj.children.forEach((v: any) => {
            deep(v)
          })
        }
      }
      deep(item)
      return bool
    }
    return {
      ...toRefs(state),
      toMenu,
      deepRouteName
    }
  },
})
</script>

<style scoped lang="scss">
  .menu-special {
    height: 42px;
    background-image: url("@/assets/images/layout/menu-bg-special.png");
    background-position-x: right;
    background-position-y: bottom;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    align-self: flex-start;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    padding: 0 29px 0 34px;
    .menu-item-special {
      padding: 0 16px;
      &.active {
        position: relative;
        font-size: 16px;
        font-weight: bold;
        text-shadow: 0px 3px 7px rgba(18,79,188,0.7);
        &:before {
          content: '';
          position: absolute;
          background-image: url("@/assets/images/layout/menu-active-special.png");
          background-repeat: no-repeat;
          background-size: 100%;
          width: 100%;
          height: 13px;
          top: 17px;
          left: 0;
        }
      }
    }
  }
  .menu-normal {
    display: flex;
    align-items: center;
    margin-top: 12px;
    margin-left: -42px;
    .menu-normal-item {
      $menuSkexX: -42deg;
      background-image: url("@/assets/images/layout/menu-item-bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 55px;
      transform: skewX($menuSkexX);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: -18px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      &.active {
        background-image: url("@/assets/images/layout/menu-item-bg-active.png");
      }
      .menu-normal-item-title {
        transform: skewX(-$menuSkexX);
        margin-right: 20%;
      }
    }
  }
</style>
