<template>
  <el-dialog v-model="showDialog" destroy-on-close title="考点申请" width="800px">
    <div>
      <div>
        <div style="display: inline-block;">考官选择：</div>
        <el-radio-group v-model="form.selfSelect" @change="showRemind">
          <el-radio label="1">自行录入考官（级位考官）</el-radio>
          <el-radio label="0">省跆协指派考官</el-radio>
        </el-radio-group>
      </div>

      <div>
        <div class="text-warning">
          <br>
          <!--          温馨提示: 您可以自行录入考官信息,如果暂时没有考官，可以选择由省跆协指派进行考点申报，请尽快完成考点考官的认证。-->

          温馨提示：<br>
          根据中国跆拳道协会考点管理办法请添加考点考官。<br>
          如若已有考官：点击【录入考官信息】，根据相关信息填写考官资料进行录入。<br>
          如若没有考官：点击【申请省跆协指派考官】，选择省内相关考官并及时参加考官培训
          完成考官设置后，才能继续提交考点申报。 请您尽快操作，以免影响后续考试安排。
        </div>
        <div style="text-align: right;margin:20px 10px;">
          <el-button v-if="form.selfSelect==1" type="primary" @click="handelAddExamine">添加考官</el-button>
          <el-button v-if="form.selfSelect==0" type="primary" @click="examinerChoice">选择考官</el-button>
        </div>
        <el-table v-loading="loading" :data="list" border>
          <el-table-column align="center" label="序号" type="index" width="55" />
          <el-table-column align="center" label="姓名" min-width="100" prop="perName" />
          <el-table-column align="center" label="会员号" min-width="130" prop="perCode" />
          <el-table-column align="center" label="证件号码" min-width="170" prop="perIdcCode" />
          <el-table-column
            align="center" label="注册单位" min-width="180" prop="roleInfo.unit" show-overflow-tooltip
          />
          <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
            <template #default="{row}">
              <el-button link type="primary" @click="handleDel(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--      <div v-show="form.selfSelect==0" class="text-warning">-->
      <!--        <br>-->
      <!--        温馨提示：关于考官指派，请联系{{ shenForm.baseName }}，联系电话：{{ shenForm.phone }}-->
      <!--      </div>-->

      <div style="height: 50px;" />
      <div style="text-align: center;">
        <br>
        <br>
        <br>
        <el-button class="largeBtn" round type="primary" @click="handelSubmit">确定</el-button>
      </div>
    </div>

    <ChooseExaminer ref="ChooseExaminerRef" is-validity="0" @chosen="chosenExaminer" />
    <ChooseRankExaminer ref="ChooseRankExaminerRef" is-validity="0" @chosen="chosenExaminerCallback" />
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import { commitExamPointApply } from '@/api/system/userInfo'
import { examinerDel, listApi, selfAdd, getShenMemberInfo } from '@/api/exam/examinationAudit'
import ChooseExaminer from '@/views/exam/components/chooseExaminer'
import ChooseRankExaminer from '@/views/exam/components/chooseRankExaminer.vue'


const emit = defineEmits(['handelAddExamine', 'handelExamineRadio', 'handelSubmit'])
const { proxy } = getCurrentInstance()
const showDialog = ref(false)
const loading = ref(false)
const form = ref({
  selfSelect: '1'
})
const shenForm = ref({})
const list = ref([])
const memId = ref()

function open(id, photos) {
  memId.value = id
  showDialog.value = true
  form.value.photos = photos
  getExaminer()
  getShenMemberInfoFn()
}

async function getExaminer() {
  loading.value = true
  const res = await listApi({ memId: memId.value })
  list.value = res.rows
  for (const val of list.value) {
    if (val.roleInfo) val.roleInfo = JSON.parse(val.roleInfo)
  }
  loading.value = false
}

async function handleDel(row) {
  await proxy.$modal.confirm('确定删除该考官吗？')
  await examinerDel(row.id)
  await proxy.$modal.msgSuccess('删除成功')
  await getExaminer()
}

// function showRemind(e) {
//   if (e == '0') {
//     proxy.$modal.confirm(`温馨提示：关于考官指派，请联系${shenForm.value.baseName}，联系电话：${shenForm.value.phone}`)
//   }
// }

async function chosenExaminer(perId) {
  await selfAdd(memId.value, perId)
  await proxy.$modal.msgSuccess('操作成功！')
  await getExaminer()
}

async function chosenExaminerCallback(row) {
  await selfAdd(memId.value, row.perId)
  await proxy.$modal.msgSuccess('操作成功！')
  await getExaminer()
}

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

// 添加考官
function handelAddExamine() {
  // 选择考官
  // proxy.$refs['ChooseExaminerRef'].open(list.value)
  proxy.$refs['ChooseRankExaminerRef'].open({
    ec: memId.value,
    type: '1',
    chosen: list.value
  })
}

function examinerChoice() {
  proxy.$refs['ChooseExaminerRef'].open(list.value)
}

async function handelSubmit() {
  if (list.value?.length == 0) {
    return proxy.$modal.msgError('请添加考官！')
  }
  await commitExamPointApply(form.value)
  await proxy.$modal.confirm('提交成功，请等待审核')
  emit('handelSubmit')
  showDialog.value = false
}

defineExpose({
  open
})
</script>


<style lang="scss" scoped>

</style>