<template>
  <view
    class="card p-4 mb-3 clickable"
    hover-class="scale-down"
    :class="{
      'border-l-4 border-red-500': task.type === 'emergency',
      'bg-green-50': task.status === 'completed'
    }"
    @click="$emit('click', task.id)"
  >
    <view class="flex justify-between items-start mb-2">
      <view class="flex-1 min-w-0 mr-3">
        <text class="text-sm font-semibold text-gray-800 truncate block">{{ task.projectName || '未命名任务' }}</text>
      </view>
      <StatusTag :status="task.status" />
    </view>

    <view class="flex flex-wrap gap-2 mb-3">
      <view v-if="task.urgent === 'high'" class="px-2 py-1 bg-danger-light text-danger rounded text-xs font-medium">
        加急
      </view>
      <view v-if="task.coopType" class="px-2 py-1 bg-primary-light text-primary rounded text-xs font-medium">
        {{ task.coopType }}
      </view>
      <view v-if="task.serviceMode" class="px-2 py-1 bg-success-light text-success rounded text-xs font-medium">
        {{ task.serviceMode }}
      </view>
    </view>

    <view class="gap-y-2 mb-3">
      <view class="flex items-center">
        <text class="uni-icons uniui-tools text-gray-400 text-xs mr-1"></text>
        <text class="text-gray-500 text-xs">{{ task.serviceType || '施工服务' }}</text>
      </view>
      <view class="flex items-center">
        <text class="uni-icons uniui-clock-filled text-gray-400 text-xs mr-1"></text>
        <text class="text-gray-500 text-xs">{{ task.serviceDate || task.scheduleDate || '待定' }} {{ task.serviceTime || task.scheduleTime || '' }}</text>
      </view>
      <view class="flex items-center">
        <text class="uni-icons uniui-location-filled text-gray-400 text-xs mr-1"></text>
        <text class="text-gray-500 text-xs truncate">{{ task.address || '暂无地址' }}</text>
      </view>
    </view>

    <view class="pt-3 border-t border-gray-100">
      <view class="flex items-center justify-between">
        <view
          v-for="step in steps"
          :key="step.key"
          class="flex-1 flex flex-col items-center"
        >
          <view
            class="w-6 h-6 rounded-full flex items-center justify-center text-xs mb-1"
            :class="step.active ? 'bg-primary text-white' : 'bg-gray-100 text-gray-400'"
          >
            {{ step.label }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const props = defineProps<{
  task: Task
}>()

defineEmits<{
  click: [taskId: string]
}>()

const steps = computed(() => {
  const status = props.task.status
  return [
    { key: 'confirm', label: '确认', active: true },
    { key: 'depart', label: '出车', active: ['departed', 'arrived', 'constructing', 'completed', 'inspecting'].includes(status) },
    { key: 'arrive', label: '到达', active: ['arrived', 'constructing', 'completed', 'inspecting'].includes(status) },
    { key: 'construct', label: '施工', active: ['constructing', 'completed', 'inspecting'].includes(status) },
    { key: 'complete', label: '完成', active: ['completed', 'inspecting'].includes(status) },
    { key: 'clean', label: '清洗', active: props.task.cleanTime != null || status === 'inspecting' || status === 'completed' },
    { key: 'inspect', label: '验收', active: status === 'inspecting' || status === 'completed' },
  ]
})
</script>

<style scoped>
.scale-down {
  transition: transform 0.15s ease;
}
.scale-down:active {
  transform: scale(0.95);
}
</style>
