<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRouter } from 'vue-router'

defineProps({
  show: true
})

onMounted(() => {
})

const router = useRouter();
const goToGenerateImgPage = () => {
  router.push({
    name: 'generateImg'
  })
}

const closeTodoList = () => {
  router.push({
    name: 'selectTemplateV2'
  })
}

</script>

<template>
  <div :show="show">
    <div class="home-wrapper">
      <div class="scene-item item-1" @click="closeTodoList">
        <img src="../assets/images/close-btn.webp" alt="关闭按钮">
      </div>

      <div class="scene-item item-2" @click="goToGenerateImgPage">
        <img src="../assets/images/confirm-btn.webp" alt="我知道了">
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-wrapper {
  width: 100%;
  height: 92vh;
  background-image: url('../assets/images/generate-img-confirm.webp');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: -webkit-fill-available;
}

.scene-item {
  position: absolute;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
  border: 3px solid transparent;
  animation: float 4s ease-in-out infinite;
}

.scene-item:hover {
  transform: scale(1.05);
}

.scene-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-1 {
  width: 10vw;
  top: 15%;
  right: 4%;
  animation-delay: 0s;
}

.item-2 {
  width: 47vw;
  bottom: 5vw;
  animation-delay: 0s;
}
</style>