<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 axios from 'axios'
  import Cookies from 'js-cookie'
  import { mapGetters } from 'vuex'
  import Breadcrumb from './Breadcrumb'
  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 () {
        axios.post(this.BASE_API.ip + "/management/logout").then(() => {
          if (process.env.NODE_ENV === 'development') {
            localStorage.removeItem('token')
          } else {
            Cookies.remove('token')
          }
          if (window._config.casEnable) {
            window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(window.location.href);
          } else {
            this.$router.push({
              path: '/login',
              replace: true,
              query: {
                redirect: router.currentRoute.value.fullPath
              }
            })
          }
        })
      }
    }
  }
</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>