<script setup>
import {
  h,
  ref,
  onMounted,
  onUnmounted,
  nextTick,
} from "vue";
import { useStore } from "vuex";
import {
  RouterLink,
  useRoute,
  useRouter,
} from "vue-router";
import { NMenu, NIcon } from "naive-ui";
import FaXian from '@/assets/svgs/FaXian.svg'
import ShiPin from '@/assets/svgs/ShiPin.svg'
import ZuiJin from '@/assets/svgs/ZuiJin.svg'

function renderIcon (icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions = ref([
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/discover/recommend",
          },
        },
        { default: () => "发现" }
      ),
    key: "/discover",
    icon: renderIcon(FaXian),
  },
  // {
  //   label: () =>
  //     h(
  //       RouterLink,
  //       {
  //         to: {
  //           path: "/videos/v",
  //         },
  //       },
  //       { default: () => "视频" }
  //     ),
  //   key: "/videos",
  //   icon: renderIcon(ShiPin),
  // },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/played",
          },
        },
        { default: () => "最近播放" }
      ),
    key: "/played",
    icon: renderIcon(ZuiJin),
  },
  //#region 其他
  // {
  //   label: () =>
  //     h(
  //       RouterLink,
  //       {
  //         to: {
  //           path: '/fm'
  //         }
  //       },
  //       { default: () => '私人FM' }
  //     ),
  //   key: '/fm',
  // },
  // {
  //   label: () =>
  //     h(
  //       RouterLink,
  //       {
  //         to: {
  //           path: '/friends'
  //         }
  //       },
  //       { default: () => '朋友' }
  //     ),
  //   key: '/friends',
  // },
  //#endregion
]);

const store = useStore();
const {mainMenuSelected} = store.getters
</script>
<template>
  <n-menu
    :options="menuOptions"
    :value="
      mainMenuSelected(menuOptions)
    "
    class="z-menu"
    style="--item-height: 32px;"
  />
</template>

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

<style lang="less"  >
.n-menu.z-menu{ 
  .n-menu-item{
    .n-menu-item-content{
      margin-left: -16px;
    }
  }
}
</style>

