<!--顶部一级菜单-->
<template>
  <div class="menu">
    <template v-for="(item, index) in $store.state.menu.allRouters">
      <div class="menu-item __hover" @click="toMenu(item)">
        <img :src="item.meta.icon"/>
        <div class="menu-item-title">
          {{item.meta.title}}
        </div>
      </div>
    </template>
  </div>
</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: {
  },
  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)) {
        router.push({
          path: menu.redirect || menu.path
        })
      }
    }
    return {
      ...toRefs(state),
      toMenu,
    }
  },
})
</script>

<style scoped lang="scss">
  .menu {
    width: 1198px;
    height: 49px;
    background-image: url("@/assets/images/layout/menu_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    position: relative;
    .menu-item {
      height: 26px;
      display: flex;
      align-items: center;
      font-family: PangMenZhengDao;
      font-size: 20px;
      font-weight: 400;
      color: #FFFFFF;
      position: relative;
      top: -9px;
      margin-right: 24px;
      &:last-child {
        margin-right: 0;
      }
      >img {
        margin-right: 8px;
      }
    }
  }
</style>
