<script setup lang="ts">
/**
 * 有限空间作业记录详情页
 *
 * 展示有限空间作业的详细信息，包含基本信息、
 * 安全条件确认清单、作业审批和参与人员。
 */
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

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

const detailId = (route.params.detail as string) || '1'

/** 模拟作业记录详情 */
const record = ref({
  id: detailId,
  title: '污水井清淤作业 2025-0615-01',
  location: '城北工业大道12号污水井',
  spaceType: '污水井',
  status: 'in_progress',
  operator: '张作业员',
  supervisor: '王监督员',
  guardian: '李监护人',
  startTime: '2025-06-15 08:00',
  endTime: '',
  duration: '进行中',
  depth: '4.5 m',
  diameter: '1.2 m',
  oxygenContent: '20.8%',
  hazardousGas: '未检出',
  temperature: '28°C',
  humidity: '65%',
  ventilation: '正常',
  description: '对城北工业大道12号污水井进行清淤作业，清理井内沉积物，检查井壁结构完整性。',
  /** 安全条件确认清单 */
  safetyChecklist: [
    { id: 1, item: '作业审批手续是否完备', checked: true, required: true },
    { id: 2, item: '通风设备是否正常运行', checked: true, required: true },
    { id: 3, item: '气体检测是否合格', checked: true, required: true },
    { id: 4, item: '安全绳/安全带是否完好', checked: true, required: true },
    { id: 5, item: '通讯设备是否畅通', checked: true, required: true },
    { id: 6, item: '应急救援设备是否就位', checked: true, required: true },
    { id: 7, item: '人员防护装备是否齐全', checked: true, required: true },
    { id: 8, item: '现场警示标识是否设置', checked: false, required: true },
    { id: 9, item: '现场监护人是否到位', checked: true, required: true },
    { id: 10, item: '作业环境照明是否充足', checked: true, required: false },
  ],
})

const statusMap: Record<string, string> = {
  pending: '待开始',
  in_progress: '进行中',
  completed: '已完成',
}

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

/** 安全清单统计 */
const checklistStats = computed(() => {
  const total = record.value.safetyChecklist.length
  const checked = record.value.safetyChecklist.filter(c => c.checked).length
  const required = record.value.safetyChecklist.filter(c => c.required).length
  const requiredChecked = record.value.safetyChecklist.filter(c => c.required && c.checked).length
  return { total, checked, required, requiredChecked }
})
</script>

<template>
  <div class="yxkjzy-detail-page">
    <van-nav-bar title="作业记录详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

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

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="作业编号" :value="record.title" />
      <van-cell title="作业地点" :value="record.location" />
      <van-cell title="空间类型" :value="record.spaceType" />
      <van-cell title="作业员" :value="record.operator" />
      <van-cell title="监督员" :value="record.supervisor" />
      <van-cell title="监护人" :value="record.guardian" />
      <van-cell title="开始时间" :value="record.startTime" />
      <van-cell title="结束时间" :value="record.endTime || '-'" />
      <van-cell title="作业时长" :value="record.duration" />
    </van-cell-group>

    <!-- 空间参数 -->
    <van-cell-group title="空间参数" class="info-group">
      <van-cell title="深度" :value="record.depth" />
      <van-cell title="直径" :value="record.diameter" />
    </van-cell-group>

    <!-- 环境监测 -->
    <van-cell-group title="环境监测" class="info-group">
      <van-cell title="氧气含量" :value="record.oxygenContent" />
      <van-cell title="有害气体" :value="record.hazardousGas" />
      <van-cell title="温度" :value="record.temperature" />
      <van-cell title="湿度" :value="record.humidity" />
      <van-cell title="通风状态" :value="record.ventilation" />
    </van-cell-group>

    <!-- 安全条件确认清单 -->
    <van-cell-group :title="`安全条件确认清单 (${checklistStats.requiredChecked}/${checklistStats.required} 必检项)`" class="info-group">
      <van-cell v-for="item in record.safetyChecklist" :key="item.id">
        <template #title>
          <div class="checklist-item">
            <van-icon
              :name="item.checked ? 'success' : 'close'"
              :color="item.checked ? '#4CAF50' : '#F44336'"
              size="18"
            />
            <span :class="{ 'required-tag': item.required }">{{ item.required ? '【必检】' : '' }}{{ item.item }}</span>
          </div>
        </template>
        <template #value>
          <van-tag :type="item.checked ? 'success' : 'danger'" size="medium">
            {{ item.checked ? '已确认' : '未确认' }}
          </van-tag>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 作业描述 -->
    <van-cell-group title="作业描述" class="info-group">
      <van-cell>
        <p class="desc-text">{{ record.description }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 安全提示 -->
    <div class="safety-tips">
      <van-notice-bar
        left-icon="warning-o"
        color="#FF9800"
        background="#FFF3E0"
        :scrollable="false"
      >
        有限空间作业必须严格遵守"先通风、再检测、后作业"原则，未确认安全条件不得进入。
      </van-notice-bar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.yxkjzy-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;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;

  .required-tag {
    color: var(--color-text-regular);
  }
}

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

.safety-tips {
  margin: 12px 0;
}
</style>
