<template>
  <view class="container">
    <view class="loading-tip" v-if="loading">加载中...</view>
    <view class="empty-tip" v-else-if="infoList.length === 0">暂无可添加的考官</view>

    <checkbox-group class="examiner-list" @change="onCheckboxChange">
      <label v-for="item in infoList" :key="item.perId" class="examiner-item">
        <view class="item-left">
          <checkbox :value="item.perId.toString()" :checked="selectedIds.includes(item.perId.toString())" :disabled="checkChosen(item)" color="#C4121B" />
        </view>
        <view class="item-info">
          <view class="name">{{ item.perName }} </view>
           <view class="idc">会员号：{{ item.perCode }}</view>
          <view class="idc">证件号码：{{ item.perIdcCode }}</view>
          <view class="reg">注册地：{{ item.memName }}</view>
        </view>
        <view v-if="checkChosen(item)" class="chosen-tag">已添加</view>
      </label>
    </checkbox-group>

    <view class="bottom-area">
        <view class="selected-tip" v-if="selectedIds.length > 0">已选择 {{ selectedIds.length }} 位考官</view>
        <view> <button class="add-btn" :disabled="selectedIds.length === 0" @click="handleAdd">添加</button></view>  
       
      </view> 
  </view>
</template>

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

const loading = ref(true)
const infoList = ref([])
const chosen = ref([])
const selectedIds = ref([])
const memId = ref('')

onLoad((option) => {
  memId.value = option.memId || ''
  chosen.value = option.chosen ? JSON.parse(option.chosen) : []
  getList()
})

async function getList() {
  loading.value = true
  try {
    const res = await api.listApi({chooseFlag: 1})
    infoList.value = res.rows || []
  } catch (err) {
    console.error('获取考官列表失败:', err)
    infoList.value = []
  } finally {
    loading.value = false
  }
}

function checkChosen(item) {
  return chosen.value.some(c => c.perId == item.perId)
}

function onCheckboxChange(e) {
  selectedIds.value = e.detail.value
}

function handleAdd() {
  if (selectedIds.value.length === 0) {
    uni.showToast({title: '请先选择考官', icon: 'none'})
    return
  }

  const ids = selectedIds.value.join(',')

  uni.showLoading({title: '添加中...'})
  api.selfAdd(ids).then(() => {
    uni.hideLoading()
    uni.showToast({title: '添加成功', icon: 'success'})
    uni.navigateBack()
  }).catch(err => {
    uni.hideLoading()
    uni.showToast({title: err?.data?.msg || '添加失败', icon: 'none'})
  })
}
</script>

<style scoped>


.container {
  min-height: 100vh;
  background: #f7f7f7;
  padding-bottom: 140rpx;
}

.loading-tip,
.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  font-size: 28rpx;
  color: #666;
}

.examiner-list {
  background: #fff;
}

.examiner-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.item-left {
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
}

.name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.idc, .reg {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 6rpx;
}

.chosen-tag {
  font-size: 24rpx;
  color: #999;
  background: #f5f5f5;
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
}

.bottom-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.add-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: #C4121B;
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
  border: none;
}

.add-btn[disabled] {
  background: #ccc;
  color: #fff;
}

.add-btn::after {
  border: none;
}
</style>