<template>
  <view class="container">
    <!-- 自定义弹窗 -->
    <custom-modal ref="customModalRef" :cancelText="modalConfig.cancelText" :confirmText="modalConfig.confirmText"
                  :content="modalConfig.content" :showCancel="modalConfig.showCancel"
                  :title="modalConfig.title" @confirm="onModalConfirm"/>
    
    <!-- 考官选择类型 -->
    <!-- <view class="radio-section">
      <radio-group class="radio-group" @change="onSelfSelectChange">
        <label class="radio-item">
          <radio :checked="form.selfSelect == '1'" class="custom-radio" value="1"/>
          <text class="radio-text">自行录入考官（级位考官）</text>
        </label>
        <label v-if="shenForm.memberEpAudit==1" class="radio-item">
          <radio :checked="form.selfSelect == '0'" class="custom-radio" value="0"/>
          <text class="radio-text">省跆协指派考官</text>
        </label>
      </radio-group>
    </view> -->
    
    <!-- 温馨提示 -->
    <view v-if="form.selfSelect == '1'" class="tip-box">
      <text class="tip-text">温馨提示:
        您可以自行录入考官信息,如果暂时没有合适的考官，也可以选择由省跆协指派（支持多选）进行考点申报，同时请尽快完成考点考官的认证。
      </text>
    </view>
    
    <!-- 省跆协指派提示 -->
    <view v-if="form.selfSelect == '0'" class="tip-box">
      <text class="tip-text">温馨提示：关于考官指派，请联系{{ shenForm.baseName || '' }}，联系电话：{{
          shenForm.phone || ''
        }}
      </text>
    </view>
    
    <view class="section">
      <!-- 自行录入考官区域 -->
      <view v-if="form.selfSelect == '1'" class="section examiner-section">
        <button class="add-btn" @click="handelAddExamine">+ 添加考官</button>
      </view>
      
      <view v-if="form.selfSelect == '1'" class="examiner-list">
        <view v-for="(item, index) in list" :key="item.id" class="examiner-item">
          <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>
  </view>
</template>

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

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

// 自定义弹窗
const customModalRef = ref(null)
const modalConfig = ref({
  title: '',
  content: '',
  showCancel: true,
  cancelText: '取消',
  confirmText: '确定'
})
let modalAction = '' // 'del', 'success', 'assign', 'apply'
let pendingDelItem = null

onLoad((option) => {
  // memId.value = app.globalData.memberInfo.memId
  getExaminer()
})

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

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

async function getShenMemberInfoFn() {
  const res = await api.getShenMemberInfo()
  shenForm.value = res.data ?? {}
}

// 删除考官：打开自定义弹窗
function handleDel(row) {
  pendingDelItem = row
  modalAction = 'del'
  modalConfig.value = {
    title: '提示',
    content: '确定删除该考官吗？',
    showCancel: true,
    cancelText: '取消',
    confirmText: '确定'
  }
  customModalRef.value.open()
}

// 切换考官类型：打开自定义提示弹窗
function onSelfSelectChange(e) {
  form.value.selfSelect = e.detail.value
  showExamine.value = e.detail.value == '1'
  if (e.detail.value == '0') {
    modalAction = 'assign'
    modalConfig.value = {
      title: '温馨提示',
      content: `关于考官指派，请联系${shenForm.value.baseName || ''}，联系电话：${shenForm.value.phone || ''}`,
      showCancel: false,
      confirmText: '我知道了'
    }
    customModalRef.value.open()
  }
}

function handelAddExamine() {
  const chosenStr = JSON.stringify(list.value)
  uni.navigateTo({
    url: `/myCenter/chooseExaminer?memId=${memId.value}&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'})
  }
  
  modalAction = 'success'
  modalConfig.value = {
    title: '提示',
    content: '友情提示：非考点无法申请级位考试，是否确认提交申请？',
    showCancel: true,
    cancelText: '暂不申请',
    confirmText: '确认提交'
  }
  customModalRef.value.open()
}

// 弹窗确认回调
async function onModalConfirm() {
  if (modalAction === 'del' && pendingDelItem) {
    try {
      await api.examinerDel(pendingDelItem.id)
      uni.showToast({title: '删除成功', icon: 'success'})
      await getExaminer()
    } catch (e) {
      uni.showToast({title: '删除失败', icon: 'error'})
    }
    pendingDelItem = null
  } else if (modalAction === 'success') {
    try {
      await api.commitExamPointApply(form.value)
      modalAction = 'submitSuccess'
      modalConfig.value = {
        title: '成功',
        content: '提交成功，请等待审核',
        showCancel: false,
        confirmText: '确定'
      }
      customModalRef.value.open()
    } catch (err) {
      uni.showToast({title: err.data?.msg || '提交失败', icon: 'none'})
    }
  } else if (modalAction === 'submitSuccess') {
    uni.navigateBack()
  }
  // modalAction = ''
}

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

/* 提示框 */
.tip-box {
  background: #fff7e6;
  padding: 20rpx 30rpx;
  margin-bottom: 10rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #fa8c16;
  line-height: 1.6;
}

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