<template>
  <div class="task-card" :class="getCardClass(task)">
    <div class="task-card-header">
      <el-tag :type="getStatusTagType(task)" size="small">
        {{ getStatusLabel(task) }}
      </el-tag>
      <span class="task-name">{{ task.name || '未命名任务' }}</span>
    </div>
    
    <div class="task-card-body">
      <div class="task-meta">
        <div class="meta-item">
          <i class="el-icon-document"></i>
          <span>编号：{{ task.taskNo || '-' }}</span>
        </div>
        <div class="meta-item" v-if="task.eventName || task.eventLevel">
          <i class="el-icon-location-outline"></i>
          <span>
            <template v-if="task.eventName">{{ task.eventName }}</template>
            <el-tag 
              v-if="task.eventLevel" 
              size="mini" 
              :type="getEventLevelTagType(task.eventLevel)"
            >
              {{ getEventLevelLabel(task.eventLevel) }}
            </el-tag>
          </span>
        </div>
      </div>
      
      <div class="step-progress" v-if="task.stepProgress">
        <div class="progress-header">
          <span>行动项进度</span>
          <span class="progress-text">
            {{ task.stepProgress.completed || 0 }}/{{ task.stepProgress.total || 0 }} 完成
          </span>
        </div>
        <el-progress 
          :percentage="getStepProgress(task)" 
          :status="getProgressStatus(task)"
          :stroke-width="8"
        />
      </div>
      
      <div class="last-update" v-if="task.lastDisposalTime">
        <i class="el-icon-time"></i>
        <span>最新反馈：{{ formatRelativeTime(task.lastDisposalTime) }}</span>
      </div>
    </div>
    
    <div class="task-card-actions">
      <el-button size="mini" @click.stop="handleView">查看详情</el-button>
    </div>
  </div>
</template>

<script>
import { getLevelLabel, getLevelTagType } from '@/views/duty/alert/utils/alertFormatters'

export default {
  name: 'TaskCard',
  props: {
    task: {
      type: Object,
      required: true
    }
  },
  methods: {
    getCardClass(task) {
      const classes = []
      if (task.status === 'published') {
        classes.push('status-published')
      } else if (task.status === 'in_progress') {
        classes.push('status-in-progress')
      } else if (task.status === 'closed') {
        classes.push('status-closed')
      } else if (task.status === 'cancelled') {
        classes.push('status-cancelled')
      } else if (task.status === 'draft') {
        classes.push('status-draft')
      }
      return classes
    },
    getStatusTagType(task) {
      // Map to tag types based on DispatchTaskStatus enum
      const statusTagMap = {
        'draft': 'info',
        'published': 'warning',
        'in_progress': 'primary',
        'closed': 'success',
        'cancelled': 'info'
      }
      
      return statusTagMap[task.status] || 'info'
    },
    getStatusLabel(task) {
      // Map to enum labels from DispatchTaskStatus
      const statusMap = {
        'draft': '草稿',
        'published': '已下达',
        'in_progress': '执行中',
        'closed': '已关闭',
        'cancelled': '已取消'
      }
      
      return statusMap[task.status] || task.status || '未知'
    },
    getStepProgress(task) {
      if (!task.stepProgress || !task.stepProgress.total) {
        return 0
      }
      const completed = task.stepProgress.completed || 0
      const total = task.stepProgress.total
      return total > 0 ? Math.round((completed / total) * 100) : 0
    },
    getProgressStatus(task) {
      const progress = this.getStepProgress(task)
      if (progress === 100) return 'success'
      if (progress > 0) return null
      return 'exception'
    },
    formatRelativeTime(time) {
      if (!time) return '-'
      // Simple relative time formatter
      const now = new Date()
      const then = new Date(time)
      const diff = now - then
      const minutes = Math.floor(diff / 60000)
      const hours = Math.floor(minutes / 60)
      const days = Math.floor(hours / 24)
      
      if (days > 0) return `${days}天前`
      if (hours > 0) return `${hours}小时前`
      if (minutes > 0) return `${minutes}分钟前`
      return '刚刚'
    },
    handleView() {
      this.$emit('view', this.task)
    },
    getEventLevelLabel(level) {
      if (!level) return ''
      if (level.startsWith('level')) {
        return getLevelLabel(level)?.replace(/[（(].*/, '') || level
      }
      return level
    },
    getEventLevelTagType(level) {
      if (!level) return 'info'
      if (level.startsWith('level')) {
        return getLevelTagType(level) || 'info'
      }
      return 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.task-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #e4e7ed;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  &.status-published {
    border-left-color: #ffba00;
  }
  
  &.status-in-progress {
    border-left-color: #409EFF;
  }
  
  &.status-closed {
    border-left-color: #67C23A;
  }
}

.task-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  
  .task-name {
    font-size: 16px;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.task-card-body {
  margin-bottom: 12px;
}

.task-meta {
  margin-bottom: 12px;
  
  .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #606266;
    margin-bottom: 6px;
    
    i {
      color: #909399;
    }
  }
}

.step-progress {
  margin-bottom: 12px;
  
  .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
    color: #606266;
    
    .progress-text {
      font-weight: 600;
      color: #409EFF;
    }
  }
}

.last-update {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #909399;
  
  i {
    font-size: 14px;
  }
}

.task-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #f0f2f5;
}
</style>