<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  class="radio-item">
          <radio :checked="form.selfSelect == '0'" class="custom-radio" value="0"/>
          <text class="radio-text">省跆协指派考官</text>
        </label>
      </radio-group>
    </view>
    
    <!-- 温馨提示 -->
    <view  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="addExaminer">+ 添加考官</button>
      </view>
        <view v-else class="section examiner-section">
        <button class="add-btn" @click="handelAddExamine">+ 选择考官</button>
      </view>
      
      <view class="examiner-list">
        <view v-for="item 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.pmName }}</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-popup ref="addPopup" type="bottom" background-color="#fff">
      <view class="popBody" style="background:#fff;">
        <view class="h3 text-center">添加考官</view>
        <view class="form-item">
          <text class="label">考官姓名</text>
          <uni-easyinput v-model="addForm.name" placeholder="请输入考官姓名" />
        </view>
        <view class="form-item">
          <text class="label">考官编号</text>
          <uni-easyinput v-model="addForm.certCode" placeholder="请输入考官编号" />
        </view>
        <view class="btn-group">
          <button class="btn-cancel" @click="closeAddPopup">取消</button>
          <button class="btn-confirm" @click="searchAndAdd">查询</button>
        </view>

        <!-- 搜索结果 -->
        <view v-if="searchResult" class="search-result">
          <view class="result-item">
            <view class="info">
              <view class="name">{{searchResult.perName}}</view>
              <view class="date">会员号：{{searchResult.perCode||'-'}}</view>
              <view class="date">证件号码：{{searchResult.idcCode||'-'}}</view>
              <view class="date">注册地：{{searchResult.memName||'-'}}</view>
            </view>
            <view class="action">
              <text v-if="searchResult.added" class="text-gray">已添加</text>
              <text v-else class="text-primary" @click="doAddExaminer(searchResult)">添加</text>
            </view>
          </view>
        </view>
        <view v-if="searchNoData" class="no-data">
          <text>未查询到考官信息</text>
        </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'
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 addPopup = ref(null)
const addForm = ref({
  type: 1,
  name: '',
  certCode: ''
})
const searchResult = ref(null)
const searchNoData = ref(false)

// 自定义弹窗
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 handelAddExamine() {
  const chosenStr = JSON.stringify(list.value)
  uni.navigateTo({
    url: `/myCenter/chooseExaminer?memId=${memId.value}&chosen=${chosenStr}`
  })
}

// 删除考官：打开自定义弹窗
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'
  list.value = []
  searchResult.value = null
  searchNoData.value = false
  // if (e.detail.value == '0') {
  //   modalAction = 'assign'
  //   modalConfig.value = {
  //     title: '温馨提示',
  //     content: `关于考官指派，请联系${shenForm.value.baseName || ''}，联系电话：${shenForm.value.phone || ''}`,
  //     showCancel: false,
  //     confirmText: '我知道了'
  //   }
  //   customModalRef.value.open()
  // }
}
// 打开添加考官弹窗
function addExaminer() {
  addForm.value.name = ''
  addForm.value.certCode = ''
  searchResult.value = null
  searchNoData.value = false
  addPopup.value.open()
}

// 关闭添加考官弹窗
function closeAddPopup() {
  addPopup.value.close()
}

// 搜索并添加考官
function searchAndAdd() {
  if (!addForm.value.name) {
    uni.showToast({ title: '请输入考官姓名', icon: 'none' })
    return
  }
  if (!addForm.value.certCode) {
    uni.showToast({ title: '请输入考官编号', icon: 'none' })
    return
  }

  uni.showLoading({ title: '查询中' })
  api.getCoachList(addForm.value).then(res => {
    uni.hideLoading()
    if (res.rows && res.rows.length > 0) {
      searchResult.value = res.rows[0]
      // 检查是否已添加
      const isAdded = list.value.some(l => l.perId === searchResult.value.perId)
      if (isAdded) {
        searchResult.value.added = true
      }
      searchNoData.value = false
    } else {
      searchResult.value = null
      searchNoData.value = true
    }
  }).catch(() => {
    uni.hideLoading()
    searchResult.value = null
    searchNoData.value = true
  })
}

// 执行添加考官
function doAddExaminer(row) {
  uni.showLoading({ title: '添加中' })
  api.selfAdd(row.perId).then(() => {
    uni.hideLoading()
    uni.showToast({ title: '添加成功', icon: 'success' })
    addPopup.value.close()
    getExaminer()
  }).catch(() => {
    uni.hideLoading()
    uni.showToast({ title: '添加失败', icon: 'error' })
  })
}

// 提交申请
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.redirectTo({
      url: '/myCenter/examPointApplyList'
    })
  }
  // 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;
}

/* 添加考官弹框 */
.popBody {
  width: 100%;
  padding: 40rpx 30rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  box-sizing: border-box;
}

.popBody .h3 {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}

.popBody .form-item {
  margin-bottom: 20rpx;
}

.popBody .form-item .label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.popBody .btn-group {
  display: flex;
  justify-content: center;
  gap: 40rpx;
  margin-top: 30rpx;
}

.popBody .btn-cancel,
.popBody .btn-confirm {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
}

.popBody .btn-cancel {
  background: #fff;
  color: #C4121B;
  border: 1px solid #C4121B;
}

.popBody .btn-confirm {
  background: #C4121B;
  color: #fff;
}

.search-result {
  margin-top: 30rpx;
  border-top: 1px solid #eee;
  padding-top: 20rpx;
}

.search-result .result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f9f9f9;
  border-radius: 8rpx;
}

.search-result .result-item .name {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.search-result .result-item .date {
  font-size: 24rpx;
  color: #666;
  margin-top: 4rpx;
}

.search-result .result-item .action {
  font-size: 28rpx;
  color: #007aff;
  padding: 10rpx 20rpx;
}

.no-data {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 28rpx;
}

.text-primary {
  color: #007aff;
}

.text-gray {
  color: #999;
}
</style>