<template>
  <div>
    <div class="mt30 mb60">
      <div class="box">
        <personal-step v-if="matchId!=0" :active-step="activeStep" />
        <div class="mt20" />
        <div>
          <el-card style="min-height: 50vh">
            <div class="pt30">
              <el-form
                ref="wdsfDataRef" :label-width="language==0?120:180" :rules="wdsfDataRule" class="d-form"
                size="large" style="max-width: 560px;margin: auto"
              >
                <el-form-item :label="language==0?'WDSF会员号':'WDSF MIN'" required>
                  <el-input v-model="form.card" type="text" @blur="verifyCode" @change="resetCode(0)">
                    <template #append>
                      <el-button plain style="width: 110px" type="primary" @click="checkCard">
                        <el-icon v-if="wdsfData.wdsfFlag=='1'" color="#67C23A" size="16">
                          <CircleCheckFilled />
                        </el-icon>
                        <span v-else>{{ language == 0 ? '校验卡号' : 'Check Code' }}</span>
                      </el-button>
                    </template>
                  </el-input>
                  <a
                    class="text-primary text-sm mt10" href="https://www.worlddancesport.org/Athlete/List"
                    target="_blank"
                  >
                    <el-icon>
                      <Link />
                    </el-icon>
                    {{ language == 0 ? '去WDSF官网查询我的会员号' : 'Search my WSDF MIN on the WDSF official website' }}
                  </a>
                
                </el-form-item>
                <div class="h30" />
                <div class="leftboderTT">{{ language == 0 ? '个人信息' : 'Personal information' }}
                  <span v-if="language==0">(登录时需要验证，保护账户信息)</span>
                  <span v-else>(Obtain automatically according to the WDSF MIN)</span>
                </div>
                <div class="h20" />
                <el-form-item :label="language==0?'姓氏':'Surname'">
                  <el-input v-model="wdsfData.surname" disabled />
                </el-form-item>
                <el-form-item :label="language==0?'名':'Name'">
                  <el-input v-model="wdsfData.name" disabled />
                </el-form-item>
                <el-form-item :label="language==0?'代表':'Representing'">
                  <el-input v-model="wdsfData.representing" disabled />
                </el-form-item>
                <el-form-item :label="language==1?'Age group':'年龄组'">
                  <el-input v-model="wdsfData.ageGroup" disabled />
                </el-form-item>
                <el-form-item :label="language==0?'舞种':'Division'">
                  <el-input v-model="wdsfData.division" disabled />
                </el-form-item>
                <el-form-item :label="language==0?'状态':'Status'">
                  <el-input v-model="wdsfData.status" disabled />
                </el-form-item>
                <div class="h30" />
                <div class="leftboderTT">
                  {{ language == 0 ? '补充信息' : 'ADDITIONAL INFORMATION' }}
                </div>
                <div class="h20" />
                <el-form-item :label="language==0?'个人照片':'Photo'" prop="picUrl">
                  <ImageUpload2
                    v-model="wdsfData.picUrl" :crop-height="280" :crop-width="200" :is-show-tip="false" :limit="1"
                    class="threeFour"
                  />
                </el-form-item>
                
                <el-form-item :label="language==0?'有效证件':'Valid Passport'" required>
                  <image-upload
                    v-model="wdsfData.passportUrl" :action="'/common/getPersonInfoFromCert/6'"
                    :button-text="language==0?'上传':'Upload'"
                    :is-show-tip="false"
                    :limit="1"
                    param-name="pic"
                    @response="ocrSuccess"
                  />
                  <div class="tip">
                    <span v-if="language==0">请上传有效身份证件扫描件，用于核实身份信息、申请签证邀请函及购买保险等</span>
                    <span v-else>Please upload a scanned copy of your valid passport for verification of identity information,
                      application of visa invitation letter and purchasing insurance etc.</span>
                  </div>
                </el-form-item>
                <el-form-item :label="language==0?'证件号':'Passport number'" required>
                  <el-input v-model="wdsfData.passportNumber" />
                </el-form-item>
                <el-form-item :label="language==0?'姓名':'Name'" required>
                  <el-input v-model.trim="wdsfData.certName" />
                </el-form-item>
                <el-form-item :label="language==0?'性别':'Gender'" required>
                  <el-radio-group v-model="wdsfData.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'" required>
                  <el-date-picker
                    v-model="wdsfData.birthday"
                    format="YYYY-MM-DD"
                    style="width: 100%;" type="date" value-format="YYYY-MM-DD"
                  />
                </el-form-item>
                
                <div class="h30" />
                
                <div v-if="!user">
                  <div class="leftboderTT">{{ language == 0 ? '登录密码' : 'Login Information' }} <span
                    v-if="language==0"
                  >(登录时需要验证，保护账户信息)</span></div>
                  <div class="h20" />
                  <el-form-item :label="language==0?'邮箱':'E-mail'" required>
                    <div class="pvbox">
                      <el-input
                        v-model="wdsfData.email" :disabled="wdsfData.personFlag=='1'" autocomplete="false" type="text"
                        @blur="verifyCode" @change="resetCode(1)"
                      />
                      <span
                        v-if="wdsfData.personFlag=='1'" class="text-primary"
                        @click="forgetPassword(wdsfData.email)"
                      >忘记密码</span>
                    </div>
                    
                    
                    <div v-if="wdsfData.personFlag=='0'" class="tip">
                      <div v-if="language==0">
                        （请填写正确的邮箱信息，邮箱信息在注册完成后无法修改。该邮箱后续会作为您登录的账户，
                        并接收报名审核结果、支付账单、签证邀请函等相关信息）
                      </div>
                      <div v-else>
                        Please fill in the correct email， which cannot be changed after the registration is completed.
                        The email will be used as your login account and to receive relevant information including
                        results of registration review, payment bills, visa invitation letters, etc.
                      </div>
                    </div>
                  
                  
                  </el-form-item>
                  <el-form-item v-if="wdsfData.personFlag=='0'" :label="language==0?'验证码':'Code'" required>
                    <el-input v-model="form.code">
                      <template #append>
                        <el-button plain style="width: 110px" type="primary" @click="sendsmsMsg">
                          <count-down v-if="counting" v-slot="{ totalSeconds }" :time="60000" @end="counting=false">
                            {{ totalSeconds }} {{ language == 0 ? '秒' : 's' }}
                          </count-down>
                          <span v-else>{{ language == 0 ? '发送验证码' : 'Send code' }}</span>
                        </el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                  
                  <el-form-item :label="language==0?'密码':'Password'" required>
                    <el-input
                      v-model="form.password" :placeholder="language==0?'6-16位密码。区分大小写':'Password'"
                      autocomplete="false" show-password
                      type="password"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="wdsfData.personFlag=='0'" :label="language==0?'确认密码':'Confirm Password'"
                    required
                  >
                    <el-input
                      v-model="form.confirmPassword"
                      :placeholder="language==0?'再次输入密码':'Confirm Password'" autocomplete="false"
                      show-password
                      type="password"
                      @change="vconfirmPassword"
                    />
                    <div v-if="showError" class="text-danger">
                      {{ language == 0 ? '密码不一致' : 'Password inconsistency' }}
                    </div>
                  </el-form-item>
                
                </div>
              </el-form>
            </div>
            <div class="text-center">
              <el-button class="primary-kx" round @click="goBack"> {{ language == 0 ? '取消' : 'Cancel' }}
              </el-button>
              <el-button v-if="wdsfData.wdsfFlag=='1'" class="btn-lineG w200px" round type="primary" @click="bigNext">
                <span v-if="matchId=='0'">{{ language == 0 ? '立即注册' : 'Register Now' }}</span>
                <span v-else>{{ language == 0 ? '下一步' : 'Next' }}</span>
              </el-button>
            </div>
          </el-card>
        </div>
        
        <Vcode
          :fail-text="failVcode" :show="isShow" :slider-text="sliderText"
          :success-text="successVcode" :z-index="3000" @success="codeSuccess()"
        />
      
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs, reactive } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import Step3 from './team/step3'
import Vcode from 'vue3-puzzle-vcode'
import { ElMessage, ElMessageBox } from 'element-plus'
import CountDown from '@chenfengyuan/vue-countdown'
import { checkWdsf, getCaptchaSms, loginSingle, registerSingle } from '@/apiPc/match'
import { setToken } from '@/utils/auth'
import PersonalStep from '@/viewsPc/register/components/personal-step'
import FileUpload from '@/components/FileUpload'
import { useRouter, useRoute } from 'vue-router'
import { useStorage } from '@vueuse/core/index'
import useUserStore from '@/store/modules/user'
import { upgradePersonal } from '@/apiPc/common'

const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const user = useUserStore().user
const data = reactive({
  isShow: false,
  isCodeTrue: 0,
  counting: false,
  checkStatus: false,
  form: {},
  activeStep: 0,
  failVcode: '验证失败，请重试',
  successVcode: '验证通过！',
  sliderText: '拖动滑块完成拼图',
  showError: false,
  wdsfData: {
    // sex: '0'
  },
  wdsfDataRule: {
    birthday: [{ required: true, message: 'required', trigger: 'blur' }],
    passportNumber: [{ required: true, message: 'required', trigger: 'blur' }]
  }
})
const {
  isShow, isCodeTrue, counting, form, activeStep, failVcode, successVcode, sliderText,
  checkStatus, showError, wdsfData, wdsfDataRule
} = toRefs(data)
const matchId = ref('0')
onMounted(() => {
  if (user?.utype == '1' || user?.utype == '2') {
    router.push({ name: 'matchList' })
  }
  if (language.value == 1) {
    failVcode.value = 'Error!'
    successVcode.value = 'Success!'
    sliderText.value = 'Drag the slider to complete the puzzle'
  }
  matchId.value = route.query.matchId || '0'
})

function sendsmsMsg() {
  if (!wdsfData.value.email) {
    if (language.value == 0) {
      ElMessage.warning('请填写邮箱')
    } else {
      ElMessage.warning('Please fill in your email address')
    }
    return
  }
  
  if (counting.value) {
    if (language.value == 0) {
      ElMessage.warning('请等待倒计时结束')
    } else {
      ElMessage.warning('Please wait for the countdown to end')
    }
  } else {
    isShow.value = true
  }
}

function checkCard() {
  if (!form.value.card) {
    if (language.value == 0) {
      ElMessage.warning('WDSF会员号错误')
    } else {
      ElMessage.warning('WDSF MIN is Error')
    }
    return
  }
  isShow.value = true
}

function verifyCode() {
  if (!form.value.account) {
    return
  }
  if (form.value.account.indexOf('@') > -1) {
    // 邮箱
  }
}

function codeSuccess(msg) {
  isShow.value = false
  isCodeTrue.value += 1
  if (isCodeTrue.value == 1) {
    checkWdsf({ card: form.value.card }).then(res => {
      wdsfData.value = res.data
      wdsfData.value.personFlag = '0'// 同一个wdsf号可以多次注册
      if (wdsfData.value.passportUrl) {
      }
      if (wdsfData.value.wdsfFlag == '0') {
        isCodeTrue.value = 0
        if (language.value == 0) {
          ElMessage.warning('WDSF会员号错误')
        } else {
          ElMessage.warning('WDSF MIN is Error')
        }
      }
    }).catch(err => {
      console.log(err)
      isCodeTrue.value = 0
    })
  }
  if (isCodeTrue.value >= 2) {
    counting.value = true
    getCaptchaSms({ account: wdsfData.value.email }).then(res => {
      isCodeTrue.value = 1
      ElMessage.success(language.value == 0 ? '发送成功,请关注邮箱邮件' : 'Send success, please check your email')
    }).catch(err => {
      console.log(err)
      isCodeTrue.value = 1
    })
  }
}

function resetCode(n) {
  isCodeTrue.value = n
}

function vconfirmPassword() {
  if (form.value.password != form.value.confirmPassword) {
    showError.value = true
  } else {
    showError.value = false
  }
}

function goBack() {
  router.go(-1)
}

function bigNext() {
  if (!wdsfData.value.passportNumber) {
    ElMessage.warning(language.value == 0 ? '请填写护照号' : 'Please fill in your passport number')
    return
  }
  if (!wdsfData.value.birthday) {
    ElMessage.warning(language.value == 0 ? '请填写出生年月' : 'Please fill in your birthday')
    return
  }
  
  if (!wdsfData.value.passportUrl) {
    ElMessage.warning(language.value == 0 ? '请上传护照文件' : 'Please upload  your passport file')
    return
  }
  if (!wdsfData.value.sex) {
    ElMessage.warning(language.value == 0 ? '请选择性别' : 'Please select your gender')
    return
  }
  if (!wdsfData.value.certName) {
    ElMessage.warning(language.value == 0 ? '请输入姓名' : 'Please enter your name')
    return
  }
  if (user && user.utype == '3') {
    const obj = {
      card: form.value.card,
      userId: user.userId,
      picUrl: wdsfData.value.picUrl,
      sex: wdsfData.value.sex,
      birth: wdsfData.value.birthday,
      certName: wdsfData.value.certName,
      passportNumber: wdsfData.value.passportNumber,
      ocrFlag: '1'
    }
    if (Array.isArray(wdsfData.value.passportUrl)) {
      obj.passportUrl = wdsfData.value.passportUrl[0].url
    } else {
      obj.passportUrl = wdsfData.value.passportUrl || ''
    }
    upgradePersonal(obj).then(res => {
      if (res.data) {
        userStore.getInfo().then(res => {
          afterR()
        })
      }
    })
  } else {
    next()
  }
}

function next() {
  if (!form.value.code) {
    ElMessage.warning(language.value == 0 ? '请填写验证码' : 'Please fill in your verification code')
    return
  }
  if (!form.value.password) {
    ElMessage.warning(language.value == 0 ? '请填写密码' : 'Please fill in your password')
    return
  }
  if (!form.value.confirmPassword) {
    ElMessage.warning(language.value == 0 ? '请再次填写密码' : 'Please fill in Confirm Password')
    return
  }
  if (wdsfData.value.personFlag == '0') {
    const obj = {
      card: form.value.card,
      account: wdsfData.value.email,
      picUrl: wdsfData.value.picUrl,
      code: form.value.code,
      password: form.value.password,
      sex: wdsfData.value.sex,
      certName: wdsfData.value.certName,
      birth: wdsfData.value.birthday,
      passportNumber: wdsfData.value.passportNumber,
      ocrFlag: '1'
    }
    if (Array.isArray(wdsfData.value.passportUrl)) {
      obj.passportUrl = wdsfData.value.passportUrl[0].url
    } else {
      obj.passportUrl = wdsfData.value.passportUrl || ''
    }
    registerSingle(obj).then(res => {
      setToken(res.data.token)
      afterR()
    })
  }
  if (wdsfData.value.personFlag == '1') {
    if (!form.value.password) {
      ElMessage.warning('Please fill in your password')
      return
    }
    const obj = {
      sex: wdsfData.value.sex,
      passportNumber: wdsfData.value.passportNumber,
      picUrl: wdsfData.value.picUrl,
      birth: wdsfData.value.birthday,
      // personId: wdsfData.value.personId,
      username: wdsfData.value.email,
      password: form.value.password,
      ocrFlag: '1'
    }
    if (Array.isArray(wdsfData.value.passportUrl)) {
      obj.passportUrl = wdsfData.value.passportUrl[0].url
    } else {
      obj.passportUrl = wdsfData.value.passportUrl
    }
    loginSingle(obj).then(res => {
      setToken(res.data.token)
      afterR()
    }).catch(err => {
      console.log(err)
    })
  }
}

function afterR() {
  if (matchId.value != '0') {
    router.push({
      name: 'matchDetail',
      params: {
        id: matchId.value
      },
      query: {
        matchId: matchId.value
      }
    }).then(() => {
      // location.reload()
    })
  } else {
    router.push({
      name: 'matchList',
      params: {
        id: 0
      }
    }).then(() => {
      location.reload()
    })
  }
}

function forgetPassword(account) {
  useUserStore().setReLogin({ account: account, active: 2 })
}

const ocrSuccess = (res) => {
  if (res.code == 200) {
    wdsfData.value.passportUrl = res.data.url
    wdsfData.value.passportNumber = res.data.code
    wdsfData.value.birthday = res.data.birth?.slice(0, 10)
    wdsfData.value.sex = res.data.sex
    wdsfData.value.certName = res.data.name
  } else if (res.code == 500) {
    ElMessage.warning(res.msg)
  }
  if (res.data.msg) {
    return proxy.$modal.msgWarning(res.data.msg
    )
  }
}
</script>

<style lang="scss" scoped>
.pvbox {
  position: relative;
  width: 100%;
  
  .text-primary {
    position: absolute;
    right: -5em;
    cursor: pointer;
    text-decoration: underline;
  }
}

.tip {
  line-height: 1.6;
  font-size: 12px;
  margin-top: 6px;
  color: #666;
}

.leftboderTT {
  color: var(--el-color-primary);
  font-size: 16px;
  font-weight: 600;
  
  span {
    color: #929AA0;
    font-size: 14px;
  }
}

.h20 {
  height: 20px
}

.h30 {
  height: 30px
}

.el-input-group__append {
  flex: 1 1 auto;
}

.el-input-group__append button.el-button, .el-input-group__append button.el-button:hover {
  color: var(--el-color-primary);
  background: #efefff;
  border: var(--el-color-primary) solid 1px;
  border-radius: 0;
}
</style>