<template>
  <view
    class="task-card clickable"
    hover-class="scale-down"
    :hover-start-time="0"
    :hover-stay-time="150"
    :style="borderStyle"
    @click="$emit('click', String((task as any).id ?? (task as any).taskId ?? ''))"
  >
    <!-- 顶部：标题 + 状态 -->
    <view class="task-header">
      <text class="task-title truncate">{{ titleText }}</text>
      <StatusTag :status="task.status" />
    </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-gear-filled info-icon"></text>
        <text class="info-text">{{ serviceTypeText }}</text>
      </view>
      <view class="info-row">
        <text class="uni-icons uniui-calendar-filled info-icon"></text>
        <text class="info-text">{{ formatTime }}</text>
      </view>
    </view>

    <!-- 底部：申请人 + 操作提示 -->
    <view class="footer">
      <text class="footer-hint">{{ applicantText }}</text>
      <text class="footer-action" :style="{ color: actionColor }">{{ actionText }}</text>
    </view>

    <!-- 驳回原因 -->
    <view v-if="rejectReasonText" class="reject-reason">
      <text class="uni-icons uniui-info-filled reject-icon"></text>
      <text class="reject-text">驳回原因：{{ rejectReasonText }}</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, getConstructionTypeText, getFacilityTypeText } from '@/utils'

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

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

const titleText = computed(() => {
  return (props.task as any).taskName
    || props.task.projectName
    || (props.task as any).serviceContent
    || props.task.faultLocation
    || (props.task as any).taskNo
    || '未命名任务'
})

const borderStyle = computed(() => {
  const color = {
    pending: '#f59e0b',
    auditing: '#f59e0b',
    approved: '#f59e0b',
    assigned: '#3b82f6',
    in_progress: '#3b82f6',
    confirmed: '#eab308',
    scheduled: '#3b82f6',
    departed: '#3b82f6',
    arrived: '#3b82f6',
    constructing: '#3b82f6',
    inspecting: '#3b82f6',
    completed: '#10b981',
    cancelled: '#ef4444',
    rejected: '#ef4444',
  }[props.task.status] || '#e5e7eb'
  return {
    borderLeftWidth: '8rpx',
    borderLeftStyle: 'solid',
    borderLeftColor: color,
  } as any
})

const serviceTypeText = computed(() => {
  const rawService = props.task.serviceType || (props.task as any).constructionType
  const service = rawService ? getConstructionTypeText(rawService) : '施工服务'
  const facility = props.task.facilityType || (props.task as any).constructionFacility
  return facility ? `${service} / ${getFacilityTypeText(facility)}` : service
})

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 rejectReasonText = computed(() => {
  if (props.task.status !== 'rejected') return ''
  return props.task.rejectReason || (props.task as any).auditRemark || ''
})

const applicantText = computed(() => {
  return props.task.applicant ? `申请人：${props.task.applicant}` : '申请人：-'
})

const actionText = computed(() => {
  const map: Record<string, string> = {
    pending: '需调度安排',
    auditing: '需调度安排',
    approved: '待安排班组',
    assigned: '查看',
    in_progress: '查看',
    confirmed: '待安排班组',
    scheduled: '查看',
    rejected: '查看',
    completed: '查看',
    cancelled: '查看',
  }
  return map[props.task.status] || '去处理'
})

const actionColor = computed(() => {
  if (['pending', 'auditing', 'approved', 'confirmed'].includes(props.task.status)) return '#f59e0b'
  if (props.task.status === 'rejected' || props.task.status === 'cancelled') return '#ef4444'
  if (props.task.status === 'completed') return '#10b981'
  return '#3b82f6'
})
</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-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.task-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  flex: 1;
  margin-right: 24rpx;
  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: #9ca3af;
  font-size: 24rpx;
  margin-right: 16rpx;
  width: 40rpx;
  text-align: center;
}
.info-text {
  font-size: 26rpx;
  color: #666666;
  flex: 1;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #f3f4f6;
}
.footer-hint {
  font-size: 24rpx;
  color: #9ca3af;
}
.footer-action {
  font-size: 24rpx;
  font-weight: 500;
}

.reject-reason {
  display: flex;
  align-items: flex-start;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f3f4f6;
}
.reject-icon {
  color: #ef4444;
  font-size: 24rpx;
  margin-right: 12rpx;
  margin-top: 4rpx;
}
.reject-text {
  font-size: 24rpx;
  color: #ef4444;
  flex: 1;
  line-height: 1.5;
}

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