<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: 100vw;
  height: 100vh;
  min-height: 100vh;
  background-image: url('../assets/images/generate-img-confirm.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom; /* 从底部开始显示，上方可截断 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 内容向底部对齐 */
  align-items: center;
  position: relative;
  overflow: hidden; /* 隐藏溢出的上方内容 */
}

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

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

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

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

.item-2 {
  width: 47vw;
  bottom: max(5vh, 5vw);
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}
</style>