<template>
  <div
    @click="handleClick"
    :style="{ backgroundImage: `url(${data.picture})` }"
    class="h-full rounded-4px cursor-pointer bg-gray-500 bg-opacity-10 bg-img"
  ></div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
const router = useRouter()

const handleClick = () => {
  const { link_config } = props.data
  if (link_config.target_url) {
    router.push(link_config.target_url)
  }
}

</script>
<style scoped lang="scss">
.bg-img{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
