<template>
  <div class="app-container cyber-page">
    <div class="cyber-main-container">
      <!-- 主内容区域 -->
      <div class="content-wrapper glass-content">
        <hostsList />
      </div>

      <!-- 底部状态栏 -->
      <div class="footer-bar">
        <div class="footer-content">
          <span class="footer-icon">⏱️</span>
          <span class="footer-label">{{ $t('common.expirationtime') }}</span>
          <span class="footer-value">{{ time }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import { ref, reactive, onMounted } from "vue";
import { RouterLink, RouterView } from 'vue-router'
import hostsList from '@/views/hosts/hostsList.vue'
import { ElMessage } from 'element-plus';
import { getUser } from "@/utils/storage";
import { tokenStore, UserStore } from '@/stores/notice'

const userCache = UserStore()
const { t } = useI18n();
const time = ref(formatTimestamp(userCache.user.brotherExpireTime))

// 时间格式化方法 - 将12位时间戳转为YYYY-MM-DD HH:mm:ss格式
function formatTimestamp(timestamp) {
  try {
    const ts = Number(timestamp);
    if (isNaN(ts)) {
      return '--';
    }
    const date = new Date(ts > 999999999999 ? ts : ts * 1000);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  } catch (e) {
    console.error('时间格式化错误:', e);
    return '--';
  }
}
</script>

<style lang="less">
@import "@/static/css/cyber-design.less";

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;



}

.app-container.cyber-page {
  width: 1600px;
  height: 900px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e8f4fc 50%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

.cyber-main-container {
  width: 100%;
  height: 100%;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;

}

.content-wrapper.glass-content {
  flex: 1;
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  position: relative;
}

.footer-bar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.footer-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  .footer-icon {
    font-size: 14px;
  }

  .footer-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
  }

  .footer-value {
    font-size: 13px;
    color: #0052CC;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  }
}

.center-justify {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>