<template>
  <view class="container">
    <view class="loading-tip" v-if="loading">加载中...</view>
    	<view class="empty" v-else-if="infoList.length === 0">
				<image class="empty-img" mode="aspectFit" :src="config.baseUrl_api + '/fs/static/nodata.png'"></image>
				<text class="empty-text">暂无考官数据</text>

         <!-- <button class="go-lib-btn" @click="goPath('/level/chooseExaminer?pageType=0')">去考官库添加考官吧</button> -->
			</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 class="add-btn-wrap">
          <button class="add-btn" :disabled="selectedIds.length === 0" @click="handleAdd">添加</button>
        </view>
       
      </view> 
  </view>
</template>

<script setup>
import {ref} from 'vue'
import { onLoad ,onShow} from '@dcloudio/uni-app'
import * as api from '@/common/api.js'
import config from '@/config.js'
	const app = getApp();
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()
  console.log('onLoad',memId.value,chosen.value)
})
onShow(() => {
console.log('onShow',memId.value)
console.log('222',chosen.value)
  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 goPath(url) {
  if (!url) return
  uni.navigateTo({url})
}

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

/* .empty {
  min-height: calc(100vh - 220rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
} */

.go-lib-btn {
  margin-top: 32rpx;
  padding: 0 36rpx;
  height: 72rpx;
  line-height: 72rpx;
  background: #C4121B;
  color: #fff;
  font-size: 26rpx;
  border-radius: 36rpx;
  border: none;
}

.go-lib-btn::after {
  border: none;
}

.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: flex-end;
}

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

.add-btn-wrap {
  margin-left: auto;
}

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