<template>
  <view
    class="card p-4 mb-3 clickable border-l-4 border-primary"
    hover-class="scale-down"
    :class="{
      'border-red-500': task.type === 'emergency',
      'bg-green-50': task.status === 'completed'
    }"
    :style="borderStyle"
    @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="gap-y-2 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 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 v-if="task.facilityType" class="text-gray-400"> / {{ task.facilityType }}</text>
        </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">{{ formatTime }}</text>
      </view>
      <view v-if="task.applicant" 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.applicant }}</text>
      </view>
    </view>

    <view class="pt-2 border-t border-gray-100 flex justify-between items-center">
      <text class="text-xs text-gray-400">{{ statusHint }}</text>
      <text class="text-xs font-medium" :style="{ color: actionColor }">{{ actionText }}</text>
    </view>

    <view v-if="task.rejectReason" class="pt-2 border-t border-gray-100">
      <text class="text-xs text-danger">驳回原因：{{ task.rejectReason }}</text>
    </view>
  </view>
</template>

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

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

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

const borderStyle = computed(() => {
  const color = {
    pending: '#f59e0b',
    confirmed: '#2563eb',
    scheduled: '#2563eb',
    departed: '#8b5cf6',
    arrived: '#10b981',
    constructing: '#2563eb',
    inspecting: '#f59e0b',
    completed: '#10b981',
    cancelled: '#ef4444',
    rejected: '#ef4444',
  }[props.task.status] || '#2563eb'
  return { borderLeftColor: color }
})

const formatTime = computed(() => {
  if (props.task.applyTime) return formatDate(props.task.applyTime, 'MM-DD HH:mm')
  if (props.task.createTime) return formatDate(props.task.createTime, 'MM-DD HH:mm')
  return '待定'
})

const statusHint = computed(() => {
  const map: Record<string, string> = {
    pending: '需调度安排',
    confirmed: '待安排班组',
    scheduled: '已安排，待出车',
    departed: '已出车',
    arrived: '已到达现场',
    constructing: '正在施工',
    inspecting: '待验收',
    completed: '已完成',
    rejected: '已驳回',
    cancelled: '已取消',
  }
  return map[props.task.status] || '待处理'
})

const actionText = computed(() => {
  const map: Record<string, string> = {
    pending: '去审核',
    confirmed: '去排班',
    scheduled: '查看',
    rejected: '查看',
  }
  return map[props.task.status] || '查看'
})

const actionColor = computed(() => {
  if (['pending', 'confirmed'].includes(props.task.status)) return '#2563eb'
  return '#9ca3af'
})
</script>

<style scoped>
.border-l-4 {
  border-left-width: 4px;
}
.scale-down {
  transition: transform 0.15s ease;
  transform: scale(0.95);
}
.scale-down:hover,
.scale-down:active {
  transform: scale(0.95);
}
</style>
