<template>
  <div class="dashboard-card">
    <div class="card-header">
      <h3>下发任务</h3>
      <button class="add-task-btn" @click="$emit('show-task-modal')">
        <i class="icon-plus"></i> 新建任务
      </button>
    </div>
    <div class="task-list compact">
      <div v-for="task in tasks.slice(0, 10)" :key="task.id" class="task-item">
        <div class="task-content">
          <div class="task-title">{{ task.title }}</div>
          <div class="task-meta" style="display: flex; gap: 15px;">
            <span class="deadline">创建时间: {{ formatDate(task.created_at) }}</span>
          </div>
        </div>
        <div class="task-status" :class="task.status">
          {{ getTaskStatusText(task.status) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { assignTasks } from '@/api/top.js';

defineProps({
  tasks: Array,
  formatDate: Function,
  getTaskStatusText: Function
});

defineEmits(['show-task-modal']);
</script>

<style scoped>
.dashboard-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 350px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
}

.add-task-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.add-task-btn i {
  margin-right: 4px;
}

.task-list.compact .task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.task-list.compact .task-item:last-child {
  border-bottom: none;
}

.task-title {
  font-weight: bold;
}

.task-meta {
  font-size: 12px;
  color: #666;
}

.task-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.task-status.pending {
  background-color: #FFC107;
  color: #fff;
}

.task-status.completed {
  background-color: #4CAF50;
  color: #fff;
}

.task-status.overdue {
  background-color: #F44336;
  color: #fff;
}

.icon-plus::before { content: '+'; }
</style>