<template>
  <view class="container">
    <!-- 考官选择类型 -->
    <view class="radio-section">
      <radio-group @change="onSelfSelectChange" class="radio-group">
        <label class="radio-item">
          <radio value="1" :checked="form.selfSelect == '1'" class="custom-radio" />
          <text class="radio-text">自行录入考官（级位考官）</text>
        </label>
        <label class="radio-item">
          <radio value="0" :checked="form.selfSelect == '0'" class="custom-radio" />
          <text class="radio-text">省跆协指派考官</text>
        </label>
      </radio-group>
    </view>
    <view class="section">
      <!-- 自行录入考官区域 -->
      <view class="section examiner-section" v-if="showExamine">
        <button class="add-btn" @click="handelAddExamine">+ 添加考官</button>
      </view>
          
      <view class="examiner-list" v-if="showExamine">
        <view class="examiner-item" v-for="(item, index) in list" :key="item.id">
          <view class="info">
            <text class="name">{{ item.perName }} {{ item.perCode }}</text>
            <text class="idc">证件号码：{{ item.perIdcCode }}</text>
            <text class="reg">注册地：{{ item.memName }}</text>
          </view>
          <button class="del-btn" @click="handleDel(item)">删除</button>
        </view>
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="submit-area">
      <button class="submit-btn" @click="handelSubmit">确定提交</button>
    </view>

    <!-- 自定义考点申请弹窗（替换原uni.showModal） -->
    <uni-popup ref="applyPopup" type="center" background-color="rgba(0,0,0,0.5)">
      <view class="custom-modal">
        <view class="modal-title">考点申请</view>
        <view class="modal-btns">
          <button class="btn-cancel" @click="closeApplyPopup()">暂不申请</button>
          <button class="btn-confirm" @click="confirmApply()">立即申请</button>
        </view>
        <view class="modal-tip">友情提示：非考点无法申请级位考试</view>
      </view>
    </uni-popup>

    <!-- 自定义删除确认弹窗 -->
    <uni-popup ref="delPopup" type="center" background-color="rgba(0,0,0,0.5)">
      <view class="custom-modal">
        <view class="modal-title">提示</view>
        <view class="modal-content">确定删除该考官吗？</view>
        <view class="modal-btns">
          <button class="btn-cancel" @click="closeDelPopup()">取消</button>
          <button class="btn-confirm" @click="confirmDel()">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 自定义省跆协指派提示弹窗 -->
    <uni-popup ref="assignPopup" type="center" background-color="rgba(0,0,0,0.5)">
      <view class="custom-modal">
        <view class="modal-title">温馨提示</view>
        <view class="modal-content">关于考官指派，请联系河北省跆协，联系电话：XXXX</view>
        <view class="modal-btns">
          <button class="btn-confirm single-btn" @click="closeAssignPopup()">我知道了</button>
        </view>
      </view>
    </uni-popup>

    <!-- 自定义提交成功弹窗 -->
    <uni-popup ref="successPopup" type="center" background-color="rgba(0,0,0,0.5)">
      <view class="custom-modal">
        <view class="modal-title">成功</view>
        <view class="modal-content">提交成功，请等待审核</view>
        <view class="modal-btns">
          <button class="btn-confirm single-btn" @click="confirmSuccess()">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

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

const form = ref({
  selfSelect: '1' // 1:自行录入 0:省跆协指派
})
const showExamine = ref(true)
const loading = ref(false)
const list = ref([])
const memId = ref(null)

// 弹窗引用
const applyPopup = ref(null)
const delPopup = ref(null)
const assignPopup = ref(null)
const successPopup = ref(null)
let currentDelItem = ref(null)

onLoad((option) => {
  memId.value = option.memId
  getExaminer()
})

onShow(() => {
  if (memId.value) {
    getExaminer()
  }
})

async function getExaminer() {
  loading.value = true
  const res = await api.listApi({ memId: memId.value })
  list.value = res.rows
  loading.value = false
}

// 删除考官：打开自定义弹窗
function handleDel(row) {
  currentDelItem.value = row
  delPopup.value.open()
}
// 确认删除
async function confirmDel() {
  await api.examinerDel(currentDelItem.value.id)
  uni.showToast({ title: '删除成功', icon: 'success' })
  getExaminer()
  closeDelPopup()
}
function closeDelPopup() {
  delPopup.value.close()
}

// 切换考官类型：打开自定义提示弹窗
function onSelfSelectChange(e) {
  form.value.selfSelect = e.detail.value
  showExamine.value = e.detail.value == '1'
  if (e.detail.value == '2') {
    assignPopup.value.open()
  }
}
function closeAssignPopup() {
  assignPopup.value.close()
}

function handelAddExamine() {
  const chosenStr = JSON.stringify(list.value)
  uni.navigateTo({
    url: `/myCenter/chooseExaminer?memId=${memId.value}&isValidity=0&chosen=${chosenStr}`
  })
}

// 提交申请：打开自定义成功弹窗
async function handelSubmit() {
  if (!form.value.selfSelect) {
    return uni.showToast({ title: '请选择考官类型', icon: 'none' })
  }
  if (form.value.selfSelect == '1' && list.value.length == 0) {
    return uni.showToast({ title: '请添加考官', icon: 'none' })
  }

  try {
    await api.commitExamPointApply(form.value)
    successPopup.value.open()
  } catch (err) {
    uni.showToast({ title: err.data.msg, icon: 'none' })
  }
}
function confirmSuccess() {
  successPopup.value.close()
  uni.navigateBack()
}

// 考点申请弹窗（如需调用可在合适位置打开）
function openApplyPopup() {
  applyPopup.value.open()
}
function closeApplyPopup() {
  applyPopup.value.close()
}
function confirmApply() {
  applyPopup.value.close()
  // 此处添加考点申请逻辑
}
</script>

<style scoped>
/* 全局容器 */
.container {
  min-height: 100vh;
}
.section{
    padding:15rpx 20rpx;
}
/* 单选框区域 */
.radio-section {
  background: #fff;
  padding: 20rpx 15rpx;
  margin-bottom: 10rpx;
  border: none;
  border-radius: 0;
}

.radio-group {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  margin: 0;
}

::v-deep .custom-radio .wx-radio-input {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
}

::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked {
  border-color: #C4121B !important;
  background: #C4121B !important;
}

.radio-text {
  font-size: 14px;
  color: #333;
  margin-left: 8rpx;
}

/* 考官区域 */
.examiner-section {
  background: #fff;
  padding: 15rpx;
  margin-bottom: 20rpx;
  border: none;
  border-radius: 0;
}

.add-btn {
  background: #fff;
  color: #C4121B;
  border: 1rpx solid #C4121B;
  border-radius: 10rpx;
  padding: 10rpx 0;
  width: 100%;
  font-size: 14px;
}

.examiner-list {
  padding: 0 10rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  overflow-y: auto;
  margin-bottom: 70px;
}

.examiner-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  align-items: center;
}

.info {
  flex: 1;
}

.name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.idc, .reg {
  font-size: 12px;
  color: #666;
  display: block;
  margin: 10rpx 0;
}

.del-btn {
  color: #C4121B;
  font-size: 12px;
  border: 1rpx solid #C4121B;
  border-radius: 50rpx;
  padding: 10rpx 25rpx;
  line-height: 1.2;
  background: #fff;
}

/* 提交按钮 */
.submit-area {
  padding: 20rpx 0;
  background-color: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.submit-btn {
  width: 80%;
  height: 88rpx;
  border-radius: 44rpx;
  margin: 0 auto;
  line-height: 88rpx;
  background: #C4121B;
  color: #fff;
  text-align: center;
  font-size: 16px;
  border: none;
}

/* 自定义弹窗样式（核心） */
.custom-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  text-align: center;
}
.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
}
.modal-content {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
}
.modal-tip {
  font-size: 28rpx;
  color: #FF7A00;
  margin-top: 20rpx;
}
.modal-btns {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}
.btn-cancel {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background: #f5f5f5;
  color: #999;
  border-radius: 40rpx;
  font-size: 32rpx;
  border: none;
}
.btn-confirm {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background: #C4121B;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  border: none;
}
.single-btn {
  flex: 1;
}
.btn-cancel::after, .btn-confirm::after {
  border: none;
}
</style>