<template>
  <div class="Poster-main op0" data-animation="animate__animated animate__fadeIn animate__slow">

    <div class="Poster-container" :style="posterStyle">
      <img class="Poster-img" :src="posterInfo.imgSrc" alt="">
      <div class="Poster-content-box">
        <div class="Poster-title">{{ posterInfo.title }}</div>
        <div class="Poster-text">{{ posterInfo.text }}</div>
      </div>
    </div>

  </div>
</template>

<script setup>
const { t, locale } = useI18n()


const props = defineProps({
  type: Number,
  title: String,
  text: String,
})

const initState = {
  imgSrc: '',
  title: '',
  text: ''
}
let posterInfo = ref({ ...initState })
let posterStyle = {
  height: '8vw',
}

// 获取海报
useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => {
  const data = JSON.parse(res.data.value).data
  posterInfo.value = data
  setTimeout(() => {
    htmlAddAnimations()
  });
})

</script>

<style scoped src="~/assets/css/poster/index.scss"></style>
<style scoped src="~/assets/css/poster/media.scss"></style>