<script setup lang="ts">
import YlLayout from "@/components/yl-layout/layout.vue";
import YlLoginPage from "@/pages/login/index.vue";
import { message, userinfo } from "@/store/store.ts";
import { getCookie } from "@/utils/cookie.ts";
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import { watch } from "vue";
import _ from "lodash";
import { updateMenu } from "@/utils/menu.ts";

// 初始化websocket
let ws;
if (!ws) {
  ws = import.meta.env.PROD
    ? new WebSocket(`wss://${location.hostname}/ws`)
    : new WebSocket(`ws://localhost:8080/ws`);
}
ws.onopen = () => console.log("websocket已连接");
ws.onmessage = (e) => (message.online = Number(e.data));
// 用户自动登录
const { runAsync: autoLogin } = useRequest(() => myRequest(`/api/user/auto`), {
  manual: true,
});
// 获取用户信息
const { data: getUserinfo } = useRequest(
  () => myRequest(`/api/user`, userinfo.token, {}, "get"),
  { refreshDeps: [() => userinfo.token], ready: () => Boolean(userinfo.token) },
);
// 初始化菜单信息
updateMenu();
// 刷新页面保存登录状态
if (getCookie("is_login") && getCookie("token")) {
  // cookie存在登录信息
  userinfo.login = true;
  userinfo.token = getCookie("token");
} else if (getCookie("deviceId")) {
  // cookie不存在登录信息，设置了自动登录
  userinfo.login = true;
  autoLogin()
    .then(() => {
      userinfo.login = true;
      userinfo.token = getCookie("token");
    })
    .catch(() => {
      userinfo.login = false;
      userinfo.token = "";
    });
} else {
  userinfo.login = false;
  userinfo.token = "";
}

// 获取用户信息后更新状态
watch(getUserinfo, () => {
  userinfo.username = _.get(getUserinfo, "value.data.username", "");
  userinfo.userinfo = _.get(getUserinfo, "value.data", {});
  userinfo.type = _.get(getUserinfo, "value.data.type", "") || "user";
});
</script>

<template>
  <div>
    <yl-login-page v-if="!userinfo.login" />
    <yl-layout v-if="userinfo.login"><router-view></router-view> </yl-layout>
  </div>
</template>

<style scoped></style>
