<script setup lang="ts">
import { Item } from "@/model/item";

const current = ref("");
const getCurrentTime = () => {
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth() + 1;
  const day = currentDate.getDate();
  const hours = currentDate.getHours();
  const minutes = currentDate.getMinutes();
  const s = currentDate.getSeconds();
  const res = `${year}.${month}.${day} ${hours}.${minutes}.${s}`;
  current.value = res;
};

const items: Item[] = [
  {
    title: "场景选择",
    url: "/",
    img: "/image/1.png",
  },
  {
    title: "自动旋转",
    url: "/",
    img: "/image/2.png",
  },
  {
    title: "学校简历",
    url: "/",
    img: "/image/3.png",
  },
  {
    title: "学生查询",
    url: "/find",
    img: "/image/4.png",
  },
];
onMounted(() => {
  getCurrentTime();
  setInterval(getCurrentTime, 1000);
});
</script>
<template>
  <div class="w-full h-screen relative">
    <iframe class="w-full h-screen"> </iframe>
    <BackButton
      class="absolute top-6 left-7 bg-gray-100 bg-opacity-20 backdrop-blur-sm rounded-xl"
    />

    <div class="absolute top-6 right-96">
      <img src="/image/school-l.png" :width="60" />
    </div>

    <div
      class="absolute top-6 right-72 h-16 flex items-center font-medium text-xl"
    >
      万载三中
    </div>
    <div class="absolute top-6 right-1 sm:right-10 h-16 flex items-center w-48">
      {{ current }}
    </div>

    <div class="absolute top-1/4 right-1 sm:right-10 h-16 flex flex-col">
      <HomeItem v-for="(item, i) in items" :key="i" :item="item" />
    </div>
  </div>
</template>
