<template>
  <el-dialog
      v-model="show" :title="title" width="1100px" append-to-body close-icon="CircleClose" center
      :close-on-click-modal="false" class="pcloginpop"
      destroy-on-close
  >
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="120px" inline>
      <el-row :gutter="30">
        <el-col :lg="12" class="touxiang">
          <el-form-item prop="picUrl" label="个人照片" required>
            <ImageUpload2
                v-model="form.picUrl" :crop-height="280" :crop-width="200" class="threeFour" :limit="1"
                :is-show-tip="false"
            />
          </el-form-item>
          <el-form-item label="姓氏" prop="xing" required>
            <el-input v-model="form.xing"/>
          </el-form-item>
          <el-form-item label="短名" prop="shortName" required>
            <el-input v-model="form.shortName" placeholder="赛事用名"/>
          </el-form-item>
          <el-form-item label="出生日期" prop="birth" required>
            <el-date-picker
                v-model="form.birth"
                style="width: 100%;"
                type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                placeholder="请选择出生日期"
            />
          </el-form-item>
          <el-form-item label="证件类型" prop="idcType" required>
            <el-select v-model="form.idcType" 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="手机号码" prop="phone" required>
            <el-input v-model="form.phone" type="number"/>
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item label="所属国家" prop="countryId" required>
            <el-select v-model="form.countryId" style="width: 100%;" @change="changeCountryId">
              <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="详细地址" prop="address" required>
            <el-cascader v-if="form.countryId == 240"
                         v-model="form.regionId"
                         style="width: 100%;margin-bottom: 15px"
                         :options="regionsList"
                         :props="{ label:'text' }"
            />
            <el-input v-model="form.address" type="textarea" :rows="4"/>

          </el-form-item>
          <el-form-item label="名" prop="ming" required>
            <el-input v-model="form.ming"/>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio label="0">女</el-radio>
              <el-radio label="1">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="邮箱" prop="idcCode" required>
            <el-input v-model="form.email"/>
          </el-form-item>
          <el-form-item label="证件号码" prop="idcCode" required>
            <el-input v-model="form.idcCode" @blur="checkCode"/>
          </el-form-item>
          <el-form-item label="主要会员角色" prop="labelArr">
            <el-select v-model="form.labelArr" multiple @change="labelvalue">
              <el-option v-for="l in labels" :key="l.value" :value="l.value" :label="l.label"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" class="btn-lineG w200px" round  @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, toRefs, watch} from 'vue'
import {getCurrentInstance, nextTick, onMounted} from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import {certificates} from '@/assets/lib/nation'
import {ElMessage} from 'element-plus'
import {nationList} from '@/assets/js/data'
import _ from 'lodash'

const {proxy} = getCurrentInstance()
const emit = defineEmits(['submitForm'])
const data = reactive({
  form: {
    countryId: 240
  },
  rules: {
    xing: [{required: true, message: '必填', trigger: 'blur'}],
    ming: [{required: true, message: '必填', trigger: 'blur'}],
    shortName: [{required: true, message: '必填', trigger: 'blur'}],
    email: [{required: true, message: '必填', trigger: 'blur'}],
    countryId: [{required: true, message: '必填', trigger: 'change'}],
    idcType: [{required: true, message: '必填', trigger: 'change'}],
    idcCode: [{required: true, message: '必填', trigger: 'blur'}],
    phone: [{required: true, message: '必填', trigger: 'blur'}],
    // regionId: [{ required: true, message: '必填', trigger: 'change' }],
    birth: [{required: true, message: '必填', trigger: 'change'}],
    address: [{ required: true, message: '必填', trigger: 'blur' }],
    picUrl: [{required: true, message: '必填', trigger: 'blur'}],
    sex: [{required: true, message: '必填', trigger: 'change'}],
    labelArr: [{required: true, message: '必填', trigger: 'change'}]
  },
  show: false,
  countryList: [],
  regionsList: [],
  labels: [{value: '0', label: '运动员'},
      {value: '1', label: '教练'},
      {value: '2', label: '领队'},
      {value: '3', label: '队医'},
      {value: '4', label: '翻译'},
      {value: '5', label: '官员'},
      {value: '6', label: '其他'}
  ],
  title: '添加选手信息',
  groupId: '0',
  showRequire: false
})
const {showRequire, form, rules, show, countryList, regionsList, title, groupId, labels} = toRefs(data)
onMounted(() => {
  getCountryList()
  getRegionsList()
})
let editgay = false
const open = (params) => {
  console.log(params)
  show.value = true
  title.value = params.title
  groupId.value = params.groupId || '0'
  if (params.id != 0) { // 编辑
    editgay = true
    match.getPersonInfoById(params.id).then(res => {
      form.value = res.data
      form.value.id = params.id
      if (form.value.label) {
        // {0:0,1:1,2:3}
        form.value.labelArr = form.value.label.split(',')
        labelvalue(form.value.labelArr)
      }
    })
  }
}
defineExpose({open})
watch(show, (value) => {
  if (!value) {
    form.value = {}
  }
  nextTick(() => {
    proxy.$refs['dialogRef'].clearValidate()
  })
})

function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}

function changeCountryId() {
  if (form.value.countryId != 240) {
    form.value.nation = '其他'
  }
}

function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}

function checkCode() {
  if (form.value.idcType && form.value.idcCode) {
    giveBirthDay()
    var obj = {
      idcType: form.value.idcType,
      idcCode: form.value.idcCode
    }
    match.checkPerson(obj).then(res => {
      if (res.data.idcCode != null) {
        form.value = res.data
        if (form.value.label != null) {
          form.value.labelArr = form.value.label.split(',')
          labelvalue(form.value.labelArr)
        }
        form.value.groupId = groupId.value
      }
    })
  }
}

function giveBirthDay() {
  // 判断身份证正确性/赋值生日
  if (form.value.idcType == 0) {
    if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(form.value.idcCode))) {
      ElMessage.error('请输入正确的身份证号码')
    } else {
      let tmpStr = ''
      if (form.value.idcCode.length == 15) {
        tmpStr = form.value.idcCode.substring(6, 12)
        tmpStr = '19' + tmpStr
        tmpStr = tmpStr.substring(0, 4) + '-' + tmpStr.substring(4, 6) + '-' + tmpStr.substring(6)
      } else {
        tmpStr = form.value.idcCode.substring(6, 14)
        tmpStr = tmpStr.substring(0, 4) + '-' + tmpStr.substring(4, 6) + '-' + tmpStr.substring(6)
      }
      form.value.birth = tmpStr

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

function labelvalue(e) {
  if (e.indexOf('1') > -1 || e.indexOf('2') > -1) {
    // 联系方式必填
    showRequire.value = true
  } else {
    showRequire.value = false
  }
  console.log(showRequire.value)
}

function submitForm() {
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      // 验证身份证号
      if (form.value.idcType == 0 && !(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(form.value.idcCode))) {
        ElMessage.error('请输入正确的身份证号码')
        return
      }
      // 验证手机号
      if (showRequire.value) {
        var pattern = /^1[3456789]\d{9}$/
        if (!pattern.test(form.value.phone)) {
          ElMessage.error('请输入正确的手机号')
          return
        }
      }

      if (typeof (form.value.regionId) === 'object') {
        form.value.regionId = _.last(form.value.regionId)
      }
      form.value.label = form.value.labelArr.toString()

      if (groupId.value != 0) {
        // 团队
        form.value.groupId = groupId.value
        match.savePersonForMyGroup(form.value).then(res => {
          ElMessage.success('保存成功')
          show.value = false
          emit('submitForm')
        })
      } else {
        if (editgay) {
          match.editPersonInfo(form.value).then(res => {
            ElMessage.success('保存成功')
            show.value = false
            emit('submitForm')
          })
        } else {
          match.savePersonForMyPerson(form.value).then(res => {
            ElMessage.success('保存成功')
            show.value = false
            emit('submitForm')
          })
        }
      }
    }
  })
}

function cancel() {
  show.value = false
}
</script>

<style lang="scss">
.threeFour {
  width: 100%;

  .el-upload--picture-card {
    width: 120px;
    height: 160px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 120px;
    height: 160px;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.shenfen {
  .el-upload--picture-card {
    width: 320px;
    height: 200px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 320px;
    height: 200px;
  }
}

.touxiang {
  :deep(.el-upload--picture-card ) {
    width: 140px;
    height: 200px;
  }
}

.touxiang {
  :deep(.el-upload-list__item ) {
    width: 140px;
    height: 200px;
  }

}

.el-form--inline .el-form-item {
  width: 100%
}


.boxDialog {
  .el-dialog__header {
    background: linear-gradient(#ed2c22, #fe6d45);
    margin-right: 0;
    height: 52px;

    span {
      color: #fff;
    }
  }
}

</style>