<template>
  <template
    v-if="
      (itemData !== undefined && itemData?.to !== undefined && itemData?.to !== '') ||
      routeTo !== undefined
    ">
    <RouterLink
      :to="goToRoute"
      :class="[
        itemData !== undefined && itemData.sub !== undefined && (itemData.showsub === undefined || itemData.showsub)
          ? 'menu-have-sub menu-sub-hover-d'
          : ''
      ]">
      <i
        class="ico-c ico-menu-side"
        v-if="
          (itemData !== undefined &&
            itemData?.ico !== undefined &&
            itemData?.ico !== '') ||
          icon !== undefined
        ">
        <svg>
          <use :href="icourl + '#' + (icon !== undefined ? icon : itemData?.ico)" />
        </svg>
      </i>
      <span>
        {{
          title !== undefined
            ? title
            : itemData !== undefined && itemData.title !== undefined
            ? itemData.title
            : ''
        }}
      </span>
    </RouterLink>
  </template>
  <div
    v-else
    :class="[
      (itemData !== undefined && itemData.sub !== undefined) ||
      ((clickable !== undefined && clickable) || (itemData?.clickable !== undefined && itemData?.clickable))
        ? 'menu-have-sub menu-sub-hover-d'
        : ''
    ]"
    @click="OnClick">
    <i
      class="ico-c ico-menu-side"
      v-if="
        (itemData !== undefined && itemData?.ico !== undefined && itemData?.ico !== '') ||
        icon !== undefined
      ">
      <svg>
        <use :href="icourl + '#' + (icon !== undefined ? icon : itemData?.ico)" />
      </svg>
    </i>
    <span>
      {{
        title !== undefined
          ? title
          : itemData !== undefined && itemData.title !== undefined
          ? itemData.title
          : ''
      }}
    </span>
  </div>
</template>
<script setup lang="ts">
  import { computed } from 'vue'
  import icourl from '@/assets/images/icons.svg'

  interface NavItemObj {
    [key: string]: any
    title?: string
    ico?: string
    to?: string
    clickable?: boolean
  }

  const props = defineProps<{
    itemData?: NavItemObj
    icon?: string
    title?: string
    routeTo?: string
    clickable?: boolean
  }>()

  const goToRoute = computed<any>(() => {
    return props.routeTo !== undefined ? props.routeTo : props.itemData?.to
  })

  const emit = defineEmits(['click'])

  const OnClick = (e: Event) => {
    emit('click', props.itemData)
  }
</script>
