<template>
  <div class="mb20">
    <el-card :body-style="{'padding':'0'}">
      <div class="indexTitle">
        <h3 v-if="user.utype=='2'" class="leftboderTT">
          {{ language == 0 ? '机构基础信息' : 'ORGANIZATION BASIC INFORMATION' }}
        </h3>
        <h3 v-if="user.utype=='1'" class="leftboderTT">
          {{ language == 0 ? '个人基础信息' : 'Personal Basic Information' }}
        </h3>
      </div>
      <!--      uType字段 1 是个人 2是团体-->
      <!--      {{user}}-->
      <team-info v-if="user.utype=='2'" :form="myform" />
      <div v-else class="pd20">
        <div class="d-form-border" style="margin-top: 0">
          <el-form
            ref="formref" :label-position="language==0?'left':'top'" :rules="rules" class="d-form"
            label-width="120" style="max-width: 500px;margin: auto"
          >
            <el-form-item :label="language==0?'用户名':'Account'">
              {{ user.userName }}
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==0?'姓名':'Real Name'" prop="realName" required>
              <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"
                format="YYYY-MM-DD"
                style="width: 100%;" type="date" value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==0?'代表':'Representing'" required>
              <el-input v-model="myform.representing" disabled />
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==1?'Age group':'年龄组'" required>
              <el-input v-model="myform.ageGroup" disabled />
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==0?'舞种':'Division'" required>
              <el-input v-model="myform.division" disabled />
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==0?'状态':'Status'" required>
              <el-input v-model="myform.wdsfStatus" disabled />
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==0?'证件号':'Passport number'" required>
              <el-input v-model="myform.passportNumber" disabled />
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==0?'证件姓名':'Name on Document'" required>
              <el-input v-model="myform.certName" disabled />
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==0?'有效证件':'Valid Passport'" required>
              <image-upload
                v-model="myform.passportUrl" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"
                :limit="1"
              />
            </el-form-item>
            <el-form-item v-if="user.utype=='1'" :label="language==0?'WDSF会员号':'WDSF MIN'" prop="wdsfMin">
              {{ 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 v-if="user.utype=='1'||user.utype=='2'" class="text-center">
            <el-button class="btn-lineG" round type="primary" @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' }],
  certName: [{ 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 lang="scss" scoped>
.indexTitle {
  margin: 20px 0 12px;
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;
  
  h3 {
    font-size: 16px;
    color: var(--el-color-primary);
  }
}


</style>