<template>
  <div class="flex flex-row py-12 justify-between items-center pr-4">
    <svg-icon :iconClass="props.data.icon" width="348" height="360"/>
    <!-- <img :src="getImgUrl(props.data.icon)"/> -->
    <div class="flex flex-col justify-center w-3/5 -mt-8 -mr-2">
      <div class="text-xl text-gray-800 font-medium mb-4">{{ props.data.title }}</div>
      <div class="text-sm text-contentMain mb-7">{{ props.data.detail }}</div>
      <slot name="dataProve" />
      <div class="flex flex-row">
        <MainButton
          v-if="props.data.website"
          text="立即体验"
          @click="handleClick(BTN_EVENT.BTN2, props.data.website!)"
          size="large"
        />
        <div v-if="props.data.website" class="pr-5"></div>
        <MainButton
          v-if="props.data.route"
          text="查看更多"
          @click="handleClick(BTN_EVENT.BTN1, props.data.route!)"
          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>