<template>
  <div class="message-statistic">
    <!-- 统计卡片 -->
    <el-row :gutter="16" class="statistic-cards">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon users">
              <el-icon><User /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-label">目标用户数</div>
              <div class="card-value">{{ statistics.targetUserCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon sent">
              <el-icon><Promotion /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-label">已发送</div>
              <div class="card-value">{{ statistics.sentCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon success">
              <el-icon><CircleCheck /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-label">发送成功</div>
              <div class="card-value">{{ statistics.successCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="statistic-cards">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon failed">
              <el-icon><CircleClose /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-label">发送失败</div>
              <div class="card-value">{{ statistics.failedCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon read">
              <el-icon><View /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-label">已读人数</div>
              <div class="card-value">{{ statistics.readCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon pending">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-label">待发送</div>
              <div class="card-value">{{ pendingCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 进度条 -->
    <div class="progress-section">
      <div class="progress-item">
        <div class="progress-label">
          <span>发送进度</span>
          <span class="progress-value">{{ sendProgress }}%</span>
        </div>
        <el-progress
          :percentage="sendProgress"
          :color="progressColor"
          :stroke-width="12"
        />
      </div>

      <div class="progress-item">
        <div class="progress-label">
          <span>成功率</span>
          <span class="progress-value">{{ successRate }}%</span>
        </div>
        <el-progress
          :percentage="successRate"
          :color="successRateColor"
          :stroke-width="12"
        />
      </div>

      <div class="progress-item">
        <div class="progress-label">
          <span>已读率</span>
          <span class="progress-value">{{ readRate }}%</span>
        </div>
        <el-progress
          :percentage="readRate"
          color="#409eff"
          :stroke-width="12"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
  User,
  Promotion,
  CircleCheck,
  CircleClose,
  View,
  Clock
} from '@element-plus/icons-vue';
import type { MessageVO } from '@/types';

interface Props {
  statistics: MessageVO;
}

const props = defineProps<Props>();

/** 待发送数量 */
const pendingCount = computed(() => {
  const target = props.statistics.targetUserCount || 0;
  const sent = props.statistics.sentCount || 0;
  return Math.max(0, target - sent);
});

/** 发送进度 */
const sendProgress = computed(() => {
  const target = props.statistics.targetUserCount || 0;
  const sent = props.statistics.sentCount || 0;
  if (target === 0) return 0;
  return Math.round((sent / target) * 100);
});

/** 成功率 */
const successRate = computed(() => {
  const sent = props.statistics.sentCount || 0;
  const success = props.statistics.successCount || 0;
  if (sent === 0) return 0;
  return Math.round((success / sent) * 100);
});

/** 已读率 */
const readRate = computed(() => {
  const success = props.statistics.successCount || 0;
  const read = props.statistics.readCount || 0;
  if (success === 0) return 0;
  return Math.round((read / success) * 100);
});

/** 发送进度颜色 */
const progressColor = computed(() => {
  const progress = sendProgress.value;
  if (progress < 30) return '#f56c6c';
  if (progress < 70) return '#e6a23c';
  if (progress < 100) return '#409eff';
  return '#67c23a';
});

/** 成功率颜色 */
const successRateColor = computed(() => {
  const rate = successRate.value;
  if (rate < 60) return '#f56c6c';
  if (rate < 90) return '#e6a23c';
  return '#67c23a';
});
</script>

<style lang="scss" scoped>
.message-statistic {
  padding: 10px 0;
}

.statistic-cards {
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 30px;
  }
}

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

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;

  &.users {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  &.sent {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }

  &.success {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  &.failed {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  }

  &.read {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  }

  &.pending {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  }
}

.card-info {
  flex: 1;
}

.card-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.progress-section {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.progress-item {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;

  .progress-value {
    font-weight: bold;
    color: #303133;
  }
}
</style>
