<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
import { useNavigationStoreV2 } from '~/stores/navigation';
import {storeToRefs} from "pinia";
import { vInterpolate } from '~/directives/v-interpolate';
import * as cherrio from 'cheerio'

const router = useRouter();
const route = useRoute();
const v2NavigationStore = useNavigationStoreV2()
const layoutstore = useLayoutStore();

const { megaMenuActive } = storeToRefs(layoutstore);
const {topMenu} = storeToRefs(v2NavigationStore)

const megaMenuEl = ref<HTMLElement>();

const computedClass = computed(() =>
  megaMenuActive.value
    ? ["opacity-100", "pointer-events-auto"]
    : ["opacity-0", "pointer-events-none"]
);


const $ = cherrio.load(topMenu.value)

const html = $('.parent').addClass('xl:(flex items-center justify-center)')
html.find('>li').addClass('xl:(relative group xl:mr-3) hover:bg-[#e6f4ff] py-3 px-6 rounded-md')
html.find('ul').addClass('pl-4 hidden xl:(gap-0 w-200px shadow group-hover:(block absolute top-full left-0 bg-white z-50))')
html.find('>li>a').addClass('xl:(block py-4 hover:(text-blue))')
html.find('>li>ul>li>a').addClass('xl:(block py-10px px-15px hover:(bg-blue text-white))')

</script>

<template>

  
  <a-drawer
    v-model:open="megaMenuActive"
    class="custom-class"
    root-class-name="root-class-name"
    title="Tất cả chuyên mục"
    placement="right"
    :bodyStyle="{padding:0}"
  >
  <div
      class=" h-full max-h-full flex flex-col gap-y-4 mx-auto"
    >
      <div id="mega-menu" v-interpolate v-html="html"></div>
    </div>
  </a-drawer>
</template>

<style lang="sass" scoped>
#mega-menu
    max-height: 100vh
    min-height: 100vh

#mega-list
    max-height: 100vh
</style>
