<script setup>
import {ref, onMounted} from 'vue'
import {TransitionPresets, useTransition} from '@vueuse/core';
import api from "../utils/axios.js";

const source = ref(0);
const viewCountDisplay = ref(true);
const outputValue = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})


onMounted(async () => {
  const response = await api.get('/view');
  if (response.code === 0) {
    source.value = response.views;
  } else {
    viewCountDisplay.value = false;
  }

})

</script>

<template>
  <div class="container">
    <el-container>

      <el-main>
        <div style="font-size: 50px; font-weight: inherit; padding: 20px">欢迎来到 MVA-CYBER !</div>
      </el-main>
      <el-footer>
<!--        <div class="text-bg"></div>-->
        <el-col v-if="viewCountDisplay">
          <el-statistic title="网站累计访问次数" :value="outputValue"/>
        </el-col>

      </el-footer>
    </el-container>
  </div>

</template>

<style scoped>
img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.el-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

}
.el-main {
  display: flex;
  justify-content: center;
  padding: 0;
  width: 100%;
}
.el-footer {
  position: relative;
}
.el-col {

  //position: absolute;
  //width: 100%;
  //height: 100%;
  //display: flex;
  //align-items: center;
  //justify-content: center;
}
.el-statistic {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
</style>