<template>
  <div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
      <div class="time-msg">
        <div class="line1">{{timeZone}}&nbsp;&nbsp;&nbsp;&nbsp;{{topTime}}</div>
        <div class="line2">{{topDate}}</div>
      </div>
      <div class="base-msg">
        <div class="avatar">
          <el-dropdown>
            <img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><svg-icon icon-class="helpbtn"/>帮助文档</el-dropdown-item>
              <el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn"/>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="use-msg">
          <div class="line1">{{nickname}}</div>
          <div class="line2">{{dept}}</div>
        </div>
      </div>
    </div>
</template>
<script>
import moment from 'moment'
import { getUser } from "@/api/system/user.js";
import {getPath} from "@/utils/ruoyi";
export default {
  name: 'navRight',
  data() {
    return {
      topDate: '',
      topTime: '',
      timeZone: '',
      timer: '',
      dept:' ',
      nickname: this.$store.getters.nickname
    }
  },
  props: {
    blackTitle: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  mounted() {
    this.getUserMsg()
    this.getTime()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getTime() {
      let _this = this
      this.timer = setInterval(function () {
        _this.topDate = moment().format('YYYY/MM/DD')
        let temp = moment().format('A-hh:mm').split('-')
        _this.timeZone = temp[0]
        _this.topTime = temp[1]
      }, 1000)
    },
    getUserMsg() {
      let id = this.$store.getters.userId
      getUser(id).then(res => {
        this.dept = res.data.dept ? res.data.dept.name : ''
      })
    },
    async logout() {
      this.$modal.confirm('确定注销并退出系统吗？', '提示').then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = getPath('/');
        })
      }).catch(() => {});
    }
  }
}
</script>
<style lang='scss' scoped>
.right-msg {
  float: right;
  height: 100%;
  font-size: 14px;
  // color: #fff;
  // padding-top: 15px;
  // padding-right: 38px;
  .time-msg {
    display: inline-block;
    margin-right: 30px;
  }
  .base-msg {
    display: inline-block;
    .avatar {
      display: inline-block;
      margin-right: 10px;
    }
    .use-msg {
      display: inline-block;
    }
  }
  .line1 {
    height: 19px;
  }
  .line2 {
    height: 19px;
    opacity: 0.65;
  }
}
</style>