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

  .header-component {
    .navbar {
      padding: 2rem 0.5rem 1rem 0.5rem;
    }
    .navigator {
      line-height: 1rem;
      background-color: #015193;
      color: $light;
      .list-group {
        list-style: none;
        .list-cell {
          width: 200px;
          text-align: center;
          border-right: 1px solid #ccc;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 400;
          margin: 0.5rem 0;
          &:last-child {
            border-right: 1px solid transparent;
          }
        }
      }
    }
  }
</style>

<!-- Template -->
<template>
  <div class="component-container header-component">
    <div class="container">
      <b-navbar toggleable="md" type="light" variant="light" style="background-color: #183255 !important;">
        <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
        <b-navbar-brand href="javascript:void(0);" @click="headerBarHomeHandler()">
          <img class="float-left mr-2 logo" src="../../../../static/logo-title-default.png">
        </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="headerBarHomeHandler()">
              <i class="fa fa-square" aria-hidden="true"></i>
              <span>首页</span>
            </b-nav-item>

            <b-nav-item href="javascript:void(0);" @click="headerBarIndexHandler()">
              <i class="fa fa-home" aria-hidden="true"></i>
              <span>后台</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="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>
    <div class="navigator">
      <div class="container">
        <ul class="list-group d-flex flex-row justify-content-center">
          <li class="list-cell" href="javascript:void(0);" @click="navigatorseedListedCenterHandler()">平台首页</li>
          <li class="list-cell" href="javascript:void(0);" @click="navigatorDynamicHandler()">工作动态</li>
          <li class="list-cell" href="javascript:void(0);" @click="navigatorPolicyHandler()">政策资讯</li>
          <li class="list-cell" href="javascript:void(0);" @click="navigatorseedEnterpriseHandler()">种子企业</li>
          <li class="list-cell" href="javascript:void(0);" @click="navigatorKnowledgeHandler()">知识图谱</li>
          <li class="list-cell" href="javascript:void(0);" @click="navigatorBreedingHandler()">培育基地</li>
          <li class="list-cell" href="javascript:void(0);" @click="navigatorGreenChannelHandler()">绿色通道</li>
          <li class="list-cell" href="javascript:void(0);" @click="navigatorLawsHandler()">法律法规</li>
          <!--<li class="list-cell" href="javascript:void(0);" @click="navigatorResourcelHandler()">热门机构</li>-->
        </ul>
      </div>
    </div>
  </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: '/'});
      },
      headerBarIndexHandler() {
        console.log('Header methods > headerBarIndexHandler');
        window.location.href = '/oa/';
      },
      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'});
      },
      headerBarSignOutHandler() {
        console.log('Header methods > headerBarSignOutHandler');
        this.$router.push({path: '/sign/out'});
      },
      navigatorKnowledgeHandler() {
        console.log('navigator methods > navigatorKnowledgeHandler');
        this.$router.push({path: '/college'});
      },
      navigatorGreenChannelHandler() {
        console.log('navigator methods > navigatorGreenChannelHandler');
        this.$router.push({path: '/greenChannel'});
      },
      navigatorseedEnterpriseHandler() {
        console.log('navigator methods > navigatorseedEnterpriseHandler');
        this.$router.push({path: '/seedCompanies'});
      },
      navigatorseedListedCenterHandler() {
        console.log('navigator methods > navigatorseedListedCenterHandler');
        this.$router.push({path: '/listedCenter'});
      },
      navigatorDynamicHandler() {
        console.log('navigator methods > navigatorDynamicHandler');
        this.$router.push({path: '/dynamic'});
      },
      navigatorPolicyHandler() {
        console.log('navigator methods > navigatorPolicyHandler');
        this.$router.push({path: '/policys'});
      },
      navigatorResourcelHandler() {
        console.log('navigator methods > navigatorResourcelHandler');
        this.$refs.resourceStoreRef.scrollIntoView();
      },
      navigatorBreedingHandler() {
        console.log('navigator methods > navigatorBreedingHandler');
        this.$router.push({path: '/breedingBase'});
      },
      navigatorLawsHandler() {
        console.log('navigator methods > navigatorLawsHandler');
        this.$router.push({path: '/laws'});
      },
    },
    components: {},
    computed: {
      ...mapGetters([
        'userSession',
        'userNotice'
      ])
    }
  };
  export default _Header;
</script>
