<template>
  <el-row :gutter="16" class="kpi-row">
    <el-col :xs="24" :sm="12" :md="8" :lg="4">
      <el-card shadow="hover" v-loading="loading" class="kpi-card kpi-total">
        <div class="kpi-icon"><el-icon><DataAnalysis /></el-icon></div>
        <div class="kpi-content">
          <div class="kpi-label">流程总数</div>
          <el-statistic :value="overview.totalInstances" />
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="4">
      <el-card shadow="hover" v-loading="loading" class="kpi-card kpi-completed">
        <div class="kpi-icon"><el-icon><CircleCheck /></el-icon></div>
        <div class="kpi-content">
          <div class="kpi-label">已完成</div>
          <el-statistic :value="overview.completedCount" />
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="4">
      <el-card shadow="hover" v-loading="loading" class="kpi-card kpi-running">
        <div class="kpi-icon"><el-icon><Monitor /></el-icon></div>
        <div class="kpi-content">
          <div class="kpi-label">进行中</div>
          <el-statistic :value="overview.runningCount" />
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="4">
      <el-card shadow="hover" v-loading="loading" class="kpi-card kpi-timeout">
        <div class="kpi-icon"><el-icon><Warning /></el-icon></div>
        <div class="kpi-content">
          <div class="kpi-label">超时率</div>
          <el-statistic :value="overview.timeoutRate" :precision="1" suffix="%" />
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="4">
      <el-card shadow="hover" v-loading="loading" class="kpi-card kpi-avg">
        <div class="kpi-icon"><el-icon><Clock /></el-icon></div>
        <div class="kpi-content">
          <div class="kpi-label">平均耗时</div>
          <div class="kpi-value">{{ formatMinutes(overview.avgDurationMinutes) }}</div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { DataAnalysis, CircleCheck, Monitor, Warning, Clock } from '@element-plus/icons-vue'
import type { AnalysisOverview } from '@/types/analysis'

defineProps<{
  overview: AnalysisOverview
  loading: boolean
  formatMinutes: (minutes: number) => string
}>()
</script>

<style scoped>
.kpi-row {
  margin-bottom: 16px;
}
.kpi-card {
  border-left: 4px solid transparent;
  transition: transform 0.2s;
}
.kpi-card :deep(.el-card__body) {
  display: flex;
  align-items: center;
  padding: 12px;
}
.kpi-card:hover {
  transform: translateY(-2px);
}
.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 12px;
  color: #fff;
}
.kpi-total {
  border-left-color: #5470c6;
}
.kpi-total .kpi-icon {
  background: linear-gradient(135deg, #5470c6, #8ba1e6);
}
.kpi-completed {
  border-left-color: #67c23a;
}
.kpi-completed .kpi-icon {
  background: linear-gradient(135deg, #67c23a, #9fe07a);
}
.kpi-running {
  border-left-color: #409eff;
}
.kpi-running .kpi-icon {
  background: linear-gradient(135deg, #409eff, #7ec2ff);
}
.kpi-timeout {
  border-left-color: #f56c6c;
}
.kpi-timeout .kpi-icon {
  background: linear-gradient(135deg, #f56c6c, #f9a0a0);
}
.kpi-avg {
  border-left-color: #e6a23c;
}
.kpi-avg .kpi-icon {
  background: linear-gradient(135deg, #e6a23c, #f2c97d);
}
.kpi-content {
  flex: 1;
}
.kpi-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 4px;
}
.kpi-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  line-height: 1.2;
}
</style>
