<template>
  <div class="homeWrap">
    <el-container class="main_container">
      <el-aside width="180px">
        <SideBar></SideBar>
      </el-aside>
      <el-container style="margin-left: 180px;">
        <el-header>
          <NavBar></NavBar>
        </el-header>
        <el-main>
          <MainApp></MainApp>
        </el-main>
        <el-footer>
          <div class="footer-left">
            <span>{{ SITE_NAME }} {{ COPYRIGHT_TEXT }}</span>
            <span class="separator">|</span>
            <span class="icp-link" @click="openSiteQuery">{{ ICP_NUMBER }}</span>
          </div>
          <div class="footer-right">
            <el-avatar :size="24" class="github-icon" @click="openGithub"
              src="https://github.githubassets.com/favicons/favicon.svg" />
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang='ts'>
import MainApp from '../layout/MainApp.vue'
import NavBar from "../layout/NavBar.vue"
import SideBar from "../layout/SideBar.vue"
import { settingsStore } from "@/store/modules/settings"
import { SITE_NAME, COPYRIGHT_TEXT, ICP_NUMBER, ICP_QUERY_URL } from "@/const/site"

// -- IMPORT --
const useSettingsStore = settingsStore()

// -- REACTIVE OBJECT --

// -- REF OBJECT --

// -- EVENT DEFINITION
const iniPage = () => {
  const screenWidth = document.body.clientWidth
  if (screenWidth < 1000) {
    useSettingsStore.settings.isMobile = true
    // isSider.value = false
    // isCollaps.value = true
  } else if (screenWidth >= 1000 && screenWidth < 1200) {
    useSettingsStore.settings.isMobile = false
    // isSider.value = false
    // isCollaps.value = true
  } else {
    useSettingsStore.settings.isMobile = false
    // isSider.value = true
    // isCollaps.value = false
  }
}

const openGithub = () => {
  let href = 'https://github.com/simple321vip'
  window.open(href, '_blank')
}

const openSiteQuery = () => {
  window.open(ICP_QUERY_URL, '_blank')
}

/**
 * AUTO INVOKE FUNCTION
 */
iniPage()

</script>

<style scoped>
.el-header {
  border-bottom-style: solid;
  border-bottom-width: 0.5px;
  border-bottom-color: rgba(151, 151, 151, 0.3);
}

.el-main {
  /* 让 main 区占满 header 与 footer 之间的剩余空间，
     内容多了 main 内部滚动，footer 永远钉在 layout 底部 */
  padding: 16px;
  flex: 1;
  min-height: 0;          /* flex item 默认 min-height: auto 会阻止收缩 */
  overflow-y: auto;
}

.el-aside {
  margin-left: -10px;
  background: #191a23;
  position: fixed;
}

.el-footer {
  /* flex: 0 0 auto 让 footer 保持自身高度（不撑开、不收缩） */
  flex: 0 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid rgba(151, 151, 151, 0.2);
  font-size: 16px;
  color: #666;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-right {
  display: flex;
  align-items: center;
}

.separator {
  color: #ccc;
}

.icp-link {
  cursor: pointer;
  user-select: none;
}

.icp-link:hover {
  color: #409eff;
}

.github-icon {
  /* 跟 footer 文字 baseline 对齐 */
  vertical-align: middle;
  cursor: pointer;
}

.main_container {
  height: 100%;
}

.homeWrap {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
</style>
