<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-11-21 17:28:10
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2022-12-19 17:39:02
 * @FilePath: /fe-stu/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<!--
 -->
	<div id="container">

		<!-- <div id="nav">
      <router-link
        v-for="item in routes"
        :key="item.path"
        :to="item.path"
        :class="{
          link: true,
          active: name === item.name,
        }"
      >
        {{ item.name }}
      </router-link>
    </div> -->
		<main style="z-index: 2">
			<router-view />
		</main>
	</div>
</template>
<script setup>
import {boeRequest, request} from "@/api/request";
import { GET_USER_INFO } from "@/api/ThirdApi";
import { useStore } from "vuex";
import { onMounted } from "vue";
import {useRoute} from "vue-router/dist/vue-router";
import {USER_INFO} from "@/api/api";

console.log("版本2.1.5------------");
const store = useStore();
const {path} = useRoute();
onMounted(() => {
  path === '/login' || getUserInfo();
});

function getUserInfo() {
  if(import.meta.env.MODE ==='development' || import.meta.env.MODE ==='test'){
    request(USER_INFO,{}).then(res=>{
      store.commit("SET_USER", res.data);
    })
  }else{
    boeRequest(GET_USER_INFO).then((res) => {
      res.result.avatar = res.result.avatar || '/800e23f7-b58c-4192-820d-0c6a2b7544cc.png'
      store.commit("SET_USER", res.result);
    });
  }
}
</script>
<style lang="scss">
#app {
	// font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
	// sans-serif;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
		Microsoft YaHei, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
	height: 100%;
}

#container {
	display: flex;
	width: 100%;
	min-height: 100%;
	background-color: rgba(242, 245, 247, 1);

	// background-color: #ccc;
	#nav {
		width: 220px;
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 30px 0;
		box-sizing: border-box;
		background: #f1f1f1;
		box-shadow: 0 5px 15px 8px rgba(1, 22, 54, 0.795);

		.link {
			text-decoration: none;
			color: rgb(0, 0, 0);
			padding: 10px;
			transition: all 0.4s;
			text-align: center;

			&:hover {
				background: rgba(4, 37, 223, 0.274);
				color: #f1f1f1;
			}

			&.active {
				color: #f1f1f1;
				background: rgba(17, 120, 255, 0.74);
			}
		}
	}

	main {
		flex: 1;
		width: 100%;
		// padding: 30px;
		box-sizing: border-box;
	}
}
</style>
