<template>
  <div class="navbar-con">
    <div class="navbar">
      <div class="logo">
        <img :src="require('@/image/bdclogo.png')" alt="" />
        <h4>{{ BASE_API.TITLE }}</h4>
      </div>
      <div class="right-menu">
        <div class="user">
          {{ userName }}
          <span @click="onCancel">
            <i class="el-icon-switch-button"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import Breadcrumb from './Breadcrumb'
  import { logout } from "@/api/login.js";
  export default {
    components: {
      Breadcrumb
    },
    computed: {
      ...mapGetters(["userInfo"]),
      userName () {
        return this.userInfo ? this.userInfo.name : ""
      }
    },
    methods: {
      handleDataView () {
        const { href } = this.$router.resolve('/dataView');
        window.open(href, '_blank');
      },
      themeChange (val) {
        this.$store.dispatch('app/updateTheme', val)
      },
      onCancel () {
        logout()
          .then((res) => {
            sessionStorage.removeItem("token");
            this.$store.dispatch("user/resetState");
            this.$store.dispatch("permission/resetRoutes");
            this.$router.replace({
              path: "/login"
            })
          })
          .catch((error) => {
            // console.dir(error);
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "~@/styles/_handle.scss";

  .navbar-con {
    position: relative;

    .logo {
      color: #fff;
      font-size: 26px;
      font-weight: 700;
      display: flex;
      margin-left: 15px;

      img {
        width: 47px;
        height: 47px;
      }

      h4 {
        margin-left: 20px;
        height: 50px;
        line-height: 50px;
      }
    }
  }

  .navbar {
    height: $headerHeight;
    overflow: hidden;
    position: relative;
    @include background("navbg");

    display: flex;
    align-items: center;
    padding-right: 20px;
    justify-content: space-between;

    .header-logo {
      width: 300px;
    }

    .right-menu-item {
      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;
        display: flex;
        align-items: center;
      }
    }
  }
</style>