<template>
  <view
    class="task-card clickable"
    hover-class="scale-down"
    :hover-start-time="0"
    :hover-stay-time="150"
    :class="cardClass"
    @click="$emit('click', String((task as any).id ?? (task as any).taskId ?? ''))"
  >
    <!-- 顶部：状态/标签 + 时间 -->
    <view class="header">
      <view class="flex items-center gap-2">
        <StatusTag :status="task.status" />
        <view v-if="urgentText" class="urgent-tag" :class="urgentClass">
          {{ urgentText }}
        </view>
        <view v-if="isEmergency" class="urgent-tag urgent-high">
          应急
        </view>
      </view>
      <text class="time-text">{{ formatTime }}</text>
    </view>

    <!-- 任务名称 -->
    <view class="task-name">{{ (task as any).taskName || task.projectName || '未命名任务' }}</view>

    <!-- 信息行 -->
    <view class="info-list">
      <view class="info-row">
        <text class="uni-icons uniui-location-filled info-icon"></text>
        <text class="info-text truncate">{{ task.address || '暂无地址' }}</text>
      </view>
      <view class="info-row">
        <text class="uni-icons uniui-person-filled info-icon"></text>
        <text class="info-text">施工班组：{{ task.teamName || task.team || '待分配' }}</text>
      </view>
      <view class="info-row">
        <text class="uni-icons uniui-checkmarkempty info-icon"></text>
        <text class="info-text">验收：{{ acceptTypeText }}</text>
      </view>
    </view>

    <!-- 底部进度条 -->
    <view class="progress-section">
      <view class="progress-bar-track">
        <view class="progress-bar-fill" :style="{ width: `${progressPercent}%` }"></view>
        <view
          v-for="(step, i) in progressSteps"
          :key="i"
          class="progress-bar-step"
          :class="{ 'completed': step.active, 'active': step.current }"
        />
      </view>
      <view class="progress-bar-labels">
        <text
          v-for="(step, i) in progressSteps"
          :key="i"
          class="progress-bar-label"
          :class="{ 'active': step.active }"
        >{{ step.label }}</text>
      </view>
    </view>
  </view>
</template>

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

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

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

const isEmergency = computed(() => (props.task.taskType || props.task.type) === 'emergency')

const urgentText = computed(() => {
  if (props.task.urgent === 'high' || props.task.urgent === 'very_urgent' || props.task.urgencyLevel === 'high') return '紧急'
  if (props.task.urgent === 'normal' || props.task.urgencyLevel === 'normal') return '普通'
  return ''
})

const urgentClass = computed(() => {
  const urgent = props.task.urgent || props.task.urgencyLevel
  return ['high', 'very_urgent', 'urgent'].includes(urgent as string) ? 'urgent-high' : 'urgent-normal'
})

const cardClass = computed(() => {
  if (props.task.status === 'completed') return 'is-completed'
  if (isEmergency.value) return 'is-emergency'
  // 暂无超时字段，保留类名供后续扩展
  return ''
})

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 acceptTypeText = computed(() => {
  const raw = props.task.acceptType || props.task.acceptanceMethod
  return raw ? getAcceptanceMethodText(raw) : '签署验收计量单'
})

const progressSteps = computed(() => {
  const status = props.task.status
  const steps = [
    { label: '发布', active: true, current: false },
    { label: '调度确认', active: false, current: false },
    { label: '施工中', active: false, current: false },
    { label: '完成', active: false, current: false },
  ]

  const order = ['pending', 'auditing', 'rejected', 'confirmed', 'scheduled', 'departed', 'arrived', 'constructing', 'inspecting', 'completed', 'cancelled']
  const idx = order.indexOf(status)

  if (idx >= order.indexOf('confirmed')) {
    steps[1].active = true
  }
  if (idx >= order.indexOf('scheduled')) {
    steps[1].current = false
  }
  if (['departed', 'arrived', 'constructing', 'inspecting'].includes(status)) {
    steps[2].active = true
    steps[2].current = true
  }
  if (status === 'completed') {
    steps[2].active = true
    steps[2].current = false
    steps[3].active = true
    steps[3].current = true
  }

  // 当前步骤高亮：调度确认/施工中
  if (['pending', 'auditing', 'rejected'].includes(status)) {
    steps[1].current = true
  } else if (['confirmed', 'scheduled'].includes(status)) {
    steps[2].current = true
  }

  return steps
})

const progressPercent = computed(() => {
  const map: Record<string, number> = {
    pending: 0,
    auditing: 0,
    rejected: 0,
    confirmed: 33,
    scheduled: 33,
    departed: 66,
    arrived: 66,
    constructing: 66,
    inspecting: 66,
    completed: 100,
    cancelled: 0,
  }
  return map[props.task.status] ?? 0
})
</script>

<style scoped>
.task-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.15s ease;
}
.task-card.is-emergency {
  border-left: 8rpx solid #ef4444;
}
.task-card.is-completed {
  background: #f0fdf4;
}

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

.urgent-tag {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  line-height: 1;
}
.urgent-high {
  background: #fef2f2;
  color: #dc2626;
}
.urgent-normal {
  background: #f3f4f6;
  color: #6b7280;
}

.time-text {
  font-size: 24rpx;
  color: #9ca3af;
  flex-shrink: 0;
}

.task-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.info-list {
  margin-bottom: 24rpx;
}
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.info-row:last-child {
  margin-bottom: 0;
}
.info-icon {
  color: #999999;
  font-size: 24rpx;
  margin-right: 12rpx;
  width: 40rpx;
  text-align: center;
}
.info-text {
  font-size: 26rpx;
  color: #666666;
  flex: 1;
}

.progress-section {
  margin-top: 8rpx;
  padding: 0 8rpx;
}
.progress-bar-track {
  height: 8rpx;
  background: #e5e7eb;
  border-radius: 4rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.progress-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #3b82f6;
  border-radius: 4rpx;
  transition: width 0.3s ease;
}
.progress-bar-step {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #e5e7eb;
  border: 4rpx solid #ffffff;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.progress-bar-step.completed {
  background: #3b82f6;
}
.progress-bar-step.active {
  background: #3b82f6;
  box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.3);
}
.progress-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12rpx;
}
.progress-bar-label {
  font-size: 20rpx;
  color: #9ca3af;
  text-align: center;
}
.progress-bar-label.active {
  color: #3b82f6;
  font-weight: 500;
}

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