<template>
  <div>
    <!-- 页面标题 -->
    <div class="page-header">
      <div>
        <h1 class="page-title">数据看板</h1>
        <p class="page-desc">实时监控平台运营数据与业务指标</p>
      </div>
      <div class="page-time">{{ currentTime }}</div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="16" class="stat-row">
      <el-col :xs="24" :sm="12" :md="8" :lg="4" v-for="(card, idx) in statCards" :key="idx">
        <el-card shadow="hover" class="stat-card" :style="{ '--card-color': card.color }">
          <div class="stat-card-inner">
            <div class="stat-icon-wrap" :style="{ background: card.gradient }">
              <i :class="card.icon" style="font-size:24px;color:#fff"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">{{ card.label }}</div>
              <div class="stat-value" :style="{ color: card.color }">{{ card.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷入口 -->
    <el-card shadow="hover" class="quick-card">
      <div slot="header" class="card-header">
        <div class="card-header-left">
          <div class="card-header-icon" style="background: linear-gradient(135deg, #3b82f6, #60a5fa);">
            <i class="el-icon-s-grid" style="color:#fff;font-size:16px"></i>
          </div>
          <span class="card-header-title">快捷入口</span>
        </div>
      </div>
      <el-row :gutter="16">
        <el-col :span="6" v-for="item in quickLinks" :key="item.path">
          <div class="quick-item" @click="$router.push(item.path)">
            <i :class="item.icon" :style="{ color: item.color, fontSize: '28px' }"></i>
            <span>{{ item.title }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      currentTime: '',
      timeTimer: null,
      statCards: [
        { label: '总租户数', value: '-', icon: 'el-icon-office-building', color: '#3b82f6', gradient: 'linear-gradient(135deg, #3b82f6, #60a5fa)' },
        { label: '今日调用', value: '-', icon: 'el-icon-data-line', color: '#8b5cf6', gradient: 'linear-gradient(135deg, #8b5cf6, #a78bfa)' },
        { label: '今日消费', value: '¥0.00', icon: 'el-icon-coin', color: '#f59e0b', gradient: 'linear-gradient(135deg, #f59e0b, #fbbf24)' },
        { label: '总调用次数', value: '-', icon: 'el-icon-s-data', color: '#10b981', gradient: 'linear-gradient(135deg, #10b981, #34d399)' },
        { label: '总消费金额', value: '¥0.00', icon: 'el-icon-wallet', color: '#ef4444', gradient: 'linear-gradient(135deg, #ef4444, #f87171)' },
        { label: '总充值金额', value: '¥0.00', icon: 'el-icon-bank-card', color: '#06b6d4', gradient: 'linear-gradient(135deg, #06b6d4, #22d3ee)' }
      ],
      quickLinks: [
        { title: '代理管理', path: '/admin/proxy', icon: 'el-icon-user', color: '#3b82f6' },
        { title: '租户管理', path: '/admin/company', icon: 'el-icon-office-building', color: '#10b981' },
        { title: 'AI模型配置', path: '/admin/aiModel', icon: 'el-icon-cpu', color: '#8b5cf6' },
        { title: '消费记录', path: '/admin/consumeRecord', icon: 'el-icon-coin', color: '#f59e0b' }
      ]
    }
  },
  mounted() {
    this.updateTime()
    this.timeTimer = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timeTimer)
  },
  methods: {
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN', {
        year: 'numeric', month: '2-digit', day: '2-digit',
        hour: '2-digit', minute: '2-digit', second: '2-digit',
        weekday: 'long'
      })
    }
  }
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}
.page-desc {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
}
.page-time {
  font-size: 13px;
  color: #94a3b8;
  background: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.stat-row {
  margin-bottom: 20px;
}
.stat-card {
  margin-bottom: 16px;
  border-radius: 16px;
  border: none;
  transition: all 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.stat-card-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.stat-info {
  flex: 1;
  min-width: 0;
}
.stat-label {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.quick-card {
  border-radius: 16px;
  border: none;
}
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #f8fafc;
}
.quick-item:hover {
  background: #f0f0ff;
  transform: translateY(-2px);
}
.quick-item span {
  font-size: 14px;
  color: #475569;
  font-weight: 500;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}
</style>
