<template>
  <div class="header">
    <div class="logo ">
      <a href="javascript:void(0);">
        <img src="../assets/img/logo.png" alt="logo图标">
        <h1>校园小飞侠</h1>
      </a>
    </div>
    <div class="header-menu">
      <router-link to="/home">主页</router-link>
      <a v-on:click="gotoSelf()">
        <el-badge is-dot
                  :hidden='countStart'
                  class="item">个人中心
        </el-badge>
      </a>
      <!-- 加入我们写在关于我们中 -->
      <router-link to="/aboutus">关于我们</router-link>
      <router-link to="/customerservice">我的客服</router-link>
      <router-link to="/suggest">投诉建议</router-link>
    </div>
    <div class="usercont">
      <img src="../assets/img/top-user.png" alt="用户头像">
      <div class="username">
        <em v-if='userName'>{{ userName }}</em>
        <em v-else>未登录</em>
      </div>
    </div>
    <div class="login-and-exit">
      <a v-if="!loginState"
         v-on:click="toLogin">登录</a>
      <a v-else
         v-on:click="handleUserLoginOut">退出</a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {mapState} from 'vuex'
import {getMessageCount} from '../api/message'

export default {
  data () {
    return {
      countStart: true,
      loginState: false,
      userName: '',
      identity: ''
    }
  },
  mounted () {
    this.userName = sessionStorage.getItem('username')
    this.identity = sessionStorage.getItem('identity')
    if (this.userName != null) {
      this.loginState = true
      this.getMsgCount()
    }
  },
  methods: {
    toLogin () {
      this.$router.push({path: '/login'})
    },
    getMsgCount () {
      getMessageCount().then(res => {
        console.log(res)
        if (res.data.success) {
          if (res.data.data > 0) {
            this.$store.commit('saveUserInfo', {msgLen: res.data.data})
            this.$notify({
              title: '登录成功',
              duration: 2000,
              message: '尊敬的' + this.userName + '您有' + res.data.data + '条消息,请前往我的消息查看!',
              type: 'info'
            })
            this.countStart = false
          }
        }
      })
    },
    gotoSelf () {
      if (this.identity === null) {
        this.$router.push({path: '/login'})
      } else if (this.identity == 3) {
        this.$router.push({path: '/person'})
      } else if (this.identity == 2) {
        this.$router.push({path: '/woker'})
      }
    },
    handleUserLoginOut () {
      this.$confirm(`确认退出`,
        '退出登录', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
        this.loginState = false
        sessionStorage.clear()
        this.$router.push({path: '/login'})
        this.$notify({
          title: '退出成功',
          duration: 2000,
          type: 'success'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    },
  }
}
</script>

<style scoped lang='scss'>
@import "../style/mixin";

$color: #34495e;
a {
  color: $color;
}

.link-active {
  background-color: #eff3f5;
  color: #3498db;
}

$header-height: 3rem;
.header {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  background-color: #fff;
  border-bottom: 0.05rem solid rgb(243, 240, 240);
  color: $color;
  // @include transition(.3s);
  cursor: pointer;
  z-index: 9999;
}

.logo {
  flex-grow: 2;
  margin-left: 30px;

  a {
    display: flex;
    align-items: center;
    width: 100%;

    img {
      display: block;
      max-width: 2.5rem;
      height: auto;
      margin-right: 0.5rem;
    }

    h1 {
      color: $color;
      font-size: 1rem;
      letter-spacing: 2px;
    }
  }

}

.header-menu {
  display: flex;
  justify-content: center;
  //width: 60%;
  min-width: 25rem + 2rem;

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: $header-height;
    font-size: 0.8rem;
    @include transition(.4s);

    &:hover {
      background-color: #eff3f5;
    }
  }
}

.usercont {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;

  img {
    display: block;
    max-width: 1.5rem;
    margin-right: 5px;
    height: auto;
  }

  .username em {
    color: #777;
    font-family: '微软雅黑';
  }
}

.login-and-exit {
  margin: 0 2rem 0 .5rem;

  a {
    @include set-inline-block;
    line-height: $header-height;
    margin: 0 .5rem;
    font-size: 0.7rem;

    &:hover {
      color: #F56C6C;
    }
  }
}

@media only screen and (max-width: 992px) {
  .login-and-exit a {
    line-height: 4rem;
  }
  .header-menu a {
    height: 4rem;
    width: 5rem;
  }
}

@media only screen and (max-width: 768px) {
  .header .logo {
    display: none;
  }
}
</style>
