<!-- RecentActivities 最近活动 -->
<script setup lang="ts">
// Mock data for recent activities
const recentActivities = ref([
  {
    id: 1,
    title: '经销商合同审批已通过',
    type: '审批',
    user: '张三',
    time: '10分钟前',
    icon: 'DocumentChecked',
    color: '#22c55e'
  },
  {
    id: 2,
    title: '新增经销商"汇亚科技"',
    type: '经销商',
    user: '李四',
    time: '1小时前',
    icon: 'Shop',
    color: '#1d5af3'
  },
  {
    id: 3,
    title: '客户"王五"完成跟进',
    type: 'CRM',
    user: '赵六',
    time: '2小时前',
    icon: 'User',
    color: '#8b5cf6'
  },
  {
    id: 4,
    title: '订单#12345已发货',
    type: '供应链',
    user: '孙七',
    time: '3小时前',
    icon: 'Truck',
    color: '#f59e0b'
  }
]);
</script>

<template>
  <div class="recent-activities-card">
    <div class="card-header">
      <h3 class="card-title">最近活动</h3>
      <el-button size="small" text>
        查看全部
      </el-button>
    </div>

    <div class="card-body">
      <div class="activity-list">
        <div
          v-for="activity in recentActivities"
          :key="activity.id"
          class="activity-item"
        >
          <el-icon class="activity-icon" :style="{ color: activity.color }">
            <component :is="activity.icon" />
          </el-icon>

          <div class="activity-content">
            <div class="activity-title">{{ activity.title }}</div>
            <div class="activity-meta">
              <el-tag size="small" type="info" effect="plain">{{ activity.type }}</el-tag>
              <span class="activity-user">{{ activity.user }}</span>
              <span class="activity-time">{{ activity.time }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.recent-activities-card {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--color-border);

  .card-header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin: 0;
    }
  }

  .card-body {
    .activity-list {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .activity-item {
        display: flex;
        gap: 12px;
        align-items: flex-start;

        .activity-icon {
          width: 24px;
          height: 24px;
          font-size: 24px;
          flex-shrink: 0;
        }

        .activity-content {
          display: flex;
          flex-direction: column;
          gap: 6px;
          flex: 1;

          .activity-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-primary);
          }

          .activity-meta {
            display: flex;
            gap: 8px;
            align-items: center;
            font-size: 12px;
            color: var(--color-text-secondary);

            .activity-user {
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>