<template>
  <div class="real-time-activity">
    <!-- 最新事件列表 -->
    <div class="activity-section" v-if="showEvents">
      <div class="section-header" v-if="!suppressSectionHeader">
        <i class="el-icon-warning"></i>
        <span>最新事件</span>
      </div>
      <div class="event-list">
        <div 
          v-for="(event, index) in latestEvents" 
          :key="index" 
          class="event-item"
          :class="`level-${event.level}`"
          @click="handleEventClick(event)"
        >
          <div class="event-info">
            <div class="event-title">
              <el-tag :type="getLevelType(event.level)" size="mini">{{ event.level }}级</el-tag>
              <span class="event-no">{{ event.eventNo }}</span>
            </div>
            <div class="event-desc">{{ event.title }}</div>
            <div class="event-meta">
              <span class="event-type">{{ event.type }}</span>
              <span class="event-time">{{ event.time }}</span>
            </div>
          </div>
        </div>
        <div v-if="latestEvents.length === 0" class="empty-state">
          <i class="el-icon-info"></i>
          <p>暂无最新事件</p>
        </div>
      </div>
    </div>

    <!-- 进行中的调度任务 -->
    <div class="activity-section" v-if="showDispatches">
      <div class="section-header" v-if="!suppressSectionHeader">
        <i class="el-icon-coordinate"></i>
        <span>调度任务</span>
      </div>
      <div class="dispatch-list">
        <div 
          v-for="(task, index) in activeDispatches" 
          :key="index" 
          class="dispatch-item"
          @click="handleDispatchClick(task)"
        >
          <div class="dispatch-info">
            <div class="dispatch-title">{{ task.title }}</div>
            <div class="dispatch-meta">
              <span>事件：{{ task.eventNo }}</span>
              <span>执行对象：{{ task.assignee }}</span>
            </div>
            <div class="dispatch-progress">
              <el-progress :percentage="task.progress" :status="task.progress === 100 ? 'success' : undefined"></el-progress>
            </div>
          </div>
        </div>
        <div v-if="activeDispatches.length === 0" class="empty-state">
          <i class="el-icon-info"></i>
          <p>暂无进行中的调度任务</p>
        </div>
      </div>
    </div>

    <!-- 待办提醒 -->
    <div class="activity-section" v-if="showTodos">
      <div class="section-header" v-if="!suppressSectionHeader">
        <i class="el-icon-bell"></i>
        <span>待办提醒</span>
      </div>
      <div class="todo-list">
        <div 
          v-for="(todo, index) in todos" 
          :key="index" 
          class="todo-item"
          :class="`todo-${todo.type}`"
          @click="handleTodoClick(todo)"
        >
          <i :class="getTodoIcon(todo.type)"></i>
          <div class="todo-content">
            <div class="todo-title">{{ todo.title }}</div>
            <div class="todo-count">{{ todo.count }}项</div>
          </div>
        </div>
        <div v-if="todos.length === 0" class="empty-state">
          <i class="el-icon-success"></i>
          <p>暂无待办事项</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RealTimeActivity',
  props: {
    latestEvents: {
      type: Array,
      default: () => []
    },
    activeDispatches: {
      type: Array,
      default: () => []
    },
    todos: {
      type: Array,
      default: () => []
    },
    // 控制分区显示
    showEvents: {
      type: Boolean,
      default: true
    },
    showDispatches: {
      type: Boolean,
      default: true
    },
    showTodos: {
      type: Boolean,
      default: true
    },
    suppressSectionHeader: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getLevelType(level) {
      const typeMap = {
        'I': 'danger',
        'II': 'warning',
        'III': 'warning',
        'IV': 'info'
      }
      return typeMap[level] || 'info'
    },
    getTodoIcon(type) {
      const iconMap = {
        'approval': 'el-icon-document',
        'warning': 'el-icon-warning',
        'alert': 'el-icon-bell',
        'system': 'el-icon-setting'
      }
      return iconMap[type] || 'el-icon-info'
    },
    handleEventClick(event) {
      this.$emit('event-click', event)
    },
    handleDispatchClick(task) {
      this.$emit('dispatch-click', task)
    },
    handleTodoClick(todo) {
      this.$emit('todo-click', todo)
    }
  }
}
</script>

<style lang="scss" scoped>
.real-time-activity {
  // 占满父容器(卡片Body)高度，超出滚动
  height: 100%;
  overflow-y: auto;
  padding-right: 8px; // 为滚动条预留空间，避免内容抖动

  // 可选：滚动条样式优化（仅影响 WebKit 内核浏览器）
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
  }

  .activity-section {
    margin-bottom: 20px;

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

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: bold;
      color: #303133;

      i {
        margin-right: 8px;
        font-size: 16px;
        color: #409eff;
      }
    }
  }

  // 最新事件列表
  .event-list {
    .event-item {
      padding: 12px;
      margin-bottom: 10px;
      background: #f5f7fa;
      border-radius: 4px;
      border-left: 4px solid #409eff;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #ecf5ff;
        transform: translateX(4px);
      }

      &.level-I {
        border-left-color: #f56c6c;
        background: #fef0f0;
      }

      &.level-II {
        border-left-color: #e6a23c;
        background: #fdf6ec;
      }

      &.level-III {
        border-left-color: #e6a23c;
        background: #fdf6ec;
      }

      &.level-IV {
        border-left-color: #409eff;
        background: #ecf5ff;
      }

      .event-info {
        .event-title {
          display: flex;
          align-items: center;
          margin-bottom: 6px;

          .event-no {
            margin-left: 8px;
            font-size: 12px;
            color: #909399;
          }
        }

        .event-desc {
          font-size: 14px;
          color: #303133;
          margin-bottom: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .event-meta {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #909399;

          .event-type {
            color: #606266;
          }
        }
      }
    }
  }

  // 调度任务列表
  .dispatch-list {
    .dispatch-item {
      padding: 12px;
      margin-bottom: 10px;
      background: #f5f7fa;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #ecf5ff;
        transform: translateX(4px);
      }

      .dispatch-info {
        .dispatch-title {
          font-size: 14px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 8px;
        }

        .dispatch-meta {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #909399;
          margin-bottom: 8px;
        }

        .dispatch-progress {
          margin-top: 8px;
        }
      }
    }
  }

  // 待办提醒列表
  .todo-list {
    .todo-item {
      display: flex;
      align-items: center;
      padding: 12px;
      margin-bottom: 10px;
      background: #f5f7fa;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #fef0f0;
        transform: translateX(4px);
      }

      &.todo-approval {
        border-left: 4px solid #409eff;
      }

      &.todo-warning {
        border-left: 4px solid #e6a23c;
      }

      &.todo-alert {
        border-left: 4px solid #f56c6c;
      }

      &.todo-system {
        border-left: 4px solid #909399;
      }

      i {
        font-size: 20px;
        margin-right: 12px;
        color: #409eff;
      }

      .todo-content {
        flex: 1;

        .todo-title {
          font-size: 14px;
          color: #303133;
          margin-bottom: 4px;
        }

        .todo-count {
          font-size: 12px;
          color: #f56c6c;
          font-weight: bold;
        }
      }
    }
  }

  // 空状态
  .empty-state {
    text-align: center;
    padding: 30px 0;
    color: #909399;

    i {
      font-size: 32px;
      margin-bottom: 10px;
      display: block;
    }

    p {
      font-size: 14px;
      margin: 0;
    }
  }
}
</style>