<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧导航栏 -->
      <el-aside class="nav-aside">
        <Appaside></Appaside>
      </el-aside>
      <!-- 右侧主体内容 -->
      <el-main class="nav-main">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import Appaside from "/src/components/Appaside.vue";
import { ref, watch, onMounted, onUnmounted } from "vue";
import { getOtp } from "@/api/account";
const user = ref(null); // 用户信息
import { goEasyLink } from "@/utils/goeasy.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {getPromiseStorage } from "@/utils/storage.js";
const router = useRouter();
//自动链接IM
function autoLinkIM() {
  getOtp()
    .then((res) => {
      const data = {
        id: String(user.value.id),
        avatar: user.value.headerIcon,
        nickname: user.value.nickName,
        key: res,
      };
      goEasyLink(data)
        .then(() => {
           console.log("IM链接成功");
        })
        .catch((err) => {
           ElMessage.error("聊天系统链接失败");
           router.push("/");
        });
    })
    .catch((err) => {
      ElMessage.error("聊天系统获取失败");
      router.push("/");
    });
}

onMounted(() => {
  getPromiseStorage("user")
    .then((res) => {
      user.value = res;
      autoLinkIM() //自动链接IM
    })
    .catch((err) => {
      console.log(err);
    });
});
</script>

<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}
.common-layout {
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/bg.png);
  background-size: 100% 100%;
}
.nav-main {
  width: 95vw;
  height: 100vh;
}
.nav-aside {
  width: 5vw;
  height: 100vh;
  // background-image: linear-gradient(0deg, @bg-Sidebar-color-top, @bg-color);
  // border: 2px solid @border-color;
}
</style>
