<template>
  <view class="background">
    <!-- <image
      class="logo"
      src="../../../static/icons/start-logo.png"
      mode="scaleToFill"
    />
    <view class="logo-text"> DeepChart </view> -->

    <image
      class="start"
      src="../../../static/start-gif.gif"
      mode="scaleToFill"
    />
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { useUserStore } from "../../../stores/modules/userInfo";
import { useDeviceStore } from "../../../stores/modules/deviceInfo";

onShow(() => {
  const deviceInfo = useDeviceStore();
  // 获取设备ID
  uni.getSystemInfo({
    success: (res) => {
      deviceInfo.setDeviceInfo(res);
    },
  });

  setTimeout(() => {
    const userStore = useUserStore();
    if (!userStore.userInfo)
      uni.redirectTo({
        url: "/pages/start/select/select",
        animationType: "slide-in-right",
        animationDuration: 1000,
      });
    else {
      uni.redirectTo({
        url: "/pages/home/home",
        animationType: "slide-in-right",
        animationDuration: 1000,
      });
    }
  }, 3400);
});
</script>

<style>
.background {
  background: #ffffff;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.start {
  width: 750rpx;
  height: 1624rpx;
}

.logo-text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 24px;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.logo {
  width: 320rpx;
  height: 200rpx;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>