<!--
 * @Author: Billy
 * @Date: 2022-01-05 17:30:05
 * @LastEditors: Billy
 * @LastEditTime: 2022-01-07 16:57:02
 * @Description: 右边导航栏(副栏)
-->

<template>
  <div class="header-inner" :class="arrangeMode">
    <div class="header-menu">
      <Menu
        :menuItems="secondaryMenuItems"
        :arrangeMode="arrangeMode"
        :displayMode="'icon'"
        :defaultActive="menuDefaultActive"
        :hasActiveEffect="true"
        @select="handleHeaderMenuSelect"
      />
    </div>
  </div>
</template>
<script>
import MenuBiz from "../../biz/Menu.js";
import Menu from "./Menu.vue";
import { HIDE_DRAWER_WHEN_PUSH } from "../../const.js";

export default {
  components: { Menu },
  props: {
    // 排列模式，横向还是竖向
    arrangeMode: {
      type: String,
      default: "horizontal",
      validator: function (value) {
        return ["horizontal", "vertical"].indexOf(value) !== -1;
      },
    },
    menuDefaultActive: {
      type: String,
    },
  },
  data() {
    return {
      secondaryMenuItems: [], // 主菜单栏的信息数组
    };
  },
  computed: {
    // menuDefaultActive: function () {
    //   // let _routerName = this.$route.name;
    //   // return this.secondaryMenuItems.findIndex(
    //   //   (item) => item.routerName === _routerName
    //   // );
    //   const _routerName = this.$route.name;
    //   const item = this.secondaryMenuItems.find(
    //     (item) => item.routerName === _routerName
    //   );
    //   return item ? item.id : "";
    // },
  },
  async beforeMount() {
    this.secondaryMenuItems = await MenuBiz.getSecondaryMenuItems();
  },
  mounted() {},
  methods: {
    // 处理导航菜单选择事件
    handleHeaderMenuSelect(item, index) {
      let routerName, drawerName;
      routerName = item.routerName;
      drawerName = item.drawerName;
      if (routerName) {
        // this.$safePush({ name: routerName });

        let drawerName;
        if (!HIDE_DRAWER_WHEN_PUSH) {
          drawerName = this.$route.query.drawerName;
        }
        this.$safePush({
          name: "Main",
          params: { routerName },
          query: { drawerName },
        });
      } else if (drawerName) {
        this.$safePush({
          name: "Main",
          query: { drawerName },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/scss/_variables";
.header-inner {
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  &.horizontal {
    flex-direction: row;
  }

  &.vertical {
    flex-direction: column;
  }

  .header-menu {
  }
}
</style>
