<template>
  <el-card class="task-card" shadow="hover" :class="{ 'urgent': task.urgency === 1, 'overdue': task.urgency === 2 }">
    <div class="task-card-main">
      <div class="task-card-header">
        <div class="task-title">{{ task.definitionName || '未命名流程' }}</div>
        <el-tag v-if="task.urgency === 2" type="danger" size="small" effect="dark">已超时</el-tag>
        <el-tag v-else-if="task.urgency === 1" type="warning" size="small" effect="dark">即将超时</el-tag>
      </div>
      <div class="task-card-body">
        <div class="task-meta">
          <span class="meta-label">当前节点</span>
          <el-tag type="warning" size="small">{{ task.nodeName }}</el-tag>
        </div>
        <div class="task-meta">
          <span class="meta-label">到达时间</span>
          <span>{{ task.createTime }}</span>
        </div>
        <div v-if="task.timeoutTime" class="task-meta">
          <span class="meta-label">剩余时间</span>
          <span :class="{ 'text-danger': task.urgency === 2, 'text-warning': task.urgency === 1 }">{{ formatRemaining }}</span>
        </div>
      </div>
    </div>
    <div v-if="showActions" class="task-card-actions">
      <el-button circle type="success" size="small" :icon="Check" @click.stop="$emit('approve', task)" />
      <el-button circle type="danger" size="small" :icon="Close" @click.stop="$emit('reject', task)" />
      <el-button circle type="warning" size="small" :icon="Back" @click.stop="$emit('rollback', task)" />
      <el-button circle type="info" size="small" :icon="Plus" @click.stop="$emit('add-sign', task)" />
      <el-button circle type="primary" size="small" :icon="View" @click.stop="$emit('detail', task)" />
    </div>
    <div v-else class="task-card-actions">
      <el-button circle type="primary" size="small" :icon="View" @click.stop="$emit('detail', task)" />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Check, Close, Back, Plus, View } from '@element-plus/icons-vue'
import type { FlowTask } from '@/types/flow'

const props = defineProps<{
  task: FlowTask
  showActions?: boolean
}>()

defineEmits<{
  (e: 'approve', task: FlowTask): void
  (e: 'reject', task: FlowTask): void
  (e: 'rollback', task: FlowTask): void
  (e: 'add-sign', task: FlowTask): void
  (e: 'detail', task: FlowTask): void
}>()

const formatRemaining = computed(() => {
  if (props.task.urgency === 2) {
    const hours = Math.abs(Math.ceil((props.task.remainingMinutes ?? 0) / 60))
    return `已超时 ${hours} 小时`
  }
  const hours = Math.ceil((props.task.remainingMinutes ?? 0) / 60)
  return `剩余 ${hours} 小时`
})
</script>

<style scoped>
.task-card {
  position: relative;
  overflow: hidden;
}
.task-card.overdue {
  border-left: 4px solid #f56c6c;
}
.task-card.urgent {
  border-left: 4px solid #e6a23c;
}
.task-card-main {
  padding-right: 48px;
}
.task-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.task-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
}
.meta-label {
  color: #909399;
  width: 70px;
  flex-shrink: 0;
}
.task-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.task-card:hover .task-card-actions {
  opacity: 1;
}
.task-card-actions .el-button {
  margin: 0;
}
.text-danger { color: #f56c6c; }
.text-warning { color: #e6a23c; }
</style>
