<template>
  <view class="task-detail-container">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <!-- 左上角：返回上一页按钮 -->
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">←</text>
        <text class="nav-title">返回</text>
      </view>

      <!-- 页面标题居中 -->
      <text class="page-title">任务详情</text>

      <!-- 右上角留空 -->
      <view class="nav-right"></view>
    </view>

    <!-- 任务详情卡片 -->
    <view class="task-card">
      <view class="task-header">
        <text class="task-id">任务 #{{ task?.id?.slice(-6) || '未知' }}</text>
        <view class="task-status" :class="'status-' + (task?.status || 0)">
          {{ getTaskStatusText(task?.status) }}
        </view>
      </view>

      <view class="task-info">
        <view class="info-item">
          <text class="info-label">取货地址:</text>
          <text class="info-value">{{ getAddressText(task?.pickup_address) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">送达地址:</text>
          <text class="info-value">{{ getAddressText(task?.delivery_address) }}</text>
        </view>
        <view class="info-item" v-if="task?.distance">
          <text class="info-label">距离:</text>
          <text class="info-value">{{ task.distance }}km</text>
        </view>
        <view class="info-item" v-if="task?.estimated_time">
          <text class="info-label">预计时间:</text>
          <text class="info-value">{{ task.estimated_time }}分钟</text>
        </view>
        <view class="info-item" v-if="task?.delivery_fee">
          <text class="info-label">配送费:</text>
          <text class="info-value">¥{{ task.delivery_fee }}</text>
        </view>
        <view class="info-item" v-if="task?.created_at">
          <text class="info-label">创建时间:</text>
          <text class="info-value">{{ formatTime(task.created_at) }}</text>
        </view>
      </view>

      <view class="task-actions">
        <button class="action-btn" @click="contactCustomer">联系客户</button>
        <button class="action-btn primary" @click="completeTask">完成配送</button>
      </view>
    </view>

    <!-- 任务备注 -->
    <view v-if="task?.remark" class="task-remark">
      <text class="remark-title">备注:</text>
      <text class="remark-text">{{ task.remark }}</text>
    </view>

    <!-- 联系客户按钮（重复显示，符合截图） -->
    <view class="contact-client">
      <button class="contact-btn" @click="contactCustomer">联系客户</button>
    </view>

    <!-- 查看详情按钮（实际就是返回上一页） -->
    <view class="view-detail">
      <button class="detail-btn" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'

// 响应式数据
const task = ref(null)

// ✅ 关键：在 setup 中无法直接访问 onLoad，所以改用以下方式
// 方案：通过 getCurrentPages() 获取当前页面参数
function getQueryParams() {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  return currentPage.options || {}
}

// 在 onMounted 中获取参数
onMounted(() => {
  const query = getQueryParams()
  const taskId = query.id
  
  if (!taskId) {
    uni.showToast({
      title: '任务ID不能为空',
      icon: 'none'
    })
    console.error('❌ 未获取到 taskId，query:', query)
    return
  }
  
  loadTaskDetail(taskId)
})

// 其他方法保持不变...
function loadTaskDetail(taskId: string) {
  const mockTasks = [
    {
      id: 'task001',
      order_id: 'ORD20250122001',
      pickup_address: { address: '深圳市南山区科技园南区深圳湾科技生态园' },
      delivery_address: { address: '深圳市南山区蛇口海上世界广场' },
      distance: 8.2,
      estimated_time: 25,
      delivery_fee: 12.0,
      status: 3,
      remark: '联系电话: 13800138000',
      created_at: '2025-01-22 14:00:00'
    },
    // 更多模拟数据...
  ]

  const foundTask = mockTasks.find(t => t.id === taskId)
  if (foundTask) {
    task.value = foundTask
    console.log('✅ 加载任务成功:', task.value)
  } else {
    uni.showToast({ title: '未找到该任务', icon: 'none' })
    console.warn('⚠️ 任务ID不存在:', taskId)
  }
}

// 其他方法...
function getTaskStatusText(status: number): string {
  const statusMap = {
    1: '待接单',
    2: '已接单',
    3: '配送中',
    4: '已完成',
    5: '已取消'
  }
  return statusMap[status] || '未知'
}

function getAddressText(address: UTSJSONObject): string {
  return address?.['address'] as string || '地址信息'
}

function formatTime(dateStr: string): string {
  if (!dateStr) return '未知时间'
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const hours = Math.floor(diff / (1000 * 60 * 60))
  
  if (hours < 1) return '刚刚'
  if (hours < 24) return `${hours}小时前`
  return `${Math.floor(hours / 24)}天前`
}

function contactCustomer() {
  uni.showActionSheet({
    itemList: ['拨打电话', '发送短信'],
    success: (res) => {
      if (res.tapIndex === 0) {
        uni.makePhoneCall({ phoneNumber: '13800138000' })
      }
    }
  })
}

function completeTask() {
  if (task.value?.status !== 3) {
    uni.showToast({ title: '当前任务不是“配送中”状态', icon: 'none' })
    return
  }
  task.value.status = 4
  uni.showToast({ title: '任务已完成', icon: 'success' })
}

function goBack() {
  uni.navigateBack()
}
</script>

<style scoped>
.task-detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx 30rpx;
}

/* 导航栏样式 */
.page-header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e9ecef;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative;
  min-height: 80rpx;
}

.nav-left {
  position: absolute;
  top: 20rpx;
  left: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10rpx;
  border-radius: 8rpx;
  transition: background-color 0.2s ease;
}

.nav-left:hover {
  background-color: #f0f0f0;
}

.nav-left:active {
  background-color: #e0e0e0;
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.nav-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
}

.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 20rpx;
}

.nav-right {
  width: 1rpx;
  height: 1rpx;
}

/* 任务详情卡片 */
.task-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border-left: 6rpx solid #74b9ff;
  margin-top: 20rpx;
}

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

.task-id {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.task-status {
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  font-weight: 500;
  color: white;
}

.status-1 {
  background: #ffeb3b;
  color: #333;
}

.status-3 {
  background: #2196f3;
  color: white;
}

.status-4 {
  background: #4caf50;
  color: white;
}

.task-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #666;
}

.info-label {
  font-weight: 500;
  min-width: 100rpx;
}

.info-value {
  flex: 1;
  word-break: break-all;
}

.task-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
  font-weight: bold;
  padding: 0 10rpx;
  box-sizing: border-box;
}

.action-btn:hover {
  background-color: #45a049; /* 按钮悬停效果 */
}

.action-btn:active {
  background-color: #3d8b40; /* 按钮点击效果 */
}

.action-btn.primary {
  background-color: #4CAF50;
  color: #fff;
}

/* 任务备注 */
.task-remark {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  margin-top: 20rpx;
}

.remark-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.remark-text {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

/* 联系客户按钮 */
.contact-client {
  margin-top: 20rpx;
}

.contact-btn {
  width: 100%;
  height: 80rpx;
  background-color: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-btn:hover {
  background-color: #e0e0e0;
}

.contact-btn:active {
  background-color: #d0d0d0;
}

/* 查看详情按钮 */
.view-detail {
  margin-top: 20rpx;
}

.detail-btn {
  width: 100%;
  height: 80rpx;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.detail-btn:hover {
  background-color: #45a049;
}

.detail-btn:active {
  background-color: #3d8b40;
}
</style>