<script setup lang="ts">
/**
 * 巡检任务详情页
 *
 * 展示任务详细信息，包含基本信息和操作按钮。
 * 可通过路由 query.id 获取任务 id。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

const taskId = route.query.id as string

/** 模拟任务详情 */
const task = ref({
  id: taskId || '1',
  name: '管网巡检-城北片区',
  facility: '供水管网',
  status: 'pending',
  planDate: '2025-06-15',
  inspector: '张工',
  address: '城北工业大道1-50号',
  description: '对城北片区供水管网进行全面巡检，检查管道是否有渗漏、腐蚀等情况。重点检查老旧管道及近期施工区域。',
  createTime: '2025-06-10 09:00:00',
  updateTime: '2025-06-14 17:30:00',
})

const statusMap: Record<string, string> = {
  pending: '待巡检',
  in_progress: '巡检中',
  completed: '已完成',
}

const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger'> = {
  pending: 'warning',
  in_progress: 'primary',
  completed: 'success',
}

/** 开始巡检 */
function startInspection() {
  showToast('开始巡检')
}

/** 查看巡检记录 */
function viewRecords() {
  router.push(`/inspectionRecords?taskId=${taskId}`)
}
</script>

<template>
  <div class="inspection-detail-page">
    <van-nav-bar title="任务详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <!-- 状态标签 -->
    <div class="status-bar">
      <van-tag :type="statusColorMap[task.status]" size="large">
        {{ statusMap[task.status] }}
      </van-tag>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="任务名称" :value="task.name" />
      <van-cell title="设施类型" :value="task.facility" />
      <van-cell title="计划日期" :value="task.planDate" />
      <van-cell title="巡检人员" :value="task.inspector" />
      <van-cell title="巡检地址" :value="task.address" />
    </van-cell-group>

    <!-- 任务描述 -->
    <van-cell-group title="任务描述" class="info-group">
      <van-cell>
        <p class="desc-text">{{ task.description }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 时间信息 -->
    <van-cell-group title="时间信息" class="info-group">
      <van-cell title="创建时间" :value="task.createTime" />
      <van-cell title="更新时间" :value="task.updateTime" />
    </van-cell-group>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-button type="primary" block round @click="startInspection">开始巡检</van-button>
      <van-button plain block round class="mt-sm" @click="viewRecords">查看巡检记录</van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.inspection-detail-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 24px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.status-bar {
  padding: 12px 16px;
  background: var(--color-bg-card);
  text-align: center;
}

.info-group {
  margin-top: 8px;
}

.desc-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-regular);
  padding: 4px 0;
}

.action-buttons {
  padding: 24px 16px;

  .mt-sm {
    margin-top: 12px;
  }
}
</style>
