<template>
  <div class="mb20">
    <el-card :body-style="{'padding':'0'}">
      <div class="indexTitle">
        <h3 class="leftboderTT" v-if="user.utype=='2'">
          {{ language == 0 ? '机构基础信息' : 'ORGANIZATION BASIC INFORMATION' }}</h3>
        <h3 class="leftboderTT" v-if="user.utype=='1'">{{
            language == 0 ? '个人基础信息' : 'Personal Basic Information'
          }}</h3>
      </div>
      <!--      uType字段 1 是个人 2是团体-->
      <!--      {{user}}-->
      <team-info :form="myform" v-if="user.utype=='2'"/>
      <div class="pd20" v-else>
        <div class="d-form-border" style="margin-top: 0">
          <el-form class="d-form" label-width="120" :rules="rules" ref="formref"
                   :label-position="language==0?'left':'top'" style="max-width: 500px;margin: auto">
            <el-form-item :label="language==0?'用户名':'Account'">
              {{ user.userName }}
            </el-form-item>
            <el-form-item :label="language==0?'姓名':'Real Name'" required prop="realName" v-if="user.utype=='1'">
              <el-input v-model="myform.realName" disabled/>
            </el-form-item>
            <el-form-item :label="language==0?'性别':'Gender'" required >
              <el-radio-group v-model="myform.sex">
                <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
                <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="language==0?'出生日期':'Date of Birth'">
              <el-date-picker
                  v-model="myform.birth"
                  style="width: 100%;"
                  type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item :label="language==0?'代表':'Representing'" required  v-if="user.utype=='1'">
              <el-input v-model="myform.representing" disabled/>
            </el-form-item>
            <el-form-item :label="language==1?'Age group':'年龄组'" required  v-if="user.utype=='1'">
              <el-input v-model="myform.ageGroup" disabled/>
            </el-form-item>
            <el-form-item :label="language==0?'舞种':'Division'" required  v-if="user.utype=='1'">
              <el-input v-model="myform.division" disabled/>
            </el-form-item>
            <el-form-item :label="language==0?'状态':'Status'" required  v-if="user.utype=='1'">
              <el-input v-model="myform.wdsfStatus" disabled/>
            </el-form-item>
            <el-form-item :label="language==0?'证件号':'Passport number'" required   v-if="user.utype=='1'">
              <el-input v-model="myform.passportNumber" disabled/>
            </el-form-item>
            <el-form-item :label="language==0?'有效证件':'Valid Passport'" required  v-if="user.utype=='1'">
              <image-upload v-model="myform.passportUrl" :limit="1" :is-show-tip="false"
                            :button-text="language==0?'上传':'Upload'"/>
            </el-form-item>
            <el-form-item :label="language==0?'WDSF会员号':'WDSF MIN'" prop="wdsfMin"  v-if="user.utype=='1'">
              {{myform.wdsfMin}}
            </el-form-item>
<!--            <el-form-item :label="language==0?'证件类型':'ID type'" required prop="idcType">-->
<!--              <el-select v-model="myform.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="language==0?'证件号码':'ID NO'" prop="idcCode">-->
<!--              <el-input v-model="myform.idcCode" @blur="checkCode"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item :label="language==0?'类型':'Type'" required>-->
<!--              <el-select v-model="myform.type" style="width: 100%;">-->
<!--                <el-option :label="language==0?'业余':'amateur'" value="0"/>-->
<!--                <el-option :label="language==0?'专业':'Professional'" value="1"/>-->
<!--                <el-option :label="language==0?'大专院校':'Colleges and universities'" value="2"/>-->
<!--                <el-option :label="language==0?'其他':'Other'" value="3"/>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item :label="language==0?'邮箱':'Email'" required prop="email">-->
<!--              <el-input v-model="myform.email" type="email" :placeholder="language==0?'请输入内容':''"/>-->
<!--            </el-form-item>-->
          </el-form>
          <div class="text-center" v-if="user.utype=='1'||user.utype=='2'">
            <el-button type="primary" class="btn-lineG" round @click="save">
              {{language == 0 ? '确定修改' : 'Save'}}
            </el-button>
          </div>

        </div>
      </div>
    </el-card>

  </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'
import {getGroupInfo} from "@/apiPc/match";
import TeamInfo from "@/viewsPc/center/teamInfo";
import useUserStore from "@/store/modules/user";
import {useStorage} from "@vueuse/core/index";

const language= useStorage('language',0)
const router = useRouter()
const {proxy} = getCurrentInstance()
const props = defineProps({
  user: {
    type: Object,
    required: true
  }
})
const rules = ref({
  realName: [{required: true, message: '必填', trigger: 'blur'}],
  sex: [{required: true, message: '必填', trigger: 'change'}],
  idcType: [{required: true, message: '必填', trigger: 'change'}],
  type: [{required: true, message: '必填', trigger: 'change'}],
  idcCode: [{required: true, message: '必填', trigger: 'blur'}],
  email: [{required: true, message: '必填', trigger: 'blur'}],

})
const activeName = ref('first')
const myform = ref({
  idcType: 0,
  countryId: '',
  realName: ''
})
const labelArr = ref([])

const certificates = ref([
  {
    value: '0',
    label: language.value == 0 ? '居民身份证' : 'Resident ID card'
  },
  {
    value: '1',
    label: language.value == 0 ? '护照' : 'Passport'
  },
  {
    value: '2',
    label: language.value == 0 ? '其他' : 'Other'
  }
])
const user = useUserStore().user || {}
getData()

function getData() {
  if (user.utype == '2') {
    match.getGroupInfo().then(res => {
      myform.value = res.data
    })
  }
  if (user.utype == '1') {
    match.getMyPersonInfo().then(res => {
      myform.value = res.data
      if(language.value=='1'){
        myform.value.type = '1'
      }
    })
  }

}

function save() {
      match.saveMyBaseInfo(myform.value).then(res => {
        ElMessage.success(language.value==0?'保存成功':'Save successfully')
      })
}

function checkCode() {
  if (myform.value.idcType == 0 && myform.value.idcCode) {
    if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(myform.value.idcCode))) {
      ElMessage.warning('请输入正确的身份证号码')
    } 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'
        }
      }
    }
  }
}


</script>

<style scoped lang="scss">
.indexTitle {
  margin: 20px 0 12px;
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;

  h3 {
    font-size: 16px;
    color: var(--el-color-primary);
  }
}


</style>