<template>
  <div class="stat-content">
    <div class="stat-header">
      <h3>{{ title }}</h3>
      <div class="button-group">
        <el-button
          v-for="(btn, index) in buttons"
          :key="index"
          type="text"
          @click="$emit('button-click', btn.type)"
        >
          {{ btn.label }} ({{ btn.value }})
        </el-button>
      </div>
    </div>
    <div class="stat-numbers">
      <div v-for="(stat, index) in stats" :key="index" class="stat-item">
        <span class="label">{{ stat.label }}</span>
        <span class="value">{{ stat.value }}</span>
      </div>
    </div>
    <el-progress
      :percentage="progress"
      :format="progressFormat"
      class="stat-progress"
    />
  </div>
</template>

<script>
export default {
  name: 'StatCardContent',
  props: {
    title: {
      type: String,
      required: true
    },
    buttons: {
      type: Array,
      required: true
    },
    stats: {
      type: Array,
      required: true
    },
    progress: {
      type: Number,
      required: true
    }
  },
  methods: {
    progressFormat(percentage) {
      return percentage.toFixed(0) + '%';
    }
  }
};
</script>

<style lang="scss" scoped>
.stat-content {
  padding: 20px;

  .stat-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .el-button {
        margin: 0;
        padding: 4px 8px;
        font-size: 13px;

        &:hover {
          color: #409EFF;
        }
      }
    }
  }

  .stat-numbers {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .stat-item {
      text-align: center;

      .label {
        display: block;
        color: #909399;
        margin-bottom: 4px;
      }

      .value {
        font-size: 24px;
        font-weight: 600;
      }
    }
  }

  .stat-progress {
    margin-top: 15px;
  }
}
</style>
