<script lang="ts" setup>
import router from "@/router";

type Entry = {
  title: string,
  url: boolean,
  to: string,
}

const emit = defineEmits<{
  (e: 'onGo'): void
}>();

defineProps<{
  title: string
  icon: string[]
  to?: string
  entry: Entry[]
}>()

const onClick = (to: string | undefined, url: boolean) => {
  if (to === undefined)
    return

  if (url)
    window.open(to)
  emit('onGo')
  router.push({name: to})
}
</script>

<template>
  <div class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full"
       @click="onClick(to, false)"
  >
    <div class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 text-gray-500
                md:w-auto md:text-white md:group-hover:bg-gray-100 md:group-hover:bg-opacity-30"
    >
      <font-awesome-icon :icon="icon" class="mx-2 h-5 w-5 md:h-8 md:w-8"/>
      <span class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap font-bold
                   md:font-normal md:w-0 md:text-xl md:group-hover:w-full"
      >
        {{ title }}
      </span>
    </div>

    <!-- 下拉菜单 -->
    <div v-if="entry"
         class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute
                md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md
                md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100"
    >
      <div v-for="item in entry" :key="item.title"
           class="px-11 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100"
           @click="onClick(item.to, item.url)"
      >
        {{ item.title }}
      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  @media (min-width: 768px) {
    transform: perspective(500px) rotateX(-45deg) translateX(-50%);
  }
}
</style>