<script lang="ts" setup>
import { computed, onMounted } from 'vue';
import useAppStore from '@/store/modules/app';
import { parseUrlPath } from '@/plugins/file-static-url';
import {
  currentComponent,
  fnGetLoginSource,
} from '@/views/login/hooks/useLoginSource';
const appStore = useAppStore();

// 判断是否有背景地址
const calcBG = computed(() => {
  const bgURL = parseUrlPath(appStore.loginBackground);
  if (bgURL && bgURL !== '#') {
    return {
      backgroundImage: `url('${bgURL}')`,
      backgroundPosition: 'center',
      backgroundSize: 'cover',
    };
  }
  return undefined;
});

onMounted(() => {
  // 获取登录认证源
  fnGetLoginSource();
});
</script>

<template>
  <div class="container" :style="calcBG">
    <section v-show="!calcBG">
      <div class="animation animation1"></div>
      <div class="animation animation2"></div>
      <div class="animation animation3"></div>
      <div class="animation animation4"></div>
      <div class="animation animation5"></div>
    </section>

    <component :is="currentComponent" />
  </div>
</template>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding-top: 164px;

  // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;

  background-image: url(/background/light.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  .animation {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #1be1f6;

    &.animation1 {
      left: 15%;
      top: 70%;
      animation: slashStar 2s ease-in-out 0.3s infinite;
    }
    &.animation2 {
      left: 34%;
      top: 35%;
      animation: slashStar 2s ease-in-out 1.2s infinite;
    }
    &.animation3 {
      left: 10%;
      top: 8%;
      animation: slashStar 2s ease-in-out 0.5s infinite;
    }
    &.animation4 {
      left: 68%;
      top: 68%;
      animation: slashStar 2s ease-in-out 0.8s infinite;
    }
    &.animation5 {
      left: 87%;
      top: 30%;
      animation: slashStar 2s ease-in-out 1.5s infinite;
    }
  }
  @keyframes slashStar {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

[data-theme='dark'] .container {
  background-image: url(/background/dark.jpg);
  background-color: #141414;
}
</style>
