<script lang="ts" setup>
// 使用 ref 跟踪鼠标的 x 和 y 坐标
import {computed, reactive, ref} from "vue";
import {debounce, getAssetURL} from "@/utils/function.ts";
import SocialMediaWidget from "@/components/widget/SocialMediaWidget.vue";

const mouseX = ref(0)
const mouseY = ref(0)
// const card = ref<HTMLDivElement | null>(null)
const rotation = reactive({
  rotateX: 0,
  rotateY: 0,
});

const typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000']

const littleWidget = [
  {
    icon: ['fab', 'qq'],
    url: "tencent://message/?uin=1922471905&Site=&Menu=yes",
    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, 10)

// 根据鼠标位置动态调整背景图像的位置
const backgroundStyle = computed(() => ({
  backgroundPosition: `${mouseX.value}px ${mouseY.value}px`,
  backgroundImage: `url(${getAssetURL('bg.png')})`,
  backgroundSize: "150px",
  transition: 'background-position 0.1s',
  backgroundAttachment: 'fixed'
}))
</script>

<template>
  <div :style="backgroundStyle"
       class="relative flex h-screen w-full items-center justify-center bg-blue-400"
       @mousemove="debouncedMouseMove"
  >
    <div ref="card" :style="{transform: `rotateX(${rotation.rotateX}deg) rotateY(${rotation.rotateY}deg)`}"
         class="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"
         style="perspective: 1000px">
      <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">CantyOn_ion'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">CantyOn_ion'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">
        <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="getAssetURL('hoshino.png')" alt="" class="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>

</style>
