<script setup lang="ts">
import BackButton from "@/components/BackButton.vue";
import HomeItem from "@/components/HomeItem.vue";
import { Item } from "@/mdoel/item";
import { onMounted, ref } from "vue";
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="relative w-full h-screen">
    <iframe
      class="w-full h-screen"
      :src="`https://www.720pai.net/tour/dfecea34bfc84088?Tid=`"
    ></iframe>

    <div
      class="absolute top-0 left-0 flex justify-between flex-col h-screen w-full"
    >
      <!-- 上 -->
      <div class="p-10 flex justify-between">
        <BackButton />
        <div class="flex items-center">
          <img src="/image/school-l.png" :width="58" :height="58" />
          <div class="text-2xl ml-4">万载三中</div>
          <div class="font-medium ml-20 text-xl">{{ current }}</div>
        </div>
      </div>
      <!-- 中 -->
      <div class="flex justify-end px-10">
        <div>
          <HomeItem v-for="(item, i) in items" :key="i" :item="item" />
        </div>
      </div>
      <!-- 下  -->
      <div></div>
    </div>
  </div>
</template>
