<template>
  <div class="header-bar">
    <a class="toggle-btn" @click="collapseChange">
      <i class="fa fa-navicon" style="font-size:15px;"></i>
    </a>
    <div>
      <b style="font-size:15px;">您好：{{ employee_info.name }}</b>
    </div>
    <div style="margin-left:15px;">
            <span style="color:#7A7676; font-size:13px;">
                上次登录时间：{{ employee_info.last_login_time ? $moment(employee_info.last_login_time * 1000).format('YYYY-MM-DD HH:mm') : 'N/A' }}
            </span>
    </div>
    <el-popover placement="bottom" trigger="click" width="280">
      <div class="personal-profile-drawer">
        <div class="personal-brief-container">
          <img v-bind:src="employee_info.img_url" class="img-circle" style="margin-bottom:6px;"/>
          <br/>
          <span class="text-name" v-if="employee_info.manager_type == 4">
                        {{ employee_info.name }}
                        ／
                        {{ employee_info.manager_type_name }}
                    </span>
          <span class="text-name" v-else>
                        {{ employee_info.name }}
                        ／
                        {{ employee_info.dept_name ? employee_info.dept_name : '未设定部门' }}
                        ／
                        {{ employee_info.manager_type_name }}
                    </span>
          <br/>
          <span class="text-date"
                v-if="employee_info.manager_type < 4 && !isNaN(employee_info.accedence_time) && employee_info.accedence_time > 0">
                        入职日期：{{ $moment(employee_info.accedence_time * 1000).format('YYYY年MM月DD日') }}
                    </span>
        </div>
        <div style="padding:0px;">
          <ul class="personal-menu-list">
            <li @click="openPersonalInfoDialog">
              <a class="menu-list-item">
                <i class="fa fa-fw fa-user-circle-o"></i>
                <span style="margin-left:8px;">个人资料</span>
              </a>
            </li>
            <li @click="openPasswordDialog">
              <a class="menu-list-item">
                <i class="fa fa-fw fa-lock"></i>
                <span style="margin-left:8px;">修改密码</span>
              </a>
            </li>
            <li>
              <a class="menu-list-item">
                <i class="fa fa-fw fa-wechat"></i>
                <span style="margin-left:8px;">绑定微信</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="button-bar">
          <el-button type="danger" @click="toLoginPage">安全退出</el-button>
        </div>
      </div>
      <el-button slot="reference">
        <a>
          <img v-bind:src="employee_info.img_url" class="header-bar-avatar"/>
          <span style="margin-left:6px; font-size:15px;">{{ employee_info.name }}</span>
        </a>
      </el-button>
    </el-popover>
  </div>
</template>
<script>
  import eventBus from './eventBus.js'

  export default {
    data() {
      return {
        employee_info: {}
      }
    },
    methods: {
      collapseChange: function () {
        this.isCollapsed = !this.isCollapsed
        eventBus.$emit('isCollapsed', this.isCollapsed)
        this.$emit('is-collapsed', this.isCollapsed)
      },
      openPasswordDialog: function () {
        eventBus.$emit('setDialogPasswordVisible', true)
      },
      openPersonalInfoDialog: function () {
        eventBus.$emit('setDialogPersonalInfoVisible', true)
      },
      toLoginPage: function () {
        window.location.href = "http://127.0.0.1:8080/login"
        localStorage.removeItem("begin")
      },
      getStorageItem: function (itemName) {
        try {
          let profileStr = localStorage.getItem(itemName)
          return JSON.parse(profileStr)
        } catch (err) {
          return null;
        }
      }
    },
    created() {
      //获取缓存中的个人信息
      let profile = this.getStorageItem('profile')
      let begin = this.getStorageItem('begin')
      if (!profile || !begin || isNaN(begin)) {
        return window.location.href = "http://127.0.0.1:8080/login"
      }
      let currentTime = new Date().getTime()
      //登录超时时间为3小时
      if (currentTime - begin > 3 * 60 * 60 * 1000) {
        localStorage.removeItem('begin')
        return window.location.href = "http://127.0.0.1:8080/login"
      }
      //获取个人信息
      this.employee_info = profile
    }
  }
</script>
