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

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

const detailId = route.params.detail as string

/** 模拟养护任务详情 */
const task = ref({
  id: detailId || '1',
  name: '管网养护-城北片区',
  facility: '供水管网',
  type: '定期养护',
  status: 'pending',
  planDate: '2025-06-15',
  maintainer: '刘工',
  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 startMaintenance() {
  showToast('开始养护')
}

/** 查看养护记录 */
function viewRecords() {
  router.push(`/maintenanceRecords?taskId=${detailId}`)
}
</script>

<template>
  <div class="maintenance-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.type" />
      <van-cell title="计划日期" :value="task.planDate" />
      <van-cell title="养护人员" :value="task.maintainer" />
      <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="startMaintenance">开始养护</van-button>
      <van-button plain block round class="mt-sm" @click="viewRecords">查看养护记录</van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.maintenance-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>
