<script lang="ts" setup>
import { AiAnswerProvideKey } from '../../../../type'

interface Props {
  data: any
}
const props = defineProps<Props>()

const animated = inject(AiAnswerProvideKey)?.animated

function onRouteUrl() {
  window.location.href = props.data?.url
}
</script>

<template>
  <div class="attachment-card-wrap" :class="{ 'animate__animated animate__fadeIn': animated }">
    <img v-if="props.data?.type === 'card-calculation'" class="item" src="@/assets/images/card-calculation.png" alt="" @click="onRouteUrl">
    <img v-if="props.data?.type === 'card-nav'" class="item" src="@/assets/images/card-nav.png" alt="" @click="onRouteUrl">
    <img v-if="props.data?.type === 'card-detail'" class="item" src="@/assets/images/card-detail.png" alt="" @click="onRouteUrl">
    <img v-if="props.data?.type === 'card-product-compare'" class="item" src="@/assets/images/card-product2222.png" alt="" @click="onRouteUrl">
    <img v-if="props.data?.type === 'card-plans'" class="item" src="@/assets/images/card-book1111.png" alt="" @click="onRouteUrl">
  </div>
</template>

<style lang="scss" scoped>
.item {
  // margin-top: 12px;
  width: 100%;
  // height: 92px;
}
</style>
