<template>
  <div>
    <div class="mt30 mb60">
      <div class="box">
        <personal-step v-if="matchId!=0" :active-step="activeStep"/>
        <div class="mt20"></div>
        <div>
          <el-card style="min-height: 50vh">
            <div class="pt30">
              <el-form ref="wdsfDataRef" class="d-form" size="large" :label-width="language==0?120:180"
                       style="max-width: 560px;margin: auto" :rules="wdsfDataRule">
                <el-form-item :label="language==0?'WDSF会员号':'WDSF MIN'" required>
                  <el-input type="text" v-model="form.card" @change="resetCode(0)" @blur="verifyCode">
                    <template #append>
                      <el-button type="primary" plain style="width: 110px" @click="checkCard">
                        <el-icon v-if="wdsfData.wdsfFlag=='1'" size="16" color="#67C23A">
                          <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>
                <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"></div>
                <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>
                <div class="leftboderTT">
                  {{ language == 0 ? '补充信息' : 'ADDITIONAL INFORMATION' }}
                </div>
                <div class="h20"></div>
                <el-form-item prop="picUrl" :label="language==0?'个人照片':'Photo'">
                  <ImageUpload2
                      v-model="wdsfData.picUrl" :crop-height="280" :crop-width="200" class="threeFour" :limit="1"
                      :is-show-tip="false"
                  />
                </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?'有效证件':'Valid Passport'" required>
                  <image-upload v-model="wdsfData.passportUrl" :limit="1" :is-show-tip="false"
                               :button-text="language==0?'上传':'Upload'"/>
                  <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?'出生日期':'Date of Birth'" required>
                  <el-date-picker
                      v-model="wdsfData.birthday"
                      style="width: 100%;"
                      type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  />
                </el-form-item>

                <div class="h30"></div>

                <div v-if="!user">
                  <div class="leftboderTT">{{ language == 0 ? '登录密码' : 'Login Information' }} <span
                      v-if="language==0">(登录时需要验证，保护账户信息)</span></div>
                  <div class="h20"></div>
                  <el-form-item :label="language==0?'邮箱':'E-mail'" required>
                    <div class="pvbox">
                      <el-input type="text" v-model="wdsfData.email" @change="resetCode(1)" autocomplete="false"
                                @blur="verifyCode" :disabled="wdsfData.personFlag=='1'"/>

                      <span class="text-primary" v-if="wdsfData.personFlag=='1'"
                            @click="forgetPassword(wdsfData.email)">忘记密码</span>
                    </div>


                    <div class="tip" v-if="wdsfData.personFlag=='0'">
                      <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 :label="language==0?'验证码':'Code'" required v-if="wdsfData.personFlag=='0'">
                    <el-input v-model="form.code">
                      <template #append>
                        <el-button type="primary" plain style="width: 110px" @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 type="password" show-password v-model="form.password" autocomplete="false"
                              :placeholder="language==0?'6-16位密码。区分大小写':'Password'"/>
                  </el-form-item>
                  <el-form-item :label="language==0?'确认密码':'Confirm Password'" required
                                v-if="wdsfData.personFlag=='0'">
                    <el-input type="password" show-password v-model="form.confirmPassword" autocomplete="false"
                              @change="vconfirmPassword"
                              :placeholder="language==0?'再次输入密码':'Confirm Password'"/>
                    <div class="text-danger" v-if="showError">
                      {{ 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 type="primary" class="btn-lineG w200px" round @click="bigNext" v-if="wdsfData.wdsfFlag=='1'">
                <span v-if="matchId=='0'">{{ language == 0 ? '立即注册' : 'Register Now' }}</span>
                <span v-else>{{ language == 0 ? '下一步' : 'Next' }}</span>
              </el-button>
            </div>
          </el-card>
        </div>

        <Vcode :show="isShow" :z-index="3000" @success="codeSuccess()"
               :successText="successVcode" :failText="failVcode" :slider-text="sliderText"></Vcode>

      </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')
    }
    return
  } 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
  console.log('old', isCodeTrue.value)
  isCodeTrue.value += 1
  console.log('new', isCodeTrue.value)
  if (isCodeTrue.value == 1) {
    checkWdsf({card: form.value.card}).then(res => {
      wdsfData.value = res.data
      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 => {
      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 => {
      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(user&&user.utype=='3'){
    let obj = {
      card: form.value.card,
      userId: user.userId,
      picUrl: wdsfData.value.picUrl,
      code: form.value.code,
      sex: wdsfData.value.sex,
      birth: wdsfData.value.birthday,
      passportNumber: wdsfData.value.passportNumber,
    }
    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 (wdsfData.value.personFlag == '0') {
    let 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,
      birth: wdsfData.value.birthday,
      passportNumber: wdsfData.value.passportNumber,
    }
    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)

      console.log(matchId.value)
      afterR()
    })
  }
  if (wdsfData.value.personFlag == '1') {
    if (!form.value.password) {
      ElMessage.warning('Please fill in your password')
      return
    }
    let 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,
    }
    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)
      console.log(matchId.value)
      afterR()
    }).catch(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})
}
</script>

<style scoped lang="scss">
.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>