<template>
  <div class="content">
    <!-- 从业资格认证 -->
    <el-tabs
      v-show="tabs?.length>1"
      v-model="activeName"
      type="card"
      class="demo-tabs"
    >
      <el-tab-pane v-for="t in tabs" :key="t.name" :label="t.label" :name="t.name" />
    </el-tabs>
    <div class="">
      <el-form ref="infoRef" :model="personRoleInfo" label-width="100px" :rules="rules" label-suffix="：">
        <el-collapse v-model="activeNames" style="width: 100%;">
          <div v-if="activeName=='2'||activeName=='3'||activeName=='4'" class="relative">
            <h3 class="h3">{{ subTitle }}类型：</h3>
            <el-collapse-item title="" name="5" class="collapse">
              <div class="card flex">
                <el-form-item :label="`${subTitle}类型`" prop="">
                  <!-- <el-radio-group v-if="form.perType=='3'" v-model="form.examinerType" @change="checkUserByIdCard">
                    <el-radio label="1">晋级考官</el-radio>
                    <el-radio label="2">晋段考官</el-radio>
                  </el-radio-group> -->
                  <div v-if="form.perType=='3'"> {{ form.examinerType==1?'晋级考官':'晋段考官' }}</div>
                  <div v-else> 
                    <span v-for="t in typeArr" v-show="personRoleInfo.type==t.value" :key="t"> {{ t.label }}</span>
                  </div>
                  <!-- <el-radio-group v-else v-model="personRoleInfo.type">
                    <el-radio v-for="t in typeArr" :key="t.value" :label="t.value">{{ t.label }}</el-radio>
                  </el-radio-group> -->
                </el-form-item>
                <el-form-item :label="`${subTitle}证号`" prop="">
                  <!-- <el-input v-model="personRoleInfo.card" style="width: 300px;" /> -->
                  <div>{{ personRoleInfo.card }}</div>
                </el-form-item>
                <el-form-item label="所属省份" prop="">
                  <!-- <el-select v-model="form.provinceId" style="width: 300px">
                    <el-option v-for="item in provinceList" :key="item.value" :label="item.text" :value="item.value" /> 
                  </el-select>
                  -->
                  <div>
                    <span v-for="item in provinceList" v-show="item.value==form.provinceId" :key="item.value">
                      {{ item.text }}</span>
                  </div>
                  
                </el-form-item>
                <el-form-item :label="form.perType=='3'?'发证日期':'通过日期'" prop="">
                  <!-- <el-date-picker
                    v-model="personRoleInfo.passTime"
                    clearable
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择通过日期"
                    style="width: 300px;"
                  /> -->
                  <div>{{ personRoleInfo.passTime }}</div>
                </el-form-item>
                <el-form-item v-if="form.perType!='3'" label="增加日期" prop="">
                  <!-- <el-date-picker
                    v-model="personRoleInfo.addTime"
                    clearable
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择增加日期"
                    style="width: 300px;"
                  /> -->
                  <div> {{ personRoleInfo.addTime }} </div>
                </el-form-item>
                <el-form-item label="有效日期" prop="">
                  <!-- <el-date-picker
                    v-model="personRoleInfo.validTime"
                    clearable
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择有效日期"
                    style="width: 300px;"
                  /> -->
                  <div>
                    {{ personRoleInfo.validTime }}
                  </div>
                </el-form-item>
                <el-form-item v-if="form.perType=='3'" label="联系电话" prop="">
                  <!-- <el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 300px;" /> -->
                  <div> {{ form.phone }} </div>
                </el-form-item>
                <el-form-item v-if="form.examinerType=='2'" label="所属单位" prop="">
                  <!-- <el-cascader
                    v-model="personRoleInfo.unit"
                    :options="deptTree"
                    style="width: 300px"
                    :show-all-levels="false"
                    :props="{value:'id', emitPath: false, checkStrictly:true}"
                  /> -->
                  <div>{{ personRoleInfo.unitName }}</div>
                </el-form-item>
                <el-form-item :label="`${subTitle}级别`" prop="">
                  <!-- <el-select v-model="personRoleInfo.rank" style="width: 300px;">
                    <el-option v-for="item in jList" :key="item" :label="`${szToHz(item)}级`" :value="item" />
                  </el-select> -->
                  <div>
                    <span v-for="item in jList" v-show="personRoleInfo.rank==item" :key="item">{{ `${szToHz(item)}级` }} </span>
                  </div>
                </el-form-item>
                <el-form-item v-if="form.examinerType=='2'" :label="`${subTitle}段位`" prop="">
                  <!-- <el-select v-model="personRoleInfo.duan" :placeholder="`请选择${subTitle}段位`" style="width: 300px;">
                    <el-option v-for="item in dList" :key="item" :label="`${szToHz(item)}段`" :value="item" />
                  </el-select> -->
                  <div>
                    <span v-for="item in dList" v-show="personRoleInfo.rank==item" :key="item">{{ `${szToHz(item)}段` }} </span>
                  </div>
                </el-form-item>
                <el-form-item v-if="form.examinerType=='2'" label="考官类型" prop="">
                  <div>
                    <span v-for="t in typeArr" v-show="personRoleInfo.type==t.value" :key="t"> {{ t.label }}</span>
                  </div>
                </el-form-item>

                <div v-if="deptType==1" style="margin-left: 200px;">
                  <!-- <el-button :disabled="!canSubmit" type="primary" @click="submitForm">保存</el-button> -->
                  <el-button type="primary" @click=" showEdit = true ">编辑</el-button>
                </div>
              </div>
            </el-collapse-item>
          </div>
          <div v-if="activeName=='1'||activeName=='2'" class="relative">
            <h3 class="h3">证书：<el-button class="btn-left" type="primary" icon="Plus" @click="addFN(0)">添加</el-button></h3>
            <el-collapse-item title="" name="1" class="collapse">
              <div>
                <div v-for="item in certs " :key="item.id" class="card">
                  <div class="book">
                    <span class="book-left">证书名称  </span>
                    <span class="book-right">{{ item. certName }}</span>
                  </div>
                  <el-row>
                    <el-col :span="8">
                      <span class="book-left">证书编号  </span>
                      <span class="book-right">{{ item. certCode }}</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="book-left">证书有效期:  </span>
                      <span class="book-right">{{ item. certDate }}</span>
                    </el-col>
                    <el-col :span="8" class="textLeft">
                      <el-link :href="`${ download +item?.certUrl[0]?.url}`" :underline="false" target="_blank">
                        <el-button link type="primary" icon="Download">下载证书</el-button>
                      </el-link>
                      <el-button link type="primary" icon="Edit" @click="addFN(0,undefined,item)">编辑</el-button>
                      <el-button link type="primary" icon="Delete" @click="handleDelete(item)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
                <h4 v-if="certs?.length<=0" class="card" style="text-align: center;">暂无证书！</h4>
              </div>
            </el-collapse-item>
          </div>
          <div v-if="activeName=='1'||activeName=='2'" class="relative">
            <h3 class="h3">参赛信息：<el-button icon="Plus" type="primary" @click="addFN(2,0)">添加</el-button></h3>
            <el-collapse-item title="" name="2" class="collapse">
              <div>
                <div v-for="item in canSai " :key="item.id" class="card">
                  <div class="book">
                    <span class="book-left">赛事名称  </span>
                    <span class="book-right">{{ item. event }}</span>
                  </div>
                  <el-row>
                    <el-col :span="8">
                      <span class="book-left">参赛时间  </span>
                      <span class="book-right">{{ item. date }}</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="book-left">成绩  </span>
                      <span class="book-right">{{ item. score }}</span>
                    </el-col>
                    <el-col :span="8" class="textLeft">
                      <el-button link type="primary" icon="Edit" @click="addFN(2,0,item)">编辑</el-button>
                      <el-button link type="primary" icon="Delete" @click="canSaiDelete(item)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
                <h4 v-if="canSai?.length<=0" class="card" style="text-align: center;">暂无参赛信息！</h4>

              </div>
            </el-collapse-item>
          </div>
          <div v-if="activeName=='1'||activeName=='2'||activeName=='3'||activeName=='4'" class="relative">
            <h3 class="h3">培训信息：<el-button icon="Plus" type="primary" @click="addFN(1,1)">添加</el-button></h3>
            <el-collapse-item title="" name="3" class="collapse">
              <div>
                <div v-for="item in peiXun " :key="item.id" class="card">
                  <div class="book">
                    <span class="book-left">培训名称  </span>
                    <span class="book-right">{{ item. event }}</span>
                  </div>
                  <el-row>
                    <el-col :span="8">
                      <span class="book-left">参赛时间  </span>
                      <span class="book-right">{{ item. date }}</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="book-left">成绩  </span>
                      <span class="book-right">{{ item. score }}</span>
                    </el-col>
                    <el-col :span="8" class="textLeft">
                      <el-button link type="primary" icon="Edit" @click="addFN(1,1,item)">编辑</el-button>
                      <el-button link type="primary" icon="Delete" @click="canSaiDelete(item)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
                <h4 v-if="peiXun?.length<=0" class="card" style="text-align: center;">暂无培训信息！</h4>
              </div>
            </el-collapse-item>
          </div>
          <div v-if="activeName=='3'||activeName=='4'" class="relative">
            <h3 class="h3">执赛信息：<el-button icon="Plus" type="primary" @click="addFN(3,2)">添加</el-button></h3>
            <el-collapse-item title="" name="4" class="collapse">
              <div>
                <div v-for="item in zhiSai " :key="item.id" class="card">
                  <div class="book">
                    <span class="book-left">赛事名称  </span>
                    <span class="book-right">{{ item. event }}</span>
                  </div>
                  <el-row>
                    <el-col :span="8">
                      <span class="book-left">参赛时间  </span>
                      <span class="book-right">{{ item. date }}</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="book-left">成绩  </span>
                      <span class="book-right">{{ item. score }}</span>
                    </el-col>
                    <el-col :span="8" class="textLeft">
                      <el-button link type="primary" icon="Edit" @click="addFN(1,1,item)">编辑</el-button>
                      <el-button link type="primary" icon="Delete" @click="canSaiDelete(item)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
                <h4 v-if="zhiSai?.length<=0" class="card" style="text-align: center;">暂无执赛信息！</h4>
              </div>
            </el-collapse-item>
          </div>
        </el-collapse>
      </el-form>
    </div>

    <!-- 教练，裁判，考试官 -->
    <el-dialog
      v-if="showEdit"
      v-model="showEdit"
      title="编辑"
      width="40%"
      :destroy-on-close="true"
      :close-on-click-modal="true"
      @close="close"
    >
      <el-form ref="infoRef" :model="personRoleInfo" label-width="100px" :rules="rules" label-suffix="：">
        <div v-if="activeName=='2'||activeName=='3'||activeName=='4'" class="relative">
          <div class="card">
            <el-form-item :label="`${subTitle}类型`" prop="type">
              <el-radio-group v-if="form.perType=='3'" v-model="form.examinerType" @change="checkUserByIdCard">
                <el-radio label="1">晋级考官</el-radio>
                <el-radio label="2">晋段考官</el-radio>
              </el-radio-group>
              <el-radio-group v-else v-model="personRoleInfo.type">
                <el-radio v-for="t in typeArr" :key="t.value" :label="t.value">{{ t.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.examinerType==2" label="考官等级" prop="type">
              <el-radio-group v-model="personRoleInfo.type">
                <el-radio v-for="t in typeArr" :key="t.value" :label="t.value">{{ t.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="`${subTitle}证号`" prop="card">
              <el-input v-model="personRoleInfo.card" style="width: 400px;" />
            </el-form-item>
            <el-form-item label="所属省份" prop="provinceId">
              <el-select v-model="form.provinceId" style="width: 400px">
                <el-option v-for="item in provinceList" :key="item.value" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item :label="form.perType=='3'?'发证日期':'通过日期'" prop="passTime">
              <el-date-picker
                v-model="personRoleInfo.passTime"
                clearable
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择通过日期"
                style="width: 400px;"
              />
            </el-form-item>
            <el-form-item v-if="form.perType!='3'" label="增加日期" prop="addTime">
              <el-date-picker
                v-model="personRoleInfo.addTime"
                clearable
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择增加日期"
                style="width: 400px;"
              />
            </el-form-item>
            <el-form-item label="有效日期" prop="validTime">
              <el-date-picker
                v-model="personRoleInfo.validTime"
                clearable
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择有效日期"
                style="width: 400px;"
              />
            </el-form-item>
            <el-form-item v-if="form.perType=='3'" label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 400px;" />
            </el-form-item>
            <el-form-item v-if="form.examinerType=='2'" label="所属单位" prop="unit">
              <el-cascader
                v-model="personRoleInfo.unit"
                :options="deptTree"
                style="width: 400px"
                :show-all-levels="false"
                :props="{value:'id', emitPath: false, checkStrictly:true}"
              />
            </el-form-item>
            <el-form-item :label="`${subTitle}级别`" prop="rank">
              <el-select v-model="personRoleInfo.rank" style="width: 400px;">
                <el-option v-for="item in jList" :key="item" :label="`${szToHz(item)}级`" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="form.examinerType=='2'" :label="`${subTitle}段位`" prop="duan">
              <el-select v-model="personRoleInfo.duan" :placeholder="`请选择${subTitle}段位`" style="width: 400px;">
                <el-option v-for="item in dList" :key="item" :label="`${szToHz(item)}段`" :value="item" />
              </el-select>
            </el-form-item>
            <div style="margin-left: 250px;">
              <el-button :disabled="!canSubmit" type="primary" @click="submitForm">保存</el-button>
            </div>
          </div>
        </div>
          
      </el-form>
    </el-dialog>

    <!-- 添加编辑 -->
    <el-dialog
      v-if="showDialog"
      v-model="showDialog"
      title="添加或编辑"
      width="40%"
      :destroy-on-close="true"
      :close-on-click-modal="true"
      @close="close"
    >
      <el-form ref="addInfo" :model="addForm" :rules="rules" label-width="120px">
        <!-- 证书 -->
        <div v-if="status==0">
          <el-form-item label="证书名称" prop="certName">
            <el-input v-model="addForm.certName" style="width: 350px;" placeholder="请输入证书名称" />
          </el-form-item>
          <el-form-item label="证书编号" prop="certCode">
            <el-input v-model="addForm.certCode" style="width: 350px;" placeholder="请输入证书编号" />
          </el-form-item>
          <el-form-item label="证书有效期:" prop="certDate">
            <el-date-picker
              v-model="addForm.certDate"
              type="date"
              placeholder="请选择证书有效期"
              value-format="YYYY-MM-DD"
              style="width: 350px;"
            />
          </el-form-item>
          <el-form-item label="上传证书:" prop="certUrl">
            <file-upload v-model="addForm.certUrl" />
          </el-form-item>
          <el-row justify="center">
            <el-button :loading="buttonLoading" type="primary" @click="submitFN">保存</el-button>
            <el-button @click="close">取 消</el-button>
          </el-row>
        </div>
        <!-- 参赛 -->
        <div v-if="status==2">
          <el-form-item label="赛事名称:" prop="event">
            <el-input v-model="addForm.event" style="width: 350px;" placeholder="赛事名称" />
          </el-form-item>
          <el-form-item label="成绩:" prop="score">
            <el-input v-model="addForm.score" style="width: 350px;" placeholder="赛事成绩" />
          </el-form-item>
          <el-form-item label="参赛时间:" prop="date">
            <el-date-picker
              v-model="addForm.date"
              type="date"
              placeholder="请选着参赛时间"
              value-format="YYYY-MM-DD"
              style="width: 350px;"
            />
          </el-form-item>
          <el-row justify="center">
            <el-button :loading="buttonLoading" type="primary" @click="qualificationFN">保存</el-button>
            <el-button @click="close">取 消</el-button>
          </el-row>
        </div>
        <!-- 执赛 -->
        <div v-if="status==3">
          <el-form-item label="执赛名称:" prop="event">
            <el-input v-model="addForm.event" style="width: 350px;" placeholder="执赛名称:" />
          </el-form-item>
          <el-form-item label="成绩:" prop="score">
            <el-input v-model="addForm.score" style="width: 350px;" placeholder="执赛成绩" />
          </el-form-item>
          <el-form-item label="执赛时间:" prop="date">
            <el-date-picker
              v-model="addForm.date"
              type="date"
              placeholder="请选着执赛时间"
              value-format="YYYY-MM-DD"
              style="width: 350px;"
            />
          </el-form-item>
          <el-row justify="center">
            <el-button :loading="buttonLoading" type="primary" @click="qualificationFN">保存</el-button>
            <el-button @click="close">取 消</el-button>
          </el-row>
        </div>
        <!-- 培训 -->
        <div v-if="status==1">
          <el-form-item label="培训名称:" prop="event">
            <el-input v-model="addForm.event" style="width: 350px;" placeholder="培训科目" />
          </el-form-item>
          <el-form-item label="成绩:" prop="score">
            <el-input v-model="addForm.score" style="width: 350px;" placeholder="培训成绩" />
          </el-form-item>
          <el-form-item label="培训时间:" prop="date">
            <el-date-picker
              v-model="addForm.date"
              type="date"
              placeholder="请选着培训时间"
              value-format="YYYY-MM-DD"
              style="width: 350px;"
            />
          </el-form-item>
          <el-row justify="center">
            <el-button :loading="buttonLoading" type="primary" @click="qualificationFN">保存</el-button>
            <el-button @click="close">取 消</el-button>
          </el-row>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup >
import { ref, reactive, toRefs, getCurrentInstance, onMounted, watch } from 'vue'
import { editPersonInfo, delCert, updateCert, addCert, delQualification, updateQualification, addQualification } from '@/api/member/detail.js'
import { extractInfoFromChinaIdCard, getAssoPers, getInfo } from '@/api/person/info.js'
import { useRoute } from 'vue-router'
import { szToHz } from '@/utils/ruoyi'
import _ from 'lodash'
import { regionsList } from '@/api/system/userInfo'
import { deptTreeSelect } from '@/api/system/user'
import { validPhone } from '@/utils/validate'
import useUserStore from '@/store/modules/user'
const deptType = computed(() => useUserStore().deptType)
const tabsBase = [
  { name: '1', label: '运动员', show: false },
  { name: '2', label: '教练', show: false },
  { name: '3', label: '裁判', show: false },
  { name: '4', label: '考官', show: false }
]
const tabs = ref([])

const status = ref(0)// 0 证书，1 培训，2 参赛，3 执赛
const route = useRoute()
const buttonLoading = ref(false)
const showDialog = ref(false)
const showEdit = ref(false)
const activeName = ref('0')
const loading = ref(false)
const baseUrl = import.meta.env.VITE_APP_BASE_API
const download = ref(baseUrl + '/upload/getFile?fileUrl=') // 下载地址
const activeNames = ref('0')
const { proxy } = getCurrentInstance()
const dList = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const jList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const certs = ref([])
const canSai = ref([])
const peiXun = ref([])
const zhiSai = ref([])
// const parents = ref()

const data = reactive({
  rules: {
    certName: [
      { required: true, message: '证书名称不能为空', trigger: 'blur' }
    ],
    certCode: [
      { required: true, message: '证书编号不能为空', trigger: 'blur' }
    ],
    certDate: [
      { required: true, message: '证书有效期不能为空', trigger: 'blur' }
    ],
    certUrl: [
      { required: true, message: '请上传证书', trigger: 'blur' }
    ],
    date: [
      { required: true, message: '时间不能为空', trigger: 'blur' }
    ],
    event: [
      { required: true, message: '事件不能为空', trigger: 'blur' }
    ],
    score: [
      { required: true, message: '成绩不能为空', trigger: 'blur' }
    ],
    name: { required: true, message: '请输入赛事名称', trigger: 'blur' },
    type: { validator: (rule, value, callback) => {
      if (form.value.perType != '3') {
        if (!personRoleInfo.value.type) {
          callback(`请选择${subTitle.value}类型`)
        } else {
          callback()
        }
      } else {
        callback()
      }
    }, required: true, trigger: 'change' },
    rank: { required: true, message: () => `请选择${subTitle.value}级别`, trigger: 'change' },
    duan: { required: true, message: () => `请选择${subTitle.value}段位`, trigger: 'change' },
    validTime: { required: true, message: '请选择有效期', trigger: 'change' },
    addTime: { required: true, message: '请选择增加日期', trigger: 'change' },
    passTime: { required: true, message: () => `请选择${form.perType == '3' ? '发证' : '通过'}日期`, trigger: 'change' },
    card: { required: true, message: () => `请输入${subTitle.value}证号`, trigger: 'blur' },
    provinceId: { validator: (rule, value, callback) => {
      if (!form.value.provinceId) {
        callback('请选择所属省份')
      } else {
        callback()
      }
    }, required: true, trigger: 'change' },
    phone: { validator: (rule, value, callback) => {
      if (validPhone(form.value.phone)) {
        callback()
      } else {
        callback('请输入正确手机号')
      }
    }, required: true, trigger: 'blur' },
    unit: { required: true, message: '请选择所属单位', trigger: 'change' }
  },
  form: {},
  ruleForm: {},
  addForm: {},
  personRoleInfo: {}
})
const { rules, form, addForm, personRoleInfo } = toRefs(data)

const subTitle = ref('')
const typeArr = ref([])
const provinceList = ref([])
const deptTree = ref([])
const canSubmit = ref(true)

let currTab, currPerId
onMounted(() => {
  regionsList().then(res => {
    provinceList.value = res.data
  })

  getAssoPers(route.query.perId).then(res => {
    console.log(res)
    _.each(res.data, (d, i) => {
      switch (i) {
        case '10':// 运动员
          tabsBase[0].perId = d
          tabsBase[0].show = true
          break
        case '20':// 教练
          tabsBase[1].perId = d
          tabsBase[1].show = true
          break
        case '31':// 裁判
          tabsBase[3].perId1 = d
          tabsBase[3].show = true
          break
        case '32':// 裁判
          tabsBase[3].perId2 = d
          tabsBase[3].show = true
          break
        case '40':// 考官
          tabsBase[2].perId = d
          tabsBase[2].show = true
          break
      }
    })

    console.log(tabsBase)
    tabs.value = _.filter(tabsBase, (t) => t.show)
    console.log(tabs.value)
    activeName.value = tabs.value[0].name
  })
})

watch(activeName, (val) => {
  if (val) {
    currTab = _.find(tabs.value, (t) => t.name == val)

    switch (val) {
      case '1':// 运动员
        activeNames.value = '1'
        currPerId = currTab.perId
        break
      case '2':// 教练
      case '3':// 裁判
        activeNames.value = '5'
        currPerId = currTab.perId
        break
      case '4':// 考官
        activeNames.value = '5'
        if (currTab.perId1 && currTab.perId2) {
          if (route.query.perId == currTab.perId1 || route.query.perId == currTab.perId2) {
            currPerId = route.query.perId
          } else {
            currPerId = currTab.perId1
          }
        } else {
          currPerId = currTab.perId1 || currTab.perId2
        }
        break
    }

    initData()
  }
})

async function deptTreeSelectFN() {
  if (deptTree.value.length == 0) {
    const res = await deptTreeSelect({ selfDeptId: '-1', fromTree: 1 })
    deptTree.value = res.data
  }
}

function addFN(n, i, row) {
  status.value = n
  if (i != undefined) addForm.value.type = i
  if (row != undefined)addForm.value = row
  showDialog.value = true
}

function guid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0
    var v = c == 'x' ? r : (r & 0x3 | 0x8)
    return v.toString(16)
  })
}

async function initData() {
  if (deptTree.value.length == 0) {
    const res1 = await deptTreeSelect({ selfDeptId: '-1', fromTree: 1 })
    deptTree.value = res1.data
  }

  const res = await getInfo(currPerId)
  switch (res.data.perType) {
    case '2':
      subTitle.value = '教练'
      typeArr.value = [{ label: '初级', value: 1 }, { label: '中级', value: 2 }, { label: '高级', value: 3 }]
      break
    case '3':
      subTitle.value = '考官'
      deptTreeSelectFN()
      typeArr.value = [{ label: '初级', value: 1 }, { label: '中级', value: 2 }, { label: '高级', value: 3 }]
      break
    case '4':
      subTitle.value = '裁判'
      typeArr.value = [{ label: '三级', value: 1 }, { label: '二级', value: 2 }, { label: '一级', value: 3 }, { label: '国家级', value: 4 }]
      break
  }

  canSai.value = []
  peiXun.value = []
  zhiSai.value = []
  certs.value = []
  form.value = res.data
  certs.value = form.value.certs

  certs.value?.forEach(item => {
    item.certUrl = JSON.parse(item.certUrl)
  })
  form.value.qualifications?.forEach(item => {
    item.uuid = guid()
    if (item.type == 0) canSai.value.push(item)
    if (item.type == 1) peiXun.value.push(item)
    if (item.type == 2) zhiSai.value.push(item)
  })

  if (form.value.personRoleInfo) {
    personRoleInfo.value = JSON.parse(form.value.personRoleInfo)

    if (_.isArray(personRoleInfo.value.type)) {
      personRoleInfo.value.type = _.max(personRoleInfo.value.type)
    }
    if (_.isArray(personRoleInfo.value.rank)) {
      personRoleInfo.value.rank = _.min(personRoleInfo.value.rank)
    }
    if (_.isArray(personRoleInfo.value.duan)) {
      personRoleInfo.value.duan = _.min(personRoleInfo.value.duan)
    }
  }
}


// 提交 证书
async function submitFN() {
  addForm.value.perId = currPerId
  const forms = JSON.parse(JSON.stringify(addForm.value))
  forms.certUrl = JSON.stringify(forms.certUrl)
  proxy.$refs['addInfo'].validate(valid => {
    if (valid) {
      buttonLoading.value = true
      if (forms.id != null) {
        updateCert(forms).then(response => {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          close()
          initData()
        }).finally(() => {
          buttonLoading.value = false
        })
      } else {
        addCert(forms).then(response => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          close()
          initData()
        }).finally(() => {
          buttonLoading.value = false
        })
      }
    }
  })
}

/** 证书 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除会员证书编号为"' + row.certCode + '"的数据项？').then(function() {
    loading.value = true
    return delCert(row.id)
  }).then(() => {
    loading.value = true
    initData()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {
  }).finally(() => {
    loading.value = false
  })
}

function close() {
  showDialog.value = false
  addForm.value = {}
}

/** 参赛 删除按钮操作 */
function canSaiDelete(row) {
  proxy.$modal.confirm('是否确认删除参赛为"' + row.event + '"的数据项？').then(function() {
    loading.value = true
    return delQualification(row.qualId)
  }).then(() => {
    loading.value = true
    initData()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {
  }).finally(() => {
    loading.value = false
  })
}

/** 提交按钮 */
function qualificationFN() {
  addForm.value.perId = currPerId
  const forms = JSON.parse(JSON.stringify(addForm.value))
  proxy.$refs['addInfo'].validate(valid => {
    if (valid) {
      buttonLoading.value = true
      if (forms.qualId != null) {
        updateQualification(forms).then(response => {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          showDialog.value = false
          close()
          initData()
        }).finally(() => {
          buttonLoading.value = false
        })
      } else {
        addQualification(forms).then(response => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          close()
          initData()
        }).finally(() => {
          buttonLoading.value = false
          showDialog.value = false
        })
      }
    }
  })
}

function checkUserByIdCard() {
  if (currTab[`perId${form.value.examinerType}`]) {
    currPerId = currTab[`perId${form.value.examinerType}`]
    initData()
  } else {
    extractInfoFromChinaIdCard({
      perId: form.value.perId,
      perType: form.value.perType,
      examinerType: form.value.examinerType,
      idcType: form.value.idcType,
      idcCode: form.value.idcCode
    }).then((res) => {
      if (res.data.hasFlag) {
        proxy.$modal.msgError('该成员已存在！')
        canSubmit.value = false
      } else {
        canSubmit.value = true
      }
    })
  }
}

function submitForm() {
  proxy.$refs['infoRef'].validate(valid => {
    if (valid) {
      buttonLoading.value = true
      form.value.personRoleInfo = JSON.stringify(personRoleInfo.value)
      editPersonInfo(form.value).then(res => {
        proxy.$modal.msgSuccess('操作成功')
        initData()
      }).finally(() => {
        buttonLoading.value = false
      })
    }
  })
}


</script>


<style  lang="scss" scoped>

.button{
  margin-left: 400px;
  margin-top: 40px;
}

.left{
  margin-left: 20px;
}
.top{
  margin-top:10px
}
.iconFN{
  cursor:pointer;
  color:rgba(245,108,108)
}

.card{
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.flex{
  display: flex;
  flex-wrap: wrap;
}

.flex >div{
  flex: 0 0 50%;
  min-width: 50%;
  text-align: center;
}


.book{
  margin-bottom: 20px;
}
.book-left{
  color: #4C5359 ;
  font-size: 14px;

}
.book-right{
  color: #000 ;
  font-size: 14px;
  font-weight: 600;
}

.textLeft{
  text-align: right;
}

:deep(.el-collapse-item__content )
 {
  background-color: #f5f7f9;
}

:deep(.el-collapse-item__header )
 {
  background-color: #f5f7f9;
}
:deep(.collapse){
  background-color: #f5f7f9;
}

.relative{
  position: relative;
  margin-bottom: 20px;
  padding-top: 15px;
}
.h3{
  position: absolute;
  top: -12px;
  left: 18px;
  height: 40px;
}

.btn-left{
  margin-left: 37px;
}

.content{
  background-color:#f5f7f9 ;
  padding: 20px;
}
</style>