<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "style.scss";
</style>

<!-- Template -->
<template>
  <div class="component-container header-component">
    <b-navbar toggleable="md" type="dark" variant="dark" style="background-color: #183255 !important;">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <b-navbar-brand href="javascript:void(0);" @click="headerBarHomeHandler()" style="display: flex; align-items: center;">
        <img class="float-left mr-2" src="../../../../static/logo-title-dark.png">
        <div>江门市企业上市服务平台</div>
      </b-navbar-brand>
      <b-collapse is-nav id="nav_collapse">
        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">

          <b-nav-item href="javascript:void(0);" @click="headerBarPortalHandler()">
            <i class="fa fa-square" aria-hidden="true"></i>
            <span>平台首页</span>
          </b-nav-item>

          <b-nav-item href="javascript:void(0);" @click="headerBarHomeHandler()">
            <i class="fa fa-home" aria-hidden="true"></i>
            <span>政务OA</span>
          </b-nav-item>

          <b-navbar-nav v-if="!userSession">
            <b-nav-item href="javascript:void(0);" @click="headerBarSignUpHandler()">
              <i class="fa fa-plus-square-o" aria-hidden="true"></i>
              <span>注册</span>
            </b-nav-item>
            <b-nav-item href="javascript:void(0);" @click="headerBarSignInHandler()">
              <i class="fa fa-sign-in" aria-hidden="true"></i>
              <span>登陆</span>
            </b-nav-item>
          </b-navbar-nav>

          <b-navbar-nav v-if="userSession && userNotice">
            <b-nav-item href="javascript:void(0);" @click="headerBarNoticeHandler()" class="position-relative">
              <i class="fa fa-bullhorn" aria-hidden="true"></i>
              <span>通知</span>
              <b-badge variant="info" class="notice-badge position-absolute" v-if="userNotice.count >= 1">
                {{userNotice.count}}
              </b-badge>
              <b-badge variant="secondary" class="notice-badge position-absolute" v-if="userNotice.count < 1">
                {{userNotice.count}}
              </b-badge>
            </b-nav-item>
          </b-navbar-nav>

          <b-nav-item-dropdown right v-if="userSession">
            <template slot="button-content">
              <i class="fa fa-address-card" aria-hidden="true"></i>
              <em>{{userSession.username}}</em>
            </template>
            <b-dropdown-item href="javascript:void(0);" @click="headerBarProfileHandler()">
              <i class="fa fa-user" aria-hidden="true"></i>
              <span>个人中心</span>
            </b-dropdown-item>
            <b-dropdown-item href="javascript:void(0);" @click="headerBarSettingsHandler()" v-if="userSession.authorities.indexOf('ADMIN')>-1">
              <i class="fa fa-cog" aria-hidden="true"></i>
              <span>系统管理</span>
            </b-dropdown-item>
            <b-dropdown-item href="javascript:void(0);" @click="headerBarSignOutHandler()">
              <i class="fa fa-sign-out" aria-hidden="true"></i>
              <span>退出</span>
            </b-dropdown-item>
          </b-nav-item-dropdown>

        </b-navbar-nav>
      </b-collapse>
    </b-navbar>

  </div>
</template>

<!-- Script -->
<script>
  import {mapGetters} from 'vuex';

  const _Header = {
    name: 'Header',
    created: function () {
      // console.log('Header > ', this.userSession)
    },
    updated: function () {
    },
    mounted: function () {
    },
    activated: function () {
    },
    data: function () {
      return {};
    },
    methods: {
      headerBarHomeHandler() {
        console.log('Header methods > headerBarHomeHandler');
        this.$router.push({path: '/'});
      },
      headerBarPortalHandler() {
        console.log('Header methods > headerBarPortalHandler');
        window.location.href = '/';
      },
      headerBarSignInHandler() {
        console.log('Header methods > headerBarSignInHandler');
        this.$router.push({path: '/sign/in'});
      },
      headerBarSignUpHandler() {
        console.log('Header methods > headerBarSignUpHandler');
        this.$router.push({path: '/sign/up'});
      },
      headerBarNoticeHandler() {
        console.log('Header methods > headerBarNoticeHandler');
        this.$router.push({path: '/notice/list'});
      },
      headerBarProfileHandler() {
        console.log('Header methods > headerBarProfileHandler');
        this.$router.push({path: '/profile/attribute'});
      },
      headerBarSettingsHandler() {
        console.log('Header methods > headerBarSettingsHandler');
        this.$router.push({path: '/management'});
      },
      headerBarSignOutHandler() {
        console.log('Header methods > headerBarSignOutHandler');
        this.$router.push({path: '/sign/out'});
      }
    },
    components: {},
    computed: {
      ...mapGetters([
        'userSession',
        'userNotice'
      ])
    }
  };
  export default _Header;
</script>
