<template>
  <view class="cert-detail-page">
    <!-- 考级基本信息 -->
    <view class="section">
      <view class="section-header">
        <uni-icons type="paperclip" size="18" color="#AD181F"></uni-icons>
        <text class="section-title">考级基本信息</text>
      </view>
      <view class="info-card">
        <view class="info-row">
          <text class="label">考级名称</text>
          <text class="value">{{ form.name || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">申请日期</text>
          <text class="value">{{ formatDate(form.applyTime) }}</text>
        </view>
        <view class="info-row">
          <text class="label">申请单位</text>
          <text class="value">{{ form.memberName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">考官</text>
          <text class="value">{{ form.examinerNames || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">考试时间</text>
          <text class="value">{{ form.startTime ? formatDateTime(form.startTime) : '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">考级地点</text>
          <text class="value">{{ form.address || '-' }}</text>
        </view>
        <view class="info-row" v-if="form.totalAmount">
          <text class="label">总金额</text>
          <text class="value text-red">¥{{ (form.totalAmount * 1).toFixed(2) }}</text>
        </view>
      </view>
    </view>

    <!-- 收货地址 -->
    <view class="section">
      <view class="section-header">
        <uni-icons type="location-filled" size="18" color="#AD181F"></uni-icons>
        <text class="section-title">收货地址</text>
      </view>
      <view class="info-card">
        <view class="info-row">
          <text class="label">姓名</text>
          <text class="value">{{ addressForm.name || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">联系方式</text>
          <text class="value">{{ addressForm.phone || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">收件地址</text>
          <text class="value">{{ addressForm.address || '-' }}</text>
        </view>
      </view>
    </view>

    <!-- 考生信息 -->
    <view class="section">
      <view class="section-header">
        <uni-icons type="person" size="18" color="#AD181F"></uni-icons>
        <text class="section-title">考生信息</text>
        <view class="person-summary">
          共 {{ personSummary.total }} 人
        </view>
      </view>

      <view class="person-stats" v-if="personSummary.levelArr && personSummary.levelArr.length > 0">
        <view class="stat-item" v-for="item in personSummary.levelArr" :key="item.level">
          {{ levelToChinese(item.level) }}级：{{ item.num }}人
        </view>
      </view>

      <view class="person-table">
        <view class="table-header">
          <view class="th th-name">姓名</view>
          <!-- <view class="th th-idtype">证件类型</view> -->
          <view class="th th-idcard">证件号码</view>
          <view class="th th-level">级别</view>
        </view>
        <scroll-view scroll-y class="table-body-wrapper">
          <view class="table-body">
            <view class="table-row" v-for="(person, idx) in infoList" :key="idx">
              <view class="td td-name">{{ person.realName }}</view>
              <view class="td td-idtype">{{ person.idcTypeStr || '-' }}</view>
              <view class="td td-idcard">{{ person.idcCode || '-' }}</view>
              <view class="td td-level">
                {{ levelToChinese(person.levelNew) }}级
                <text class="level-old" v-if="person.levelOld">({{ levelToChinese(person.levelOld) }}级)</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="no-data" v-if="infoList.length == 0">
          <text>暂无考生信息</text>
        </view>
      </view>

      <view class="pagination-wrap" v-if="total > pageSize">
        <view class="page-btn" @click="prevPage" :class="{ disabled: pageNum <= 1 }">
          <uni-icons type="left" size="14" color="#666"></uni-icons>
        </view>
        <view class="page-num">{{ pageNum }}/{{ totalPage }}</view>
        <view class="page-btn" @click="nextPage" :class="{ disabled: pageNum >= totalPage }">
          <uni-icons type="right" size="14" color="#666"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 审核信息 -->
    <view class="section" v-if="recordList.length > 0">
      <view class="section-header">
        <uni-icons type="checkmark-circle" size="18" color="#AD181F"></uni-icons>
        <text class="section-title">审核信息</text>
      </view>
      <view class="audit-table">
        <view class="table-header">
          <view class="th th-dept">审核协会</view>
          <view class="th th-time">审核时间</view>
          <view class="th th-status">审核状态</view>
          <view class="th th-remark">备注</view>
        </view>
        <view class="table-body">
          <view class="table-row" v-for="(record, idx) in recordList" :key="idx">
            <view class="td td-dept">{{ record.auditDeptName || '-' }}</view>
            <view class="td td-time">{{ formatDateTime(record.auditTime) }}</view>
            <view class="td td-status">
              <text :class="record.auditResult == '1' ? 'text-success' : 'text-danger'">
                {{ record.auditResult == '1' ? '通过' : '未通过' }}
              </text>
            </view>
            <view class="td td-remark">{{ record.auditMsg || '-' }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import * as api from '@/common/api.js'
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const loading = ref(false)
const examId = ref('')
const pageNum = ref(1)
const pageSize = ref(50)

const form = ref({})
const addressForm = ref({})
const infoList = ref([])
const personSummary = ref({ total: 0, levelArr: [] })
const total = ref(0)
const totalPage = computed(() => Math.ceil(total.value / pageSize.value))
const recordList = ref([])

onLoad((options) => {
  if (options.examId) {
    examId.value = options.examId
    getExamInfo()
    getStudentList()
    getAuditRecords()
  }
})

function getExamInfo() {
  uni.showLoading({ title: '加载中' })
  api.getExamInfo(examId.value).then(res => {
    uni.hideLoading()
    if (res.data) {
      form.value = res.data
      addressForm.value = res.data.postAddress || {}
    }
  }).catch(err => {
    uni.hideLoading()
    console.error('获取考试详情失败', err)
    uni.showToast({ title: '获取详情失败', icon: 'none' })
  })
}

function getStudentList() {
  uni.showLoading({ title: '加载中' })
  api.getStudentList({
    examId: examId.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }).then(res => {
    uni.hideLoading()
    if (res.rows) {
      infoList.value = res.rows
      total.value = res.total || 0

      // 统计各级别人数
      const levelMap = {}
      res.rows.forEach(person => {
        const level = person.levelNew
        if (level) {
          levelMap[level] = (levelMap[level] || 0) + 1
        }
      })

      const levelArr = Object.keys(levelMap).map(key => ({
        level: key,
        num: levelMap[key]
      })).sort((a, b) => b.level - a.level)

      personSummary.value = {
        total: total.value,
        levelArr: levelArr
      }
    } else {
      uni.hideLoading()
    }
  }).catch(err => {
    uni.hideLoading()
    console.error('获取考生列表失败', err)
  })
}

function prevPage() {
  if (pageNum.value > 1) {
    pageNum.value--
    getStudentList()
  }
}

function nextPage() {
  if (pageNum.value < totalPage.value) {
    pageNum.value++
    getStudentList()
  }
}

function getAuditRecords() {
  api.getLogs(examId.value, 1).then(res => {
    recordList.value = res.data || []
  }).catch(err => {
    console.error('获取审核记录失败', err)
  })
}

function formatDate(dateStr) {
  if (!dateStr) return '-'
  return dateStr.substring(0, 10)
}

function formatDateTime(dateStr) {
  if (!dateStr) return '-'
  return dateStr.replace('T', ' ').substring(0, 19)
}

function levelToChinese(level) {
  if (!level) return '-'
  const levelMap = {
    '1': '一', '2': '二', '3': '三', '4': '四', '5': '五',
    '6': '六', '7': '七', '8': '八', '9': '九', '10': '十'
  }
  return levelMap[String(level)] || level
}
</script>

<style lang="scss" scoped>
.cert-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  padding-bottom: 40rpx;
}

.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  .section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-left: 10rpx;
  }

  .person-summary {
    margin-left: auto;
    font-size: 26rpx;
    color: #AD181F;
  }
}

.info-card {
  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 16rpx 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 26rpx;
      color: #999;
      flex-shrink: 0;
    }

    .value {
      font-size: 26rpx;
      color: #333;
      text-align: right;
      margin-left: 20rpx;

      &.text-red {
        color: #AD181F;
        font-weight: 600;
      }
    }
  }
}

.person-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 24rpx;
  padding: 20rpx;
  background-color: #fafafa;
  border-radius: 12rpx;

  .stat-item {
    font-size: 24rpx;
    color: #666;
    padding: 8rpx 16rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
}

.person-table {
  border: 1px solid #eee;
  border-radius: 12rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;

  .th {
    padding: 20rpx 0;
    text-align: center;
    font-size: 24rpx;
    color: #666;
    font-weight: 500;
  }
}

.table-body-wrapper {
  max-height: 600rpx;
}

.table-body {
  .table-row {
    display: flex;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .td {
      padding: 20rpx 0;
      text-align: center;
      font-size: 24rpx;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.th-name, .td-name { width: 20%; }
// .th-idtype, .td-idtype { width: 18%; }
.th-idcard, .td-idcard { width: 60%; }
.th-level, .td-level { width: 20%; }

.level-old {
  color: #999;
  font-size: 20rpx;
  margin-left: 4rpx;
}

.no-data {
  padding: 60rpx 0;
  text-align: center;
  color: #999;
  font-size: 26rpx;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30rpx;
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 1px solid #f0f0f0;

  .page-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;

    &.disabled {
      opacity: 0.4;
    }
  }

  .page-num {
    font-size: 28rpx;
    color: #333;
    min-width: 120rpx;
    text-align: center;
  }
}

/* 审核信息表格 */
.audit-table {
  border: 1px solid #eee;
  border-radius: 12rpx;
  overflow: hidden;

  .table-header {
    display: flex;
    background-color: #f5f5f5;

    .th {
      padding: 20rpx 0;
      text-align: center;
      font-size: 24rpx;
      color: #666;
      font-weight: 500;
    }
  }

  .table-body {
    .table-row {
      display: flex;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .td {
        padding: 16rpx 0;
        text-align: center;
        font-size: 22rpx;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .th-dept, .td-dept { width: 25%; }
  .th-time, .td-time { width: 25%; }
  .th-status, .td-status { width: 15%; }
  .th-remark, .td-remark { width: 35%; }

  .text-success {
    color: #4caf50;
  }

  .text-danger {
    color: #f56c6c;
  }
}
</style>