<template>
  <!-- 头部组件 -->
  <div class="shadow-sm fixed z-100 top-0 left-0 w-full bg-white">
    <!-- 顶部通栏 -->
    <TopBar />
    <!-- 导航栏 -->
    <div class="flex justify-between clear-both hidden-sm-and-down">
      <div class="flex flex-col w-full">
        <div class="flex justify-between menu-bg w-full py-3">
          <div class="xl:w-screen-xl m-auto flex justify-between">
            <Logo />
            <img src="http://img.gxbsnx.com/Temp/images/background/title_right.png" width="291" height="88" />
          </div>
        </div>
        <div class="w-full bg-white">
          <div class="xl:w-screen-xl m-auto">
            <Menu :data="navigations" />
          </div>
        </div>
      </div>
      <Login />
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入所需的图标
import {
  useConfigInfo,
  useLogo,
  useMenu,
  useToken,
  useUser
} from "~/composables/configState";
import {useI18n} from "#imports";
import Logo from "~/components/AppHeader/Logo/Logo.vue"
import {configWebsiteField, listCmsWebsiteField} from "~/api/cms/cmsWebsiteField";
import {getUserInfo} from "~/api/layout";
import Menu from "~/components/AppHeader/Menu/Menu.vue";
import TopBar from "~/components/AppHeader/TopBar/TopBar.vue";
import Login from "~/components/AppHeader/Login/Login.vue";

// 配置信息
const i18n = useI18n();
const config = useConfigInfo();
const logo = useLogo();
const token = useToken();
const user = useUser();
const navigations = useMenu();

const setNav = () => {
  navigations.value = navigations.value.map(item => {
    item.showChild = false
    item.childHeight = 0;
    return item
  })
}
setNav()

// 切换语言
const changLang = () => {
  const idBySpm = getIdBySpm(0);
  if(idBySpm?.startsWith('zh_CN')){
    i18n.setLocale('zh');
  }else if (idBySpm?.startsWith('en_US')){
    i18n.setLocale('en');
  }
}


const reload = async () => {

  // 切换语言
  changLang();

  // TODO 读取网站配置信息
  configWebsiteField({
    lang: i18n.locale.value
  }).then(res => {
    config.value = res;
    if(res?.siteName){
      localStorage.setItem('SiteName', res?.siteName)
    }
  })

  // 读取全局配置
  listCmsWebsiteField({
    categoryId: 0
  }).then(list => {
    logo.value = list.find(item => item.name === 'siteLogo')
  })
}


onMounted(() => {
  // 获取用户信息
  if (token.value) {
    getUserInfo().then(data => {
      user.value = data
    })
  }
  reload();
});
</script>

<style lang="scss">
@import 'assets/css/base.css';
@import 'assets/css/model.css';
//@import 'assets/css/main.css';
//@import 'assets/css/user.css';
//@import 'assets/css/index.css';
</style>
