<template>
  <div class="active-plate">
    <el-row :gutter="20">
      <el-col :xs="12" :sm="8" :md="8" :lg="6" v-for="(item, index) in infoList" :key="index" @click="handleClick(item)">
        <div class="info-card" :style="{ borderColor: item.color }">
          <div class="icon-box" :style="{ background: item.color }">
            <el-icon :size="24" :color="item.color === '#ffffff' ? '#333' : '#fff'">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <div class="content">
            <div class="count">{{ item.count }}</div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
interface InfoItem {
  icon: any
  title: string
  count: number | string
  color: string
}

defineProps({
  infoList: {
    type: Array as () => InfoItem[],
    default: () => []
  }
})

const handleClick = (item: InfoItem) => {
  // 处理点击事件
  console.log('Clicked item:', item)
}
</script>

<style lang="scss" scoped>
.active-plate {
  .info-card {
    display: flex;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 4px solid #ddd;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    .icon-box {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
    }

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .count {
        font-size: 24px;
        font-weight: 500;
        line-height: 1.2;
        color: #333;
      }

      .title {
        font-size: 14px;
        color: #909399;
        margin-top: 5px;
      }
    }
  }
}
</style>
