<script setup lang="ts">
/**
 * 巡检任务详情页
 *
 * 展示任务详细信息，包含基本信息和操作按钮。
 * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
 */
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, 'warning' | 'primary' | 'success'> = {
  pending: 'warning', in_progress: 'primary', completed: 'success',
}

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

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

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

    <!-- Status Bar -->
    <div class="status-bar">
      <van-tag :type="statusColorMap[task.status]" size="large" round>
        {{ statusMap[task.status] }}
      </van-tag>
    </div>

    <!-- 基本信息 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">基本信息</h5>
      </div>
      <div class="card-body">
        <div class="info-row">
          <span class="info-row__label">任务名称</span>
          <span class="info-row__value">{{ task.name }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">设施类型</span>
          <span class="info-row__value">{{ task.facility }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">计划日期</span>
          <span class="info-row__value">{{ task.planDate }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">巡检人员</span>
          <span class="info-row__value">{{ task.inspector }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">巡检地址</span>
          <span class="info-row__value">{{ task.address }}</span>
        </div>
      </div>
    </div>

    <!-- 任务描述 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">任务描述</h5>
      </div>
      <div class="card-body">
        <p class="desc-text">{{ task.description }}</p>
      </div>
    </div>

    <!-- 时间信息 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">时间信息</h5>
      </div>
      <div class="card-body">
        <div class="info-row">
          <span class="info-row__label">创建时间</span>
          <span class="info-row__value">{{ task.createTime }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">更新时间</span>
          <span class="info-row__value">{{ task.updateTime }}</span>
        </div>
      </div>
    </div>

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

<style lang="scss" scoped>
.inspection-detail-page {
  min-height: 100vh;
  background: #F4F7F8;
  padding-bottom: 24px;

  :deep(.van-nav-bar) { background: #1E74FF; }
  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
  :deep(.van-nav-bar__text),
  :deep(.van-nav-bar__arrow) { color: #fff; }
  :deep(.van-nav-bar .van-icon) { color: #fff; }
}

// Status Bar
.status-bar {
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: center;
}

// Info Card
.info-card {
  background: #fff;
  border-radius: 10px;
  margin: 10px 12px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  &__accent { width: 3px; height: 16px; border-radius: 2px; background: #1E74FF; flex-shrink: 0; }
  &__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
}
.card-body { padding: 0 16px 14px; }

// Info Rows
.info-row {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  & + & { border-top: 1px solid var(--color-border-light); }
  &__label { width: 72px; flex-shrink: 0; font-size: 13px; color: var(--color-text-secondary); }
  &__value { flex: 1; font-size: 14px; color: var(--color-text-primary); word-break: break-all; }
}

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

// Action Buttons
.action-buttons {
  padding: 20px 16px;

  .btn-gap {
    margin-top: 12px;
  }
}
</style>
