<script setup lang="ts">
// import YlIconSelector from "@/components/yl-icon-selector.vue";
import { message, userinfo } from "@/store/store.ts";
import { onMounted, onUnmounted, ref } from "vue";
import { DateTime, Duration } from "luxon";
import { getCookie } from "@/utils/cookie.ts";
import YlAccountSz from "@/pages/account/yl-account-sz.vue";

const loginTime = ref(
  Math.floor(new Date().getTime() - (Number(getCookie("loginTime")) || 0)),
);
const currentTime = ref(new Date().getTime());
let down: NodeJS.Timeout;

onMounted(() => {
  down = setInterval(() => {
    loginTime.value = Math.floor(
      new Date().getTime() - (Number(getCookie("loginTime")) || 0),
    );
    currentTime.value = new Date().getTime();
  }, 1000);
});
onUnmounted(() => clearInterval(down));
</script>

<template>
  <h1 class="center">
    welcome,{{ userinfo.userinfo.nickname || userinfo.username }}
  </h1>
  <el-row>
    <el-col style="text-align: center" :xs="24" :sm="8">
      <el-statistic title="当前在线人数" :value="message.online"></el-statistic>
    </el-col>
    <el-col :span="8" style="text-align: center" :xs="24" :sm="8">
      <el-statistic
        title="已登录时长"
        :value="loginTime"
        :formatter="
          (v: number) =>
            Duration.fromObject({ millisecond: v }).toFormat('MM-dd hh:mm:ss')
        "
      ></el-statistic>
    </el-col>
    <el-col :span="8" style="text-align: center" :xs="24" :sm="8">
      <el-statistic
        title="当前时间"
        :value="currentTime"
        :formatter="
          (v: number) => DateTime.fromMillis(v).toFormat('yyyy-MM-dd HH:mm:ss')
        "
      ></el-statistic>
    </el-col>
  </el-row>
  <el-row justify="space-around">
    <el-col
      style="text-align: center; max-width: 450px"
      class="account"
      :xs="24"
      :sm="12"
    >
      <YlAccountSz />
    </el-col>
  </el-row>
</template>

<style scoped>
.account {
  padding: 20px 50px;
}
</style>
