<template>
  <div class="layout">
    <div class="header">
      <div class="logo">
        <img class="logo" src="../../assets/imgs/logo.png" alt="logo" />
      </div>
      <div class="logout">
        <i class="iconfont icon-xiaoxi"></i>
        <i class="iconfont icon-user"></i>
        <span>{{ userName }}</span>
        <i class="icon iconfont icon-tuichudenglu" @click="logout()"></i>
      </div>
    </div>
    <div class="menus">
      <el-menu
        :default-active="currentMenu"
        mode="horizontal"
        background-color="#0B2C55"
        text-color="#fff"
        active-text-color="#fff"
        @select="handleSelect"
      >
        <el-menu-item
          index="1"
          @click="$router.push({ path: '/vehicleManagement' })"
          >Vehicle Management</el-menu-item
        >
        <el-menu-item
          index="2"
          @click="$router.push({ path: '/groupManagement' })"
          >Group Management</el-menu-item
        >
        <el-menu-item
          index="4"
          @click="$router.push({ path: '/configurationManagement' })"
          >Configuration Management</el-menu-item
        >
        <el-menu-item index="9" @click="$router.push({ path: '/permissionManagement' })"
          >Permission</el-menu-item
        >
        <el-menu-item index="10" @click="$router.push({ path: '/datasourceManagement' })"
          >Data Source Management</el-menu-item
        >
      </el-menu>
      <el-menu-item
        index="3"
        @click="$router.push({ path: '/issueManagement' })"
        >Issue Management</el-menu-item
      >
      <!-- <el-menu-item index="4" @click="$router.push({ path: '/dateTask' })"
          >Date Task</el-menu-item
        > -->

      <!-- <el-menu-item index="5" @click="$router.push({ path: '/sendCommand' })"
          >Send Command</el-menu-item
        > -->
      <!-- <el-menu-item index="7">Event Logs</el-menu-item>
        <el-menu-item index="8">Audit</el-menu-item> -->
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script>
import { removeToken, removeCookie } from "@/utils/auth";
export default {
  name: "Layout",
  data() {
    return {
      currentMenu: "1",
      userName: "Evan Yates",
      email: "No email!",
    };
  },
  created() {
    // this.getUserName();
    this.getCurrentMenu();
  },
  mounted() {
    this.userName = this.$keycloak.tokenParsed.given_name;
  },
  methods: {
    getUserName() {
      const userInfo = localStorage.getItem("user");
      if (userInfo) {
        this.userName = JSON.parse(userInfo)["username"] || "Visitor";
        this.email = JSON.parse(userInfo)["email"] || "No email!";
      }
    },
    logout() {
      this.$keycloak.logout();
    },
    getCurrentMenu() {
      const currentMenu = sessionStorage.getItem("currentMenu");
      this.currentMenu = currentMenu ? currentMenu : this.currentMenu;
    },
    handleSelect(key) {
      sessionStorage.setItem("currentMenu", key);
    },
  },
};
</script>

<style lang="scss" src="../../assets/css/layout.scss" />
