<template>
  <div class="grid-content">
    <el-tabs v-model="activeName">
      <el-tab-pane label="个人基本信息" name="first">
        <el-form ref="myformRef" :model="myform" label-width="120px">
          <el-row v-if="labelArr?.length>0">
            <el-col :span="14">
              <el-form-item label="姓名">
                <el-input v-model="myform.realName" />
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="myform.sex">
                  <el-radio label="0" size="large">男</el-radio>
                  <el-radio label="1" size="large">女</el-radio>
                </el-radio-group>
              </el-form-item>
<!--              <el-form-item label="身份标签">-->
<!--                <el-checkbox-group v-model="myform.labelArr" size="small">-->
<!--                  <el-checkbox-button label="0">运动员</el-checkbox-button>-->
<!--                  <el-checkbox-button label="1">教练</el-checkbox-button>-->
<!--                  <el-checkbox-button label="2">领队</el-checkbox-button>-->
<!--                  <el-checkbox-button label="4">队医</el-checkbox-button>-->
<!--                  <el-checkbox-button label="5">翻译</el-checkbox-button>-->
<!--                  <el-checkbox-button label="6">官员</el-checkbox-button>-->
<!--                  <el-checkbox-button label="3">其他</el-checkbox-button>-->
<!--                </el-checkbox-group>-->
<!--              </el-form-item>-->

              <el-form-item label="证件类型">
                <el-select v-model="myform.idcType" placeholder="请选择证件类型" style="width: 100%">
                  <el-option
                    v-for="item in certificates"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="证件号码">
                <el-input v-model="myform.idcCode" @blur="checkCode" />
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker
                  v-model="myform.birth"
                  style="width: 100%"
                  type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  placeholder="请选择出生日期"
                />
              </el-form-item>
              <el-form-item label="国籍" @change="changeCountryId">
                <el-select v-model="myform.countryId" style="width: 100%" :disabled="myform.idcType==0">
                  <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="民族">
                <el-select v-model="myform.nation" style="width: 100%;">
                  <el-option
                    v-for="item in nationList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input v-model="myform.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="头像" prop="picUrl">
                <ImageUpload v-model="myform.picUrl" :limit="1" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="14">
<!--              <el-form-item label="身份标签">-->
<!--                <el-checkbox-group v-model="myform.labelArr" size="small">-->
<!--                  <el-checkbox-button label="0">运动员</el-checkbox-button>-->
<!--                  <el-checkbox-button label="1">教练</el-checkbox-button>-->
<!--                  <el-checkbox-button label="2">领队</el-checkbox-button>-->
<!--                  <el-checkbox-button label="4">队医</el-checkbox-button>-->
<!--                  <el-checkbox-button label="5">翻译</el-checkbox-button>-->
<!--                  <el-checkbox-button label="6">官员</el-checkbox-button>-->
<!--                  <el-checkbox-button label="3">其他</el-checkbox-button>-->
<!--                </el-checkbox-group>-->
<!--              </el-form-item>-->
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="myform.sex">
                  <el-radio label="0" size="large">男</el-radio>
                  <el-radio label="1" size="large">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="国籍" @change="changeCountryId">
                <el-select v-model="myform.countryId" style="width: 100%" :disabled="myform.idcType==0">
                  <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="民族">
                <el-select v-model="myform.nation" style="width: 100%;">
                  <el-option
                    v-for="item in nationList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="text-center">
          <el-button type="primary" round @click="save">保存</el-button>
        </div>
        <el-divider />
        <h3 style="padding: 0 20px;">所属参赛队信息</h3>
        <el-row :gutter="20" style="padding: 0 20px">
          <el-col v-for="(g,index) in groupList" :key="index" :span="8">
            <div class="matchItem">
              <div class="flex">
                <div class="leftImg">
                  <img class="roundImg" :src="g.imgUrl" mode="aspectFill">
                </div>
                <div class="rightWen">
                  <div class="name">{{ g.name }}</div>
                  <div class="pp">地区：{{ g.regionStr }}
                  </div>
                  <div class="pp">类型：
                    <span>{{ g.typeStr }}</span>
                  </div>
                </div>
              </div>
              <view class="bottomFunc">
                <view class="textButtom" @click="exitGroup(g)">退出参赛队</view>
              </view>
            </div>
          </el-col>
        </el-row>
        <el-empty v-if="groupList.length==0" description="还没有所属参赛队" />

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import { ElMessage, ElMessageBox } from 'element-plus'
import { nationList } from '@/assets/js/data'

const router = useRouter()
const { proxy } = getCurrentInstance()
const activeName = ref('first')
const myform = ref({
  idcType: 0,
  countryId: 240,
  nation: '汉族'
})
const labelArr = ref([])
const groupList = ref([])
const countryList = ref([])
const regionsList = ref([])
const certificates = ref([
  {
    value: '0',
    label: '居民身份证'
  },
  {
    value: '1',
    label: '护照'
  },
  {
    value: '2',
    label: '其他'
  }
])

onMounted(() => {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
  getCountryList()
  getData()
})

function getData() {
  match.getMyPersonInfo().then(res => {
    myform.value = res.data
    myform.value.labelArr = myform.value.label ? myform.value.label.split(',') : []
    labelArr.value = myform.value.label ? myform.value.label.split(',') : []
    groupList.value = myform.value.groups || []
    // if (labelArr.value.length <= 0)proxy.$modal.msgError('请维护身份标签信息！')
  })
}
function changeCountryId() {
  if (myform.value.countryId != 240) {
    myform.value.nation = '其他'
  }
}
function checkCode() {
  if (myform.value.idcType == 0 && myform.value.idcCode) {
    if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(myform.value.idcCode))) {
      ElMessage.error('请输入正确的身份证号码')
    } else {
      let tmpStr = ''
      if (myform.value.idcCode.length == 15) {
        tmpStr = myform.value.idcCode.substring(6, 12)
        tmpStr = '19' + tmpStr
        tmpStr = tmpStr.substring(0, 4) + '-' + tmpStr.substring(4, 6) + '-' + tmpStr.substring(6)
      } else {
        tmpStr = myform.value.idcCode.substring(6, 14)
        tmpStr = tmpStr.substring(0, 4) + '-' + tmpStr.substring(4, 6) + '-' + tmpStr.substring(6)
      }
      myform.value.birth = tmpStr

      const res = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
      if (myform.value.idcCode && res.test(myform.value.idcCode)) {
        const genderCode = myform.value.idcCode.charAt(16)
        if (parseInt(genderCode) % 2 == 0) {
          myform.value.sex = '0'
        } else {
          myform.value.sex = '1'
        }
      }
    }
  }
}
function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}

function save() {
  myform.value.label = myform.value.labelArr.toString()
  match.saveMyBaseInfo(myform.value).then(res => {
    ElMessage({
      message: '保存成功',
      type: 'success'
    })
    getData()
  })
}
function exitGroup(g) {
  ElMessageBox.confirm('确定退出这个参赛队吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    match.leaveGroup(g.id).then(response => {
      ElMessage.success('操作成功')
      getData()
    })
  })
}
</script>

<style scoped lang="scss">
.app-container {
  background: #F5F7F9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}

</style>