<template>
  <div class="nav-bar-user">
    <div class="nav-bar-user-icon">
      <el-dropdown class="nav-bar-dropdown" :hide-on-click="false">
        <!-- <el-avatar :size="50" icon="el-icon-user-solid"></el-avatar> -->
        <img :src="userIcon" alt="" class="nav-bar-user-icon-img" />
        <span>{{ userInfo[0].value ? userInfo[0].value : '/' }}</span>
        <el-dropdown-menu slot="dropdown" class="nav-bar-dropdown-menu">
          <div class="nav-bar-dropdown-menu-list">
            <div class="nav-bar-dropdown-menu-list-box" v-for="(item, index) in userInfo" :key="index">
              <label>{{ item.label }}&nbsp;:</label>
              <el-tooltip effect="dark" :content="item.value" placement="top">
                <span class="ellipeis-text">{{ item.value ? item.value : '/' }}</span>
              </el-tooltip>
            </div>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="nav-bar-user-menu">
      <el-dropdown class="nav-bar-dropdown" :hide-on-click="false">
        <div class="nav-bar-user-menu-box">
          <i class="el-icon-setting"></i>
          <span>设置</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <!-- el-dropdown-item 不支持@click  @click.native  给元素加上原生点击事件-->
          <el-dropdown-item @click.native="change">修改密码</el-dropdown-item>
          <el-dropdown-item @click.native="handleFullScreen">全屏</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="nav-bar-user-menu-box" @click="out">
        <i class="el-icon-switch-button"></i>
        <span>退出</span>
      </div>
    </div>
    <ChangePassword ref="ChangePassword"></ChangePassword>
  </div>
</template>

<script>
import { confirmModal } from '@/utils/element-ui'
import screenfull from 'screenfull'
import userIcon from '@/assets/images/user.png'

const useData = [
  { label: '用户名称', value: '' },
  { label: '手机号码', value: '' },
  { label: '用户邮箱', value: '' },
  { label: '所属部门', value: '' },
  { label: '所属角色', value: '' },
  { label: '创建日期', value: '' }
]
export default {
  name: 'User',
  data() {
    // 这里存放数据
    return {
      userIcon,
      userInfo: useData, // 用户信息
      showChangePassword: false,
      isFullscreen: false //是否全屏
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.resetUserData()
    this.init()
  },
  methods: {
    change() {
      this.$refs.ChangePassword.changeShow()
    },
    async loginOut() {
      this.$store.dispatch('user/loginOut')
    },
    out() {
      confirmModal('是否退出登录？', this.loginOut)
    },
    resetUserData() {
      const { userName, phonenumber, email, deptName, roles, createTime } = this.$store.state.user.userInfo.user
      const rolesArr = roles.map((item) => item.roleName).join(', ')
      this.userInfo[0].value = userName
      this.userInfo[1].value = phonenumber
      this.userInfo[2].value = email
      this.userInfo[3].value = deptName
      this.userInfo[4].value = rolesArr
      this.userInfo[5].value = createTime
    },
    // 设置全屏
    handleFullScreen() {
      if (!screenfull.isEnabled) {
        this.$message.info('您的浏览器版本过低，不支持全屏浏览')
        return false
      }
      screenfull.toggle()
    },
    // 绑定全屏的值
    changeFullscreen() {
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on('change', this.changeFullscreen)
      }
    },
    // 关闭事件
    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off('change', this.changeFullscreen)
      }
    }
  },
  beforeDestroy() {
    // 销毁
    this.destroy()
  }
}
</script>

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