<template>
  <view class="detail-page">
    <!-- 基本信息 -->
    <view class="section">
      <view class="section-header">
        <uni-icons color="#AD181F" size="18" type="paperclip"></uni-icons>
        <text class="section-title">基本信息</text>
      </view>
      <view class="info-card">
        <view class="info-row">
          <text class="label">申请单位</text>
          <text class="value">{{ form.memName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">所属协会</text>
          <text class="value">{{ form.shenMemName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">审核状态</text>
          <text :class="getStatusClass(form.auditStatus)" class="value">
            {{ getStatusText(userType == 1 ? form.auditStatus : form.shenAuditStatus) }}
          </text>
        </view>
        <view class="info-row">
          <text class="label">是否需要</text>
          <text class="value">{{ form.selfSelect == 1 ? '否' : '是' }}</text>
        </view>
        <view class="info-row">
          <text class="label">会员有效期</text>
          <text class="value">{{ formatDate(form.memValidDate) }}</text>
        </view>
        <view class="info-row">
          <text class="label">申请日期</text>
          <text class="value">{{ formatDate(form.commitTime) }}</text>
        </view>
        <view class="info-row">
          <text class="label">审核日期</text>
          <text class="value">{{ formatDate(form.auditTime) }}</text>
        </view>
        <view class="info-row">
          <text class="label">考官</text>
          <text class="value">{{ form.examiners || '-' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 审核记录 -->
    <view v-if="auditList.length > 0" class="section">
      <view class="section-header">
        <uni-icons color="#AD181F" size="18" type="checkmark-circle"></uni-icons>
        <text class="section-title">审核记录</text>
      </view>
      <view class="wBox">
        <view class="stepItem" v-for="(item, index) in auditList" :key="index">
          <view class="time">{{ formatDateTime(item.auditTime) }}</view>
          <view class="content">
            <view class="status">
              <text v-if="item.auditResult==1" class="text-success">审核通过</text>
              <text v-if="item.auditResult==2" class="text-danger">审核拒绝</text>
            </view>
            <view class="deptName">{{ item.auditDeptName || '--' }}</view>
            <view v-if="item.auditMsg">备注：{{ item.auditMsg }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!--    &lt;!&ndash; 考官信息 &ndash;&gt;-->
    <!--    <view class="section" v-if="examinerList.length > 0">-->
    <!--      <view class="section-header">-->
    <!--        <uni-icons type="person" size="18" color="#AD181F"></uni-icons>-->
    <!--        <text class="section-title">考官信息</text>-->
    <!--      </view>-->
    <!--      <view class="examiner-table" v-if="examinerList.length > 0">-->
    <!--        <view class="table-header">-->
    <!--          <view class="th th-name">姓名</view>-->
    <!--          <view class="th th-code">会员号</view>-->
    <!--          <view class="th th-idcard">证件号码</view>-->
    <!--        </view>-->
    <!--        <view class="table-body">-->
    <!--          <view class="table-row" v-for="(item, index) in examinerList" :key="index">-->
    <!--            <view class="td td-name">{{ item.perName }}</view>-->
    <!--            <view class="td td-code">{{ item.perCode || '-' }}</view>-->
    <!--            <view class="td td-idcard">{{ item.perIdcCode || '-' }}</view>-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="no-data" v-else>-->
    <!--        <text>暂无考官信息</text>-->
    <!--      </view>-->
    <!--    </view>-->
  </view>
</template>

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

const app = getApp()
const form = ref({})
const auditList = ref([])
const examinerList = ref([])
const userType = ref('')
const auditStatusMap = {1: '审核中', 2: '审核通过', 3: '审核拒绝'}

onLoad((options) => {
  userType.value = app.globalData.userType
  if (options.item) {
    try {
      const itemData = JSON.parse(decodeURIComponent(options.item))
      form.value = itemData
      if (itemData.auditLogs) {
        auditList.value = JSON.parse(itemData.auditLogs)
      }
      if (itemData.memId) {
        getExaminerList(itemData.memId)
      }
    } catch (e) {
      console.error('解析数据失败', e)
    }
  }
})

function getExaminerList(memId) {
  api.listInfo({memId: memId}).then(res => {
    if (res.rows) {
      examinerList.value = res.rows
    }
  }).catch(err => {
    console.error('获取考官列表失败', err)
  })
}

function getStatusText(status) {
  return auditStatusMap[status] || '-'
}

function getStatusClass(status) {
  const classMap = {
    1: 'text-warning',
    2: 'text-success',
    3: 'text-danger'
  }
  return classMap[status] || ''
}

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

function formatDateTime(dateStr) {
  if (!dateStr) return '-'
  if (typeof dateStr === 'string' && dateStr.indexOf('T') > -1) {
    const [date, time] = dateStr.split('T')
    return `${date} ${time?.slice(0, 5) || ''}`
  }
  return dateStr
}
</script>

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

.wBox {
  width: 700rpx;
  padding: 30rpx;
  margin: 20rpx auto 0;
  background: #FFFFFF;
  box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
  border-radius: 15rpx;
}

.stepItem {
  // display: flex;
  padding: 16rpx;
  border-bottom: 1rpx dashed #eee;

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

  .time {
    width: 80%;
    font-size: 22rpx;
    color: #999;
    flex-shrink: 0;
    padding-top: 4rpx;
  }

  .content {
    flex: 1;

    .status {
      font-size: 28rpx;
      font-weight: 600;
      margin-bottom: 6rpx;
    }

    .deptName {
      font-size: 26rpx;
      color: #666;
    }

    view {
      font-size: 24rpx;
      color: #999;
      margin-top: 4rpx;
    }
  }
}

.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-success {
        color: #4caf50;
      }
      
      &.text-warning {
        color: #ff9800;
      }
      
      &.text-danger {
        color: #f44336;
      }
    }
  }
}


/* 考官表格 */
.examiner-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;
    }
  }
  
  .th-name {
    width: 25%;
  }
  
  .th-code {
    width: 30%;
  }
  
  .th-idcard {
    width: 45%;
  }
  
  .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;
      }
    }
    
    .td-name {
      width: 25%;
    }
    
    .td-code {
      width: 30%;
    }
    
    .td-idcard {
      width: 45%;
    }
  }
}

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