<script setup lang="ts">
import { onMounted, ref } from "vue";
import useRotateCanvas from "./scripts/rotateCanvas";
import usePreloadImg from "./scripts/preloadImg";
import useModuleItem from "./scripts/moduleItem";

// video 元素的模板引用
const loginVideoRef = ref<HTMLVideoElement>();

// 设置视频播放速度
const setVideoRate = (rate = 1) => {
  if (loginVideoRef.value) loginVideoRef.value.playbackRate = rate;
};

onMounted(() => {
  // 设置视频播放速度
  // setVideoRate();
  // 预加载 模块item hover图片
  usePreloadImg();
});

// 底部旋转 canvas
const { canvasRef } = useRotateCanvas();
const { moduleRef } = useModuleItem();
</script>

<template>
  <article class="login-page">
    <!-- 视频背景 -->
    <video
      ref="loginVideoRef"
      class="video-bg"
      poster="@/assets/login-bg-poster.jpg"
      autoplay
      loop
      muted
    >
      <source src="@/assets/login-bg-video.mp4" type="video/mp4" />
    </video>

    <!-- 标题 -->
    <header class="header animate__animated animate__fadeInDownBig">
      <span class="left span"></span>
      <span class="center span">
        <i class="text">珠海市政府投资项目经济技术指标库</i>
      </span>
      <span class="right span"></span>
    </header>

    <main class="main">
      <!-- 登陆面板 -->
      <div class="panel">
        <!-- 用户名 -->
        <div class="input-wrap username">
          <input class="input" type="text" placeholder="用户名" />
          <i class="line" />
        </div>
        <!-- 密码 -->
        <div class="input-wrap password">
          <input class="input" type="password" placeholder="密码" />
          <i class="line" />
        </div>
        <!-- 登录按钮 -->
        <div class="login-btn">
          <button class="button">登录</button>
          <div class="flash-wrap">
            <div class="flash"></div>
          </div>
        </div>
      </div>
      <!-- 旋转光圈 -->
      <div class="aperture"></div>
      <!-- 旋转底座 -->
      <div class="rotating-base">
        <canvas ref="canvasRef" width="1800" height="600"></canvas>
      </div>
      <!-- 功能模块 -->
      <ul class="module" ref="moduleRef">
        <li class="item budget animate__animated animate__bounceIn" ref="budgetRef">预算审核模块</li>
        <li class="item estimate animate__animated animate__bounceIn" ref="estimateRef">估/概算模块</li>
        <li class="item util animate__animated animate__bounceIn" ref="utilRef">基础工具模块</li>
        <li class="item settlement animate__animated animate__bounceIn" ref="settlementRef">结算审核模块</li>
        <li class="item final animate__animated animate__bounceIn" ref="finalRef">决算审核模块</li>
        <li class="item check animate__animated animate__bounceIn" ref="checkRef">检测功能模块</li>
      </ul>
    </main>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>
