<template>
  <div class="flex flex-row w-10/12 mx-auto justify-between cursor-default">
    <div
      v-for="item in props.data"
      :key="item.id"
      class="w-1/4"
      :class="props.data!.length == 1 ? 'w-full' : 'w-1/4'"
    >
      <div class="text-base font-medium pl-3">{{ item.title }}</div>
      <div class="flex" :class="props.data!.length == 1 ? 'flex-row' : 'flex-col'">
        <div
          v-for="child in item.children"
          :key="child.id"
          class="flex flex-row hover:bg-gray-200 mt-5 p-3 mr-5 cursor-pointer"
          @click="goToWeb(child)"
        >
          <svg-icon :iconClass="child.icon" class="w-10 h-10 pr-2" />
          <div class="flex flex-col">
            <div class="text-sm font-medium">{{ child.product }}</div>
            <div class="text-xs text-gray-400">{{ child.detail }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import SvgIcon from './svgIcon.vue';

interface child { id: number, product: string, detail: string, icon: string, route?: string, website?: string }
interface item {
  id: number,
  title: string,
  children: Array<child>
}

const props = withDefaults(defineProps<{
  data?: item[]
}>(), {

})

const router = useRouter()
const goToWeb = (child: child) => {
  if (child.route){
    router.push(child.route)
  }else{
    window.open(child.website)
  }
}
</script>