<template>
  <el-container>
    <el-header class="header">
      <div class="logo">
        <el-icon><img alt="" class="logo" src="/HangZhouIcon.png"/></el-icon>
      </div>
      <div class="weather">
        电子职高校内交流平台
      </div>
      <div class="user">
        <el-avatar :size="50" :src="headimgBase64" style="margin-right: 10px"/>
        <el-dropdown @command="handlerUserSettingsCommand">
        <span class="el-dropdown-link" style="color: #000000">
          {{ username }}<el-icon class="el-icon--right"><ArrowDown/></el-icon>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="settings">用户设置</el-dropdown-item>
              <el-dropdown-item command="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="maxWidth + 'px'" class="aside">
        <el-menu
            :collapse="false"
            :default-active="active"
            @mouseenter="onMouseEnter"
            @mouseleave="onMouseLeave"
            :collapse-transition="true"
            router
            class="menu"
          >
            <el-menu-item index="/home/chat">
              <el-icon>
                <ChatDotRound/>
              </el-icon>
              <template #title>聊天室</template>
            </el-menu-item>
            <el-menu-item index="/home/voice">
              <el-icon>
                <Mic/>
              </el-icon>
              <template #title>语音聊天</template>
            </el-menu-item>
            <el-menu-item index="/home/file">
              <el-icon>
                <Files/>
              </el-icon>
              <template #title>文件传输</template>
            </el-menu-item>
            <el-menu-item index="/home/setting">
              <el-icon>
                <Setting/>
              </el-icon>
              <template #title>个人设置</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
      <div class="mask" v-if="!isCollapse"></div>
      <el-main class="main-content">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import {ArrowDown, ChatDotRound, Files, Mic, Setting} from '@element-plus/icons-vue'
import {onBeforeMount, onMounted, ref} from 'vue'
import {ElMessage} from "element-plus";
import {useStore} from "../../store";
import {useRouter} from "vue-router";

const maxWidth = ref<number>(200);
const active = ref<string>("/home/chat");
//主逻辑
const isCollapse = ref<boolean>(true);
const headimgBase64 = ref<string>();
const userToken = ref<string>();
const username = ref<string>();
const store = useStore();
const router = useRouter();

onBeforeMount(() => {
  if (window.innerWidth < 600){
    maxWidth.value = 64;
  }
})
onMounted(() => {
  // 将store中数据存入当前页面
  if (store.userinfo !== null){
    username.value = store.userinfo.username;
    headimgBase64.value = "data:image/png;base64," + store.userinfo.headimg;
    userToken.value = window.localStorage.getItem("token") as string;
  }
  active.value = window.location.hash.replace("#","")
})
const handlerUserSettingsCommand = (command: string) =>{
  // 处理下拉菜单的指令
  console.log(command)
  switch (command) {
    case "settings":
      // 跳转至个人设置页面
      router.push("/home/setting");
      break;
    case "exit":
      // 清空pinia中userinfo数据
      store.$reset();
      //   清空token
      window.localStorage.clear()
      ElMessage.success("成功退出登录，返回登陆页面");
      router.push('/')
      break;
    //   出现未知指令进行处理
    default:
      ElMessage.error("CNM出问题了，请将此消息内容复制并发送给网站管理员   command=" + command)
      break;
  }
}
// 菜单栏获取鼠标焦点进行动画展示
const onMouseEnter = () =>{
  isCollapse.value = false
  maxWidth.value = 200;
}
const onMouseLeave = () =>{
  isCollapse.value = true
  maxWidth.value = 64;
}
</script>

<style scoped>
.header {
  display: flex;
  background-color: rgba(0, 97, 171, 75%);
  justify-content: space-between;
  align-items: center;
}

img.logo {
  width: 40px;
  height: 40px;
}

div.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

div.user {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.aside {
  transition: width 500ms;
  overflow-x: hidden;
  will-change: width;
}
@keyframes show-mask {
  0% {
    background-color: rgba(0, 0, 0, 0%);
  }
  100% {
    background-color: rgba(0, 0, 0, 30%);
  }
}
@media screen and (max-width: 600px) {
  .aside {
    position: absolute;
    left: 0;
    z-index: 9999;
    height: calc(100vh - 60px);
    background: white;
  }
  .main-content {
    margin-left: 64px;
  }
  .mask {
    position: absolute;
    z-index: 9998;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 30%);
    backdrop-filter: blur(6px);
    animation: show-mask 500ms;
  }
}
.weather {
  width: 60%;
  text-align: center;
  color: black;
  font-weight: bolder;
}
.el-menu-item .el-icon {
  margin-right: 20px;
}
.main-content {
  width: 100%;
  height: 90vh;
  overflow-x: hidden;
  overflow-y: hidden;
  /*background: rgba(250,250,250);*/
}
</style>