<script setup lang="ts">
/**
 * 有限空间作业记录详情页
 *
 * 展示有限空间作业的详细信息，包含基本信息、
 * 安全条件确认清单、作业审批和参与人员。
 * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
 */
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, 'warning' | 'primary' | 'success'> = {
  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">
    <!-- 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[record.status]" size="large" round>
        {{ statusMap[record.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">{{ record.title }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">作业地点</span>
          <span class="info-row__value">{{ record.location }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">空间类型</span>
          <span class="info-row__value">{{ record.spaceType }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">作业员</span>
          <span class="info-row__value">{{ record.operator }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">监督员</span>
          <span class="info-row__value">{{ record.supervisor }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">监护人</span>
          <span class="info-row__value">{{ record.guardian }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">开始时间</span>
          <span class="info-row__value">{{ record.startTime }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">结束时间</span>
          <span class="info-row__value">{{ record.endTime || '-' }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">作业时长</span>
          <span class="info-row__value">{{ record.duration }}</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">
        <div class="info-row">
          <span class="info-row__label">深度</span>
          <span class="info-row__value">{{ record.depth }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">直径</span>
          <span class="info-row__value">{{ record.diameter }}</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">
        <div class="info-row">
          <span class="info-row__label">氧气含量</span>
          <span class="info-row__value env-ok">{{ record.oxygenContent }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">有害气体</span>
          <span class="info-row__value env-ok">{{ record.hazardousGas }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">温度</span>
          <span class="info-row__value">{{ record.temperature }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">湿度</span>
          <span class="info-row__value">{{ record.humidity }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">通风状态</span>
          <span class="info-row__value env-ok">{{ record.ventilation }}</span>
        </div>
      </div>
    </div>

    <!-- 安全条件确认清单 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">
          安全条件确认清单
          <span class="checklist-summary">（{{ checklistStats.requiredChecked }}/{{ checklistStats.required }} 必检项）</span>
        </h5>
      </div>
      <div class="card-body">
        <div v-for="item in record.safetyChecklist" :key="item.id" class="checklist-row">
          <van-icon
            :name="item.checked ? 'success' : 'close'"
            :color="item.checked ? '#4CAF50' : '#F44336'"
            size="18"
          />
          <span :class="['checklist-text', { 'required': item.required }]">
            {{ item.required ? '【必检】' : '' }}{{ item.item }}
          </span>
          <van-tag :type="item.checked ? 'success' : 'danger'" size="medium" class="checklist-tag">
            {{ item.checked ? '已确认' : '未确认' }}
          </van-tag>
        </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">{{ record.description }}</p>
      </div>
    </div>

    <!-- 安全提示 -->
    <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: #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); }
}
.checklist-summary {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.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; }
}

.env-ok {
  color: #4CAF50 !important;
  font-weight: 500;
}

// Checklist Rows
.checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  & + & { border-top: 1px solid var(--color-border-light); }
}

.checklist-text {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-regular);
  &.required { font-weight: 500; }
}

.checklist-tag {
  flex-shrink: 0;
}

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

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