<!--
=============================================================================
企微IT智能服务台 — 统计卡片组件
=============================================================================
说明：深色背景统计卡片，显示图标、数值、标签、趋势
  用于仪表盘、会话监控等页面的统计数据展示
-->
<template>
  <div class="stat-card">
    <div class="stat-card-header">
      <span class="stat-label">{{ label }}</span>
      <el-icon v-if="icon" :size="20" :style="{ color: iconColor || 'var(--text-secondary)' }">
        <component :is="icon" />
      </el-icon>
    </div>
    <div class="stat-value" :style="{ color: valueColor || 'var(--text-primary)' }">
      <slot name="value">
        {{ formattedValue }}
      </slot>
    </div>
    <div v-if="trend || subtitle" class="stat-footer" :class="trendClass">
      <slot name="footer">
        <span v-if="trend">{{ trend }}</span>
        <span v-if="subtitle" class="stat-subtitle">{{ subtitle }}</span>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// Props 定义
// ==========================================================================
import { computed } from 'vue'

const props = defineProps<{
  /** 统计卡片标签 */
  label: string
  /** 统计数值 */
  value?: string | number
  /** 数值颜色 */
  valueColor?: string
  /** 图标组件名 */
  icon?: string
  /** 图标颜色 */
  iconColor?: string
  /** 趋势文本 */
  trend?: string
  /** 趋势方向：up/down */
  trendDirection?: 'up' | 'down' | 'none'
  /** 副标题 */
  subtitle?: string
}>()

// ==========================================================================
// 计算属性
// ==========================================================================

/** 格式化后的数值 */
const formattedValue = computed(() => props.value ?? '-')

/** 趋势样式类 */
const trendClass = computed(() => {
  if (props.trendDirection === 'up') return 'trend-up'
  if (props.trendDirection === 'down') return 'trend-down'
  return ''
})
</script>

<style scoped>
/* 统计卡片 */
.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color 0.2s;
}
.stat-card:hover {
  border-color: var(--border-hover);
}

/* 卡片头部（标签 + 图标） */
.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* 标签 */
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 数值 */
.stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* 尾部 */
.stat-footer {
  font-size: 11px;
}

/* 趋势 */
.trend-up {
  color: var(--success);
}
.trend-down {
  color: var(--danger);
}

.stat-subtitle {
  color: var(--text-muted);
}
</style>
