<template>
  <div class="header">
    <div class="logoTitle">视频监控可视化平台</div>
    <div class="menuBox">
      <vSidebar></vSidebar>
      <div class="userInfo">
        <div class="header-user-con">
          <!-- 用户头像 -->
          <div class="user-avator">
            <img src="../assets/img/user.jpeg" />
          </div>
          <!-- 用户名下拉菜单 -->
          <el-dropdown
            class="user-name"
            trigger="click"
            @command="handleCommand"
          >
            <span class="el-dropdown-link">
              {{ userName }}
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item>
              <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <password-dialog ref="passwordref"></password-dialog>
  </div>
</template>
<script>
import vSidebar from "./Sidebar.vue";
import passwordDialog from "../components/passwordDialog.vue";
export default {
  components: {
    vSidebar,
    passwordDialog,
  },
  data() {
    return {
      userName: localStorage.getItem("userName"),
    };
  },
  methods: {
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      switch (command) {
        case "noticeShow": //公告
          console.log(command);
          break;
        case "changePwd": //修改密码
          this.$refs.passwordref.display();
          break;
        case "loginout": //退出登录
          this.$message({
            duration: 1500,
            showClose: true,
            message: "退出成功",
            type: "success",
          });
          this.$store.commit("REMOVE_INFO");
          this.$router.push("/login");
          break;
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less">
.header {
  width: calc(100% - 32px);
  height: 56px;
  background: #169e8c;
  line-height: 56px;
  padding: 0px 16px;
  display: flex;
  .logoTitle {
    font-size: 20px;
    color: #fff;
    padding-right: 16px;
  }
  .menuBox {
    flex: 1;
    display: flex;
    justify-content: space-between;
    .userInfo {
      .header-user-con {
        display: flex;
        height: 56px;
        align-items: center;
        .user-avator {
          margin-left: 16px;
          img {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
        .user-name {
          margin-left: 8px;
          .el-dropdown-link {
            color: #fff;
            cursor: pointer;
          }
        }

        .el-select {
          width: 90px;
        }
      }
    }
  }
}
</style>
