<script lang="ts">
function renderIcon(icon: Component): () => VNode {
  return () => h(NIcon, null, { default: () => h(icon) });
}
</script>

<script setup lang="ts">
import ThemeSwitch from '@/components/theme-switch.vue';
import { useStationListQuery } from '@/composables/query';
import { useStationStore } from '@/stores/station';
import { useUserStore } from '@/stores/user';
import { AlertFilled, /* AreaChartOutlined, */ FileTextFilled, HomeFilled, LogoutOutlined, VideoCameraFilled } from '@vicons/antd';
import { ChevronDown } from '@vicons/carbon';
import { NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { h, onBeforeMount, onBeforeUnmount, ref, type Component, type VNode } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const stationStore = useStationStore();
const { stationList } = storeToRefs(stationStore);

useStationListQuery();

onBeforeUnmount(() => {
  stationList.value = [];
});

onBeforeMount(() => {
  userStore.userGetInfo().catch((err) => window.$message.error(err));
});

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

const menuOptions = ref<MenuOption[]>([
  {
    label: () => h(RouterLink, { to: '/dashboard' }, { default: () => '今日数据看板' }),
    key: '/dashboard',
    icon: renderIcon(HomeFilled),
  },
  {
    label: () => h(RouterLink, { to: '/device' }, { default: () => '实时设备状态' }),
    key: '/device',
    icon: renderIcon(VideoCameraFilled),
  },
  {
    label: () => h(RouterLink, { to: '/alarm' }, { default: () => '设备告警记录' }),
    key: '/alarm',
    icon: renderIcon(AlertFilled),
  },
  // {
  //   label: () => h(RouterLink, { to: '/statistics' }, { default: () => '设备性能统计' }),
  //   key: '/statistics',
  //   icon: renderIcon(AreaChartOutlined),
  // },
  {
    label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }), // '系统日志记录'
    key: '/log/vimp-log',
    icon: renderIcon(FileTextFilled),
    // children: [
    //   {
    //     label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }),
    //     key: '/log/vimp-log',
    //   },
    // ],
  },
]);

const dropdownOptions = ref<DropdownOption[]>([
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogoutOutlined),
    onClick: async () => {
      await userStore.userLogout();
      router.push('/login');
    },
  },
]);

const selectDropdownOption = (key: string, option: DropdownOption) => {
  if (typeof option['onClick'] === 'function') {
    option['onClick']();
  }
};

const toDashboardPage = () => router.push('/');
</script>

<template>
  <NScrollbar x-scrollable style="width: 100vw; height: 100vh">
    <NLayout has-sider :content-style="{ 'min-width': '1400px' }">
      <NLayoutSider bordered collapsed :collapse-mode="'width'" :collapsed-width="60">
        <NMenu collapsed :collapsed-width="60" :collapsed-icon-size="18" :value="route.path" :options="menuOptions" />
      </NLayoutSider>
      <NLayout :native-scrollbar="false">
        <NLayoutHeader bordered class="app-layout-header">
          <NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
            <span style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="toDashboardPage">网络设备管理平台</span>
            <NFlex align="center" :size="8">
              <ThemeSwitch />
              <NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
                <NButton secondary icon-placement="right" style="margin-right: 8px">
                  <template #default>
                    <span>{{ userInfo?.nickName ?? '' }}</span>
                  </template>
                  <template #icon>
                    <NIcon :component="ChevronDown" />
                  </template>
                </NButton>
              </NDropdown>
            </NFlex>
          </NFlex>
        </NLayoutHeader>
        <NLayoutContent class="app-layout-content">
          <RouterView />
        </NLayoutContent>
        <NLayoutFooter bordered class="app-layout-footer" />
      </NLayout>
    </NLayout>
  </NScrollbar>
</template>

<style scoped lang="scss">
$layout-header-height: 48px;
$layout-footer-height: 48px;

.app-layout-header {
  height: $layout-header-height;
}

.app-layout-content {
  height: calc(100vh - $layout-header-height - $layout-footer-height);
}

.app-layout-footer {
  height: $layout-footer-height;
}
</style>
