<template>
  <ul class="header-menu">
    <template v-for="item in menuData">
      <li @click="selectMenu(item, 1)" :key="item.id" :class="{ selected: item.selected }" :style="getStyle(item)" v-if="!item.hidden">
        <svg-icon class="icon animated" :icon-name="item.meta.icon"></svg-icon>
        <span>{{ item.meta.title }}</span>
      </li>
    </template>
  </ul>
</template>
<script>
import useRouteItem from '@/hooks/useRouteItem'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
export default {
  props: {
    pageConfigs: Object
  },
  setup(props) {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const firstPath = computed(() => `/${route.path.split('/')[1]}`)
    const menuData = computed(() => store.state.permission.addRoutes)
    const { routeItem } = useRouteItem()
    const hiddenSide = computed(() => {
      return !routeItem.value || routeItem.value.meta.hiddenSide
    })
    function getStyle(item) {
      if (item.selected) {
        return {
          backgroundColor: props.pageConfigs.headerSelectColour,
          color: props.pageConfigs.headerFontSelectColour
        }
      }
    }
    function getJumpRoute(data) {
      const route = data[0]
      if (route.children && route.children.length) {
        return getJumpRoute(route.children)
      }
      return route.path
    }
    // 重置菜单数据 flag:是否重置菜单书局
    function resetMenu(flag) {
      unref(menuData).forEach(row => {
        row.selected = false
        // this.$set(row, 'selected', false)
      })
      if (flag) {
        store.commit('SETTING_SIDE_MENU', [])
        store.commit('SETTING_BASE_PATH', '/')
      }
    }
    function selectMenu(item, flag) {
      if (item.meta.path) {
        window.open(item.meta.path)
        return
      }
      if (item.selected) return
      resetMenu()
      const menu = menuData.value.find(cell => cell.id === item.id)
      menu.selected = true
      // 处理一级菜单没有子菜单的情况
      const menus = menu.children.filter(item => !item.hidden)
      if (menus.length) {
        store.commit('SETTING_SIDE_MENU', menu.children)
        store.commit('SETTING_BASE_PATH', menu.path)
      } else {
        resetMenu(true)
      }
      // 点击一级菜单时跳转界面，刷新界面是保持不动
      if (flag) {
        router.push({ path: getJumpRoute(menu.children) })
      }
    }
    function initMenu() {
      // 没有任何菜单信息或者当前路由为隐藏侧边栏直接return
      if (!menuData.value || menuData.value.length === 1 || hiddenSide.value) return
      const selectedMenu = unref(menuData).find(item => item.path === firstPath.value)
      if (selectedMenu) {
        selectMenu(selectedMenu, route.name === 'Home')
      } else {
        resetMenu(1)
      }
    }
    watch(firstPath, () => {
      // 左侧菜单刷新不用重置菜单数据
      if (route.name !== 'Redirect') initMenu('firstPath')
    })
    watch(
      menuData,
      () => {
        initMenu('menuData')
      },
      {
        immediate: true
      }
    )
    watch(hiddenSide, cur => {
      if (cur) {
        resetMenu(1)
      } else {
        initMenu()
      }
    })
    return {
      firstPath,
      menuData,
      hiddenSide,
      getStyle,
      selectMenu
    }
  }
}
</script>
<style lang="scss" scoped>
ul.header-menu {
  margin: 0;
  list-style: none;
  flex: 1;
  display: flex;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  li {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    position: relative;
    height: 48px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 120px;
    min-width: 80px;
    float: left;
    &:hover .icon {
      animation-name: swing;
    }
    .icon {
      font-size: 16px;
      margin-right: 4px;
    }
    &.selected {
      color: #fff;
      background: #15171d;
    }
    div {
      display: none;
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.15);
    }
  }
}
</style>
