<template>
  <!-- <Header/> -->
  <router-view class="content"/>
  <!-- <Footer/> -->
</template>

<script setup lang="ts">
import Header from "@/views/Header.vue";
import Footer from "@/views/Footer.vue";

// import * as api from "@/client";
import {onBeforeMount, onMounted,watch, provide, ref} from "vue";
import {useSettingsStore} from "@/stores/config.ts";

import axios from "axios";
import {getRandomNumInt} from "@/utils/size.ts";


const base_url = axios.defaults.baseURL

// const registerSession = async () => {
//   console.log('register ...')
//   const role = settingsStore.$state.role_name

//   const response = await fetch(`${base_url}/register?role=${role}`)
//   const res = await response.json()
//   console.log('res: ', res)
//   return res['session_id']
// }

// watch(() => settingsStore.$state.role_name, async (role_name: any) => {
//   console.log('>>>>> role updated', role_name)
//   let session_id = await registerSession()
//   if (!session_id) {
//     console.log('register session failed')
//     session_id = getRandomNumInt(100000, 999999)
//   }
//   // @ts-ignore
//   sessionsStore.$patch({current_session_id: session_id + ''})
//   console.log('session id: ', sessionsStore.$state.current_session_id)
// })

onMounted(async () => {
  // console.log('app mounted', settingsStore.$state)

  // let session_id = await registerSession()
  // if (!session_id) {
  //   console.log('register session failed')
  //   session_id = getRandomNumInt(100000, 999999)
  // }
  // // @ts-ignore
  // sessionsStore.$patch({current_session_id: session_id + ''})
  // console.log('session id: ', sessionsStore.$state.current_session_id)
})

</script>

<style scoped>
.content {
  background-color: white;
  max-width: 1280px;
  min-height: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
</style>
