<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import TrendChart from './TrendChart.vue';


// 模拟数据
const activeCallsData = ref([10, 20, 30, 40, 30, 20, 0]);
const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);



</script>

<template>
  <a-card>
    <div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px;">
      Users</div>
    <a-row :gutter="[16, 16]">
      <a-col :xs="24" :sm="24" :lg="8">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">Online Users</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="activeCallsData" color="#4CAF50" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                0
                <a-icon class="trend-icon up" type="arrow-up" />
              </div>
              <div class="metric-change">-20 last 5m</div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="24" :lg="8">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">Total Users</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="mosData" color="#2196F3" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                70
                <a-icon class="trend-icon right" type="arrow-right" />
              </div>
              <div class="metric-change">+40 last 5m</div>
            </div>
          </div>
        </a-card>
      </a-col>



      <a-col :xs="24" :sm="24" :lg="8">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">Parallel Users</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="failedCallsData" color="#F44336" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                30
              </div>
              <div class="metric-change">-10 last 5m</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
.dashboard-cards {
  padding: 16px;
}

.metric-card {
  border-radius: 8px;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

.card-content {
  display: flex;
  align-items: center;
}

.trend-chart {
  flex: 1;
  height: 50px;
}

.metric-info {
  margin-left: 16px;
  text-align: right;
}

.full-width {
  width: 100%;
  text-align: center;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.metric-change {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.trend-icon {
  margin-left: 8px;
  font-size: 16px;
}

.up {
  color: #4CAF50;
}

.down {
  color: #F44336;
}

.right {
  color: #2196F3;
}
</style>
