import { defineComponent, ref, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { NAV_BAR_MENUS } from '@/constants/constants';
import './index.scss';

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();

    const currentRouteInMenusPath = NAV_BAR_MENUS.map((m) => m.path).find((p) =>
      route.path.includes(p),
    );
    const defaultActive = ref(currentRouteInMenusPath);

    watchEffect(() => {
      defaultActive.value = NAV_BAR_MENUS.map((m) => m.path).find((p) =>
        route.path.includes(p),
      );
    });

    return () => (
      <el-menu
        class="nav-bar-menu"
        mode="horizontal"
        ellipsis={false}
        defaultActive={defaultActive.value}>
        {NAV_BAR_MENUS.map((m) => (
          <el-menuItem
            index={m.path}
            onClick={() => {
              defaultActive.value = m.path;
              router.push(m.path);
            }}>
            <m.icon
              width="16px"
              height="16px"
              style={{ marginRight: '10px' }}
            />
            {m.name}
          </el-menuItem>
        ))}
      </el-menu>
    );
  },
});