<!--
 * @Author: Billy
 * @Date: 2022-01-05 17:30:05
 * @LastEditors: Billy
 * @LastEditTime: 2022-01-10 21:21:34
 * @Description: 左边导航栏(主栏)
-->


<template>
  <div class="header-inner" :class="arrangeMode">
    <div class="header-menu">
      <div
        class="header-logo"
        :style="{
          width: `${HEADER_THICKNESS - 1}px`,
          height: `${HEADER_THICKNESS - 1}px`,
        }"
      >
        <el-image
          style="width: 100%; height: 100%"
          :src="logoSrc"
          :fit="'contain'"
        ></el-image>
      </div>
      <Menu
        :menuItems="mainMenuItems"
        :arrangeMode="arrangeMode"
        :displayMode="'both'"
        :defaultActive="menuDefaultActive"
        @select="handleHeaderMenuSelect"
      />
    </div>

    <div class="header-userinfo">
      <el-popover
        v-model="isUserInfoVisible"
        class="userinfo-popover"
        width="150"
        :placement="arrangeMode === 'horizontal' ? 'bottom' : 'right'"
        trigger="click"
      >
        <el-menu
          :default-active="headerActiveIndex"
          @select="handleUserMenuSelect"
        >
          <el-menu-item index="e">
            <i class="el-icon-setting"></i>
            <span slot="title">后台管理</span>
          </el-menu-item>
          <el-menu-item index="d">
            <i class="el-icon-warning-outline"></i>
            <span slot="title">系统数据</span>
          </el-menu-item>
          <el-menu-item index="a">
            <i class="el-icon-user"></i>
            <span slot="title">个人设置</span>
          </el-menu-item>
          <el-menu-item index="b" v-if="isAdmin">
            <i class="el-icon-setting"></i>
            <span slot="title">管理界面</span>
          </el-menu-item>
          <el-menu-item index="c">
            <i class="el-icon-switch-button"></i>
            <span slot="title">退出</span>
          </el-menu-item>
        </el-menu>
        <el-avatar
          class="main-avatar"
          slot="reference"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
      </el-popover>
    </div>
    <el-dialog
      class="dial-sys-info"
      title="系统数据"
      :visible.sync="isSysDataDialVisible"
      width="50%"
      :before-close="onSysDataDialClose"
    >
      <SysInfo :token="currUserInfo.token" :cdmsSid="currUserInfo.cdmsSid" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isSysDataDialVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Qs from "qs";
import MenuBiz from "../../biz/Menu.js";
import UserBiz from "../../biz/Rbac/User.js";
import LoginInfo from "../../storage/login-info.js";
import SysInfo from "./SysInfo.vue";
import Menu from "./Menu.vue";
import { HEADER_THICKNESS, PROJECT_NAME } from "../../const.js";

export default {
  components: { SysInfo, Menu },
  props: {
    // 排列模式，横向还是竖向
    arrangeMode: {
      type: String,
      default: "horizontal",
      validator: function (value) {
        return ["horizontal", "vertical"].indexOf(value) !== -1;
      },
    },
    menuDefaultActive: {
      type: String,
    },
  },
  data() {
    return {
      HEADER_THICKNESS,
      logoSrc: require("../../assets/logos/i3v-logo-single-flat.png"),
      isAdmin: false, // 是否管理员，默认不是管理员，在mounted事件里判断
      isUserInfoVisible: false, // 控制用户信息popover的显示与否
      isSysDataDialVisible: false, // 系统数据弹窗是否显示
      currUserInfo: {}, // 当前系统登录数据
      mainMenuItems: [], // 主菜单栏的信息数组
    };
  },
  computed: {
    // 头像popover
    headerActiveIndex: function () {
      return this.$route.meta.headerActiveIndex; // 当前页面应选中的头部菜单项的index
    },
  },
  async beforeMount() {
    this.mainMenuItems = await MenuBiz.getMainMenuItems();
  },
  mounted() {
    let userInfo = LoginInfo.getUserInfo();
    this.currUserInfo = userInfo ? userInfo : {};
  },
  methods: {
    // 处理导航菜单选择事件
    handleHeaderMenuSelect(item, index) {
      let routerName;
      routerName = item.routerName;
      if (routerName) {
        console.log("routerName :>> ", routerName);
        this.$safePush({ name: routerName });
        // this.$safePush(
        //   {
        //     name: "Main",
        //     params: { routerName },
        //   },
        //   (success) => {
        //     document.title = PROJECT_NAME + "-" + item.title;
        //   }
        // );
      }
    },

    // 处理用户信息菜单选择事件
    async handleUserMenuSelect(key, keyPath) {
      keyPath;
      switch (key) {
        case "a": // 设置
          this.isUserInfoVisible = false;
          break;
        case "b": // 管理界面
          this.isUserInfoVisible = false;
          break;
        case "c": {
          try {
            await UserBiz.logout(); // 无论后台退出是否成功，前端都先行退出
          } catch (e) {
            console.log("后端退出登录失败");
          }

          // 退出登录
          LoginInfo.removeUser();

          const currRouteName = this.$route.name;
          const paramsString = Qs.stringify(this.$route.params, {
            encode: false,
          });

          if (currRouteName)
            this.$safePush({
              name: "Login",
              query: {
                routeName: currRouteName,
                paramsString: paramsString ? paramsString : undefined,
              },
            });
          else this.$safePush({ name: "Login" });
          break;
        }
        case "d":
          // 系统数据
          this.isSysDataDialVisible = true;
          break;
        case "e": {
          // 后台管理
          const routeUrl = this.$router.resolve({
            name: "Org",
          });
          window.open(routeUrl.href, "_blank");
          break;
        }
      }
    },

    // 系统数据弹窗的关闭事件回调
    onSysDataDialClose(done) {
      done();
    },
  },
};
</script>

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

  .header-menu {
    display: flex;
    justify-content: flex-start;
  }

  &.horizontal {
    flex-direction: row;
    .header-menu {
      flex-direction: row;
      .header-logo {
        box-sizing: border-box;
        padding: 4px;
        margin-right: 16px;
      }
    }
    .header-userinfo {
      flex-direction: row;
      margin-right: 36px;
    }
  }

  &.vertical {
    flex-direction: column;
    .header-menu {
      flex-direction: column;
      .header-logo {
        box-sizing: border-box;
        padding: 4px;
        margin-bottom: 16px;
      }
    }
    .header-userinfo {
      flex-direction: column;
      margin-bottom: 36px;
    }
  }

  .header-userinfo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .userinfo-popover {
      // 让头像垂直居中
      display: flex;
      align-items: center;
      .main-avatar {
        cursor: pointer;
      }
    }
  }

  .dial-sys-info {
    ::v-deep .el-dialog {
      min-width: 530px;
    }
  }
}

.el-menu {
  border-right: none; // 取消垂直导航菜单默认的右边框
  &.el-menu--horizontal {
    border-bottom: none; // 取消水平导航菜单默认的下边框
  }
  > .el-menu-item {
    height: 36px;
    line-height: 36px;
  }
}
</style>
