<template>
  <n-layout has-sider>
    <n-layout-sider ref="sider" bordered collapse-mode="width" inverted :collapsed-width="64" show-trigger :width="240" :collapsed="collapsed" :show-trigger="false" @collapse="collapsed = true" @expand="collapsed = false">
      <div ref="consoleSiderHeader" class="" @click="collapsed = false">
        <n-menu :collapsed="collapsed" inverted :collapsed-width="64" :icon-size="20" :collapsed-icon-size="26" :options="menuOptions" />
      </div>
      <div class="menu">
        <console-menu :collapsed="collapsed" />
      </div>
    </n-layout-sider>
    <n-layout>
      <n-layout-header :style="{ height: navH + 'px' }">
        <div class="header bg-[#f2e8fc] flex items-center justify-between">
          <div class="index ml-4">{{ route.meta.name }}</div>
          <div class="info flex items-center">
            <div class="wea">
              <wea></wea>
            </div>
            <div class="my">
              <div class="uinfo mx-8 text-white flex items-center">
                <n-avatar round size="small" :src="userinfo.avaUrl" />
                <div class="ml-2"></div>
                <n-button text class="userinfo">
                  {{ userinfo.nickname }}
                </n-button>
              </div>
            </div>
            <!-- <n-button color="#8a2be2" size="small" class="mr-4" @click="goHome"> 回首页 </n-button> -->
          </div>
        </div>
      </n-layout-header>
      <n-layout-content :content-style="cst" :native-scrollbar="false">
        <router-view></router-view>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script setup>
import consoleMenu from "@/components/consoleMenu.vue";
import wea from "@/components/wea.vue";
import { usesizeStore } from "@/stores/size.js";
import { MdMenu } from "@vicons/ionicons4";
import cookie from "vue-cookies";
import { useRoute, useRouter } from "vue-router";

const size = usesizeStore();
const userinfo = cookie.get("userinfo");
const collapsed = ref(false);
let consoleSiderHeader = ref(null);
let navH = ref(0);
const cst = ref({});

const menuOptions = [
  {
    label: "控制台",
    key: "0",
    disabled: true,
    icon: () => h(NIcon, { class: "console-sider-header" }, { default: () => h(MdMenu) }),
  },
];

const route = useRoute();
const router = useRouter();

onMounted(() => {
  navH.value = consoleSiderHeader.value.clientHeight;
  size.setConH(document.documentElement.clientHeight - navH.value);
  cst.value = {
    height: document.documentElement.clientHeight - navH.value + "px",
  };
});

function goHome() {
  router.replace("/");
}
</script>

<style scoped>
.header {
  height: 100%;
}
:deep(.n-layout-sider) {
  height: 100vh;
}
.col {
  margin: 0 auto;
}
.nocol {
  margin-left: 10px;
}
:deep(.n-menu-item-content--disabled) {
  opacity: unset !important;
}
:deep(.console-sider-header) {
  color: #fff;
}
</style>
