<script setup lang="ts">
/**
 * 监督人员详情页
 *
 * 展示第三方监督人员详细信息，包含基本信息、在岗状态和履职记录。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

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

const detailId = (route.query.id as string) || '1'

/** 模拟监督人员详情 */
const supervisor = ref({
  id: detailId,
  name: '张监督',
  company: '水务监理公司A',
  status: 'on_duty',
  phone: '13800001001',
  project: '城北供水改造工程',
  rating: 4.8,
  certNo: 'JL2023001',
  certType: '注册监理工程师',
  entryDate: '2025-01-15',
  education: '本科',
  major: '水利工程',
  superviseYears: 8,
  superviseCount: 126,
  problemCount: 34,
  lastOnDuty: '2025-06-15 08:30',
})

const statusMap: Record<string, string> = {
  on_duty: '在岗',
  off_duty: '离岗',
}

const statusColorMap: Record<string, 'success' | 'danger'> = {
  on_duty: 'success',
  off_duty: 'danger',
}
</script>

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

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

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="姓名" :value="supervisor.name" />
      <van-cell title="所属公司" :value="supervisor.company" />
      <van-cell title="联系电话" :value="supervisor.phone" />
      <van-cell title="所属项目" :value="supervisor.project" />
      <van-cell title="评分" :value="`${supervisor.rating} 分`" />
    </van-cell-group>

    <!-- 资质信息 -->
    <van-cell-group title="资质信息" class="info-group">
      <van-cell title="证书编号" :value="supervisor.certNo" />
      <van-cell title="证书类型" :value="supervisor.certType" />
      <van-cell title="学历" :value="supervisor.education" />
      <van-cell title="专业" :value="supervisor.major" />
    </van-cell-group>

    <!-- 履职统计 -->
    <van-cell-group title="履职统计" class="info-group">
      <van-cell title="从业年限" :value="`${supervisor.superviseYears} 年`" />
      <van-cell title="监督次数" :value="`${supervisor.superviseCount} 次`" />
      <van-cell title="发现问题" :value="`${supervisor.problemCount} 个`" />
      <van-cell title="最近到岗" :value="supervisor.lastOnDuty" />
      <van-cell title="入职日期" :value="supervisor.entryDate" />
    </van-cell-group>
  </div>
</template>

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