<script setup>
import { h, ref, onMounted, onUnmounted, onActivated } from "vue";
import {
  RouterLink,
  useRoute,
  useRouter,
  onBeforeRouteUpdate,
  onBeforeRouteLeave,
} from "vue-router";
import { invoke } from '@tauri-apps/api/tauri'
import { emit, listen } from "@tauri-apps/api/event"

import {
  NButton,
  NSpace,
  NIcon,
  NMenu,
  NScrollbar,
} from "naive-ui";

console.log('Discove 初始化');
onMounted(() => {
  console.log("Discove onMounted.")
  // emit('dom-loaded', 'discover/recommend')
})
onUnmounted(() => {
  console.log('Discove 卸载');
})
// onActivated(()=>{
//   console.log('Discove Actived');
// })

const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/discover/recommend",
          },
        },
        { default: () => "推荐" }
      ),
    key: "/discover/recommend",
  },
  // {
  //   label: () =>
  //     h(
  //       RouterLink,
  //       {
  //         to: {
  //           path: "/discover/songlist",
  //         },
  //       },
  //       { default: () => "歌单" }
  //     ),
  //   key: "/discover/songlist",
  // },
  // {
  //   label: () =>
  //     h(
  //       RouterLink,
  //       {
  //         to: {
  //           path: "/discover/anchor",
  //         },
  //       },
  //       { default: () => "主播" }
  //     ),
  //   key: "/discover/anchor",
  // },
  // {
  //   label: () =>
  //     h(
  //       RouterLink,
  //       {
  //         to: {
  //           path: "/discover/ranking",
  //         },
  //       },
  //       { default: () => "排行" }
  //     ),
  //   key: "/discover/ranking",
  // },
  // {
  //   label: () =>
  //     h(
  //       RouterLink,
  //       {
  //         to: {
  //           path: "/discover/singer",
  //         },
  //       },
  //       { default: () => "歌手" }
  //     ),
  //   key: "/discover/singer",
  // },
  // {
  //   label: () =>
  //     h(
  //       RouterLink,
  //       {
  //         to: {
  //           path: "/discover/latest",
  //         },
  //       },
  //       { default: () => "最新" }
  //     ),
  //   key: "/discover/latest",
  // },
];

const route = useRoute();
</script>
<template>
  <div class="top-menu">
    <n-menu
      :options="menuOptions"
      mode="horizontal"
      class="zm-top-menu"
      :value="route.path"
    />
  </div>
  <div id="mainContent" class="main-content">
    <!-- <input type="text"> -->
    <!-- <NScrollbar > -->
    <div class="ld-width">
      <router-view v-slot="{ Component }">
        <!-- <keep-alive exclude="Recommend"> -->
          <component :is="Component" />
        <!-- </keep-alive> -->
      </router-view>
      <!-- <keep-alive>
        <router-view></router-view>
      </keep-alive> -->
      <!-- <router-view>
      </router-view> -->
    </div>
    <!-- </NScrollbar> -->
  </div>
</template>

<script>
export default {
  // beforeRouteEnter(to, from, next) {
  //   // console.log('Discover beforeRouteEnter', to, from);
  //   next();
  // },
};
</script>

<style lang="less" scoped></style>
