<script lang="ts" setup>
import {computed, ref} from "vue";

// 使用 ref 跟踪鼠标的 x 和 y 坐标
const mouseX = ref(0)
const mouseY = ref(0)
const characterUrl = ref("")

const typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000']
const littleWidget = [
  {
    icon: ['fab', 'qq'],
    url: "https://qm.qq.com/q/9fhtO8JJt0",
    title: "QQ",
  },
  {
    icon: ['fab', 'github-alt'],
    url: "https://github.com/Aurora1949",
    title: "Github",
  },
  {
    icon: ['fab', 'weibo'],
    url: "https://weibo.com/u/7923648952",
    title: "微博"
  },
  {
    icon: ['fab', 'steam-symbol'],
    url: "https://steamcommunity.com/id/cantyonion/",
    title: "Steam"
  }
]

// 监听鼠标移动
const handleMouseMove = (event: MouseEvent) => {
  // 根据窗口大小计算鼠标相对于中心位置的偏移比例
  mouseX.value = -(event.clientX / window.innerWidth - 0.5) * 100
  mouseY.value = -(event.clientY / window.innerHeight - 0.5) * 100
}

const debouncedMouseMove = debounce(handleMouseMove, 5)

// 根据鼠标位置动态调整背景图像的位置
const backgroundStyle = computed(() => ({
  backgroundPosition: `${mouseX.value}px ${mouseY.value}px`
}))

onMounted(() => {
  characterUrl.value = getAssetURL('common/hoshino.png')
})
</script>

<template>
  <div :style="backgroundStyle"
       class="relative flex h-screen w-full items-center justify-center bg-blue-400 bg-fixed bg min-h-[40rem]"
       @mousemove="debouncedMouseMove"
  >
    <div class="relative mx-4 w-full rounded-xl bg-white p-8 transition-transform duration-300 min-h-96
                md:mx-0 md:max-w-screen-md"
    >
      <p class="text-gray-500">你好！欢迎来到</p>
      <div class="relative mt-4 h-72 text-5xl text-blue-400 transition-all md:text-6xl lg:text-7xl">
        <h1 style="font-family: BaconyScript,sans-serif">CantyOni_on's</h1>
        <h1 class="font-bold">超级基地</h1>
        <div class="absolute -z-10 text-blue-100 top-[3px] left-[3px]">
          <h1 class="" style="font-family: BaconyScript,sans-serif">CantyOni_on's</h1>
          <h1 class="font-bold">超级基地</h1>
        </div>
      </div>

      <!-- TypedJS -->
      <div class="flex flex-row text-gray-500">
        <vue-typed :auto-insert-css="true" :backSpeed="30"
                   :loop="true"
                   :showCursor="true"
                   :strings="typedString"
                   :typeSpeed="50"
        />
      </div>

      <!-- 社交媒体组件 -->
      <div class="flex flex-row text-gray-500">
        <widget-social-media-widget v-for="item in littleWidget"
                             :key="item.url"
                             :icon="item.icon"
                             :title="item.title"
                             :url="item.url"
                             class="h-10 w-10"
        />
      </div>

      <!-- 人物背景 -->
      <div class="invisible absolute top-0 -right-6 -bottom-6 opacity-0 transition-all
                  sm:visible sm:opacity-100 lg:-top-28 lg:-right-28 lg:-bottom-10"
      >
        <img :src="characterUrl" alt="" class="float-right h-full" draggable="false"/>
      </div>
    </div>
    <!-- 下箭头 -->
    <font-awesome-icon :icon="['fas', 'chevron-down']" beat class="absolute bottom-12 h-auto w-6 text-white"/>
  </div>
</template>

<style scoped>
.bg {
  background-image: url("assets/images/common/bg.png");
  background-size: 150px 150px;
}
</style>
