<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'

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">
    <!-- 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[supervisor.status]" size="large" round>
        {{ statusMap[supervisor.status] }}
      </van-tag>
      <div class="status-bar__name">{{ supervisor.name }}</div>
      <div class="status-bar__sub">{{ supervisor.company }} · {{ supervisor.rating }} 分</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">{{ supervisor.name }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">所属公司</span>
          <span class="info-row__value">{{ supervisor.company }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">联系电话</span>
          <span class="info-row__value">{{ supervisor.phone }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">所属项目</span>
          <span class="info-row__value">{{ supervisor.project }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">评　　分</span>
          <span class="info-row__value info-row__value--rating">
            <van-icon name="star" size="14" color="#FF976A" />
            {{ supervisor.rating }} 分
          </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">{{ supervisor.certNo }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">证书类型</span>
          <span class="info-row__value">{{ supervisor.certType }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">学　　历</span>
          <span class="info-row__value">{{ supervisor.education }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">专　　业</span>
          <span class="info-row__value">{{ supervisor.major }}</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="stat-grid">
          <div class="stat-item">
            <div class="stat-item__value">{{ supervisor.superviseYears }}</div>
            <div class="stat-item__label">从业年限</div>
          </div>
          <div class="stat-item">
            <div class="stat-item__value">{{ supervisor.superviseCount }}</div>
            <div class="stat-item__label">监督次数</div>
          </div>
          <div class="stat-item">
            <div class="stat-item__value">{{ supervisor.problemCount }}</div>
            <div class="stat-item__label">发现问题</div>
          </div>
        </div>
        <div class="info-row">
          <span class="info-row__label">最近到岗</span>
          <span class="info-row__value">{{ supervisor.lastOnDuty }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">入职日期</span>
          <span class="info-row__value">{{ supervisor.entryDate }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.supervisor-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: 20px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: center;
  margin-bottom: 10px;

  &__name {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
  }

  &__sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-secondary);
  }
}

// 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;

    &--rating {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #FF976A;
      font-weight: 500;
    }
  }
}

// Stat Grid
.stat-grid {
  display: flex;
  padding: 8px 0 16px;
  gap: 0;

  .stat-item {
    flex: 1;
    text-align: center;

    &__value {
      font-size: 22px;
      font-weight: 700;
      color: #1E74FF;
      line-height: 1.2;
    }

    &__label {
      margin-top: 4px;
      font-size: 12px;
      color: var(--color-text-secondary);
    }
  }
}
</style>
