<template>
  <div class="user_card">
    <el-dropdown size="medium" placement="bottom" @command="experMode">
      <span class="el-dropdown-link" @click="experMode">
        <i class="el-icon-full-screen icon_full"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>全屏模式</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div style="margin-left: 20px;display: flex;align-items: center;">
      <el-dropdown size="medium" placement="bottom-end" @command="handleCommand">
        <div style="display: flex;align-items: center;cursor: pointer;">
          <div class="el-dropdown-link">
            <el-image class="user_img" :src="require('@/assets/images/user.png')"></el-image>
          </div>
          <span class="user_title">{{userList.username}}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import {
    resetRouter
  } from '../../router'
  import {
    mapActions
  } from 'vuex'
  export default {
    name: 'UserInfo',
    data() {
      return {
        userList: {},
        fullScreen: false,
      }
    },
    mounted() {
      const arr = localStorage.getItem('userList')
      this.userList = JSON.parse(arr)
    },
    methods: {
      ...mapActions(['Logout']),
      handleCommand(command) {
        const {
          Logout
        } = this
        if ('loginout' == command) {
          Logout().then((res) => {
            localStorage.removeItem('T_tokey');
            localStorage.removeItem('username');
            resetRouter()
            this.$router.push('/login');
          })
        }
      },
      // 全屏
      experMode() {
        if (this.fullScreen) {
          this.fullScreen = false
          this.exitFullscreen()
        } else {
          this.fullScreen = true
          let element = document.documentElement;
          this.launchFullscreen(element);
        }
      },
      launchFullscreen(element) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.mozRequestFullscreen) {
          element.mozRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      },
      exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
    }
  }
</script>

<style lang="scss">
  .el-dropdown-link {
    cursor: pointer;
  }

  .user_card {
    position: relative;
    display: flex;
    align-items: center;
  }

  .icon_full {
    font-weight: 500;
    font-size: 22px;
  }

  .user_img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid #E4E7ED !important;
  }

  .user_title {
    margin-left: 5px;
    font-size: 16px;
  }
</style>
