<template>
  <div class="flex flex-row py-12">
    <div class="w-2/5">
      <img :src="getImgUrl(props.data.icon)" />
    </div>
    <div class="w-3/5 flex flex-col justify-evenly h-96 pl-5">
      <div class="text-xl text-gray-800 font-medium">{{ props.data.title }}</div>
      <div class="text-sm text-gray-400">{{ props.data.detail }}</div>
      <slot name="dataProve" />
      <div class="flex flex-row">
        <MainButton v-if="props.data.route" text="查看更多" @click="handleClick(BTN_EVENT.BTN1,props.data.route!)" size="large" />
        <div class="pr-5"></div>
        <MainButton v-if="props.data.website" text="立即体验" @click="handleClick(BTN_EVENT.BTN2,props.data.website!)"  size="large" theme="dark" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, withDefaults } from "vue"
import { useRouter } from "vue-router"
import MainButton from "./mainButton.vue"
interface item {
  id: number,
  icon: string,
  title: string,
  detail: string,
  route?:string,
  website?:string
}

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

})

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})

enum BTN_EVENT{
  BTN1,
  BTN2
}

const router = useRouter()
const handleClick = (type:BTN_EVENT,newUrl:string)=>{
  if(type == BTN_EVENT.BTN1){
    router.push(newUrl)
  }else{
    window.open(newUrl)
  }
}
</script>