<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>
      <router-view />
    </main>
  </div>
</template>
<script setup>
import {onMounted} from "vue";
import {useStore} from "vuex";
import {boeRequest, request} from "@/api/request";
import {GET_USER_INFO, GET_USER_LIST} from "@/api/ThirdApi";


import {USER_INFO} from "@/api/api";

console.log("版本3.0.5------------");
const store = useStore();

onMounted(() => {
  window.location.href.includes("/login") || getUserInfo();
});

function getUserInfo() {
  console.log("开始身份验证")
  if (
      import.meta.env.MODE === "development" ||
      import.meta.env.MODE === "test"
  ) {
    console.log("开始test身份验证")
    request(USER_INFO, {}).then((res) => {
      store.commit("SET_USER", res.data);
    });
  } else {
    console.log("开始pre身份验证")
    // 修改生产环境验证 GET_USER_INFO 接口不存在 选择GET_USER_LIST
    // boeRequest(GET_USER_INFO).then((res) => {
    //   res.result.avatar =
    //     res.result.avatar || "/800e23f7-b58c-4192-820d-0c6a2b7544cc.png";
    //   store.commit("SET_USER", res.result);
    // });

    boeRequest(GET_USER_LIST, {}).then((res) => {
      store.commit("SET_USER", res.data);
    });
  }
  console.log("------结束身份验证")
}
</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;
  flex-direction: column;
  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>
