<template>
  <view
    class="card p-4 mb-3 clickable"
    hover-class="scale-down"
    :hover-start-time="0"
    :hover-stay-time="150"
    :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.type === 'emergency'" class="px-2 py-1 bg-warning-light text-warning 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>

    <view class="gap-y-1 mb-3">
      <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 v-if="task.team" class="flex items-center">
        <text class="uni-icons uniui-person-filled text-gray-400 text-xs mr-1"></text>
        <text class="text-gray-500 text-xs">施工班组：{{ task.team }}</text>
      </view>
      <view v-if="task.acceptType" class="flex items-center">
        <text class="uni-icons uniui-checkmarkempty text-gray-400 text-xs mr-1"></text>
        <text class="text-gray-500 text-xs">验收方式：{{ task.acceptType }}</text>
      </view>
    </view>

    <view class="pt-3 border-t border-gray-100">
      <view class="flex justify-between text-xs text-gray-400 mb-1">
        <text>进度</text>
        <text>{{ progressPercent }}%</text>
      </view>
      <view class="h-2 bg-gray-100 rounded-full overflow-hidden">
        <view class="h-full bg-primary rounded-full" :style="{ width: `${progressPercent}%` }"></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 progressPercent = computed(() => {
  const map: Record<string, number> = {
    pending: 0,
    rejected: 0,
    confirmed: 25,
    scheduled: 50,
    departed: 60,
    arrived: 70,
    constructing: 75,
    inspecting: 90,
    completed: 100,
    cancelled: 0,
  }
  return map[props.task.status] ?? 0
})
</script>

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