<template>
  <view
    class="task-card"
    :class="cardClass"
    @click="onClick"
  >
    <view class="header">
      <text class="task-name">{{ projectName }}</text>
      <StatusTag :status="status" />
    </view>

    <slot />

    <!-- 进度条（如果有步骤） -->
    <view v-if="steps && steps.length > 0" class="mt-3">
      <view class="progress-track">
        <view
          class="progress-fill"
          :style="{ width: progressPercent + '%' }"
        />
      </view>
      <view class="flex justify-between mt-1">
        <text
          v-for="(step, index) in steps"
          :key="index"
          class="step-label"
          :class="{ 'text-primary': index <= currentStep, 'text-gray-400': index > currentStep }"
        >
          {{ step }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import StatusTag from '@/components/common/StatusTag.vue'

interface Props {
  projectName: string
  status: string
  statusType?: 'task' | 'project'
  isEmergency?: boolean
  isTimeout?: boolean
  isCompleted?: boolean
  steps?: string[]
  currentStep?: number
}

const props = withDefaults(defineProps<Props>(), {
  statusType: 'task',
  isEmergency: false,
  isTimeout: false,
  isCompleted: false,
  steps: () => [],
  currentStep: 0
})

const emit = defineEmits<{
  (e: 'click'): void
}>()

const cardClass = computed(() => {
  const classes: string[] = []
  if (props.isEmergency) classes.push('emergency')
  if (props.isTimeout) classes.push('timeout')
  if (props.isCompleted) classes.push('completed')
  return classes.join(' ')
})

const progressPercent = computed(() => {
  if (!props.steps || props.steps.length === 0) return 0
  return ((props.currentStep + 1) / props.steps.length) * 100
})

function onClick() {
  emit('click')
}
</script>

<style scoped>
.task-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  position: relative;
  overflow: hidden;
}

.task-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 应急/加急 - 左侧红色边框 */
.task-card.emergency {
  border-left: 4px solid #ef4444;
}

/* 超时/即将超时 - 淡红色背景 */
.task-card.timeout {
  background: #fef2f2;
}

/* 已完成 - 淡绿色背景 */
.task-card.completed {
  background: #f0fdf4;
}

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

.task-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.progress-track {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.step-label {
  font-size: 10px;
  font-weight: 500;
}

.text-primary {
  color: #2563eb;
}

.text-gray-400 {
  color: #9ca3af;
}
</style>
