<template>
  <el-card style="min-height: 50vh">
    <div class="pt30">
      <el-form class="d-form" size="large" :label-width="language==0?120:200" style="max-width: 500px;margin: auto">
        <el-form-item :label="language==0?'邮箱':'E-mail'" required>
          <el-input type="text" v-model="form.account" @change="resetCode" @blur="verifyCode"
          />
          <div class="tip" v-if="language==0">
            （请填写正确的邮箱信息，邮箱信息在注册完成后无法修改。
            该邮箱后续会作为您登录的账户，
            并接收报名审核结果、支付账单、签证邀请函等相关信息。）
          </div>
          <div v-else class="tip">
            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>
        </el-form-item>
        <el-form-item :label="language==0?'验证码':'Code'" required>
          <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' }}
                </span>
              </el-button>
            </template>
          </el-input>
          <div class="vcodeBox" :style="isShow?'height:240px':'height:0'">
            <Vcode :show="isShow" :successText="successVcode" :failText="failVcode" :slider-text="sliderText"
                   type="inside" @success="codeSuccess"></Vcode>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="text-center">
      <!--      <el-button class="primary-kx" round @click="goBack">取消</el-button>-->
      <el-button type="primary" class="btn-lineG w200px" round @click="next">{{
          language == 0 ? '下一步' : 'NEXT'
        }}
      </el-button>
    </div>
  </el-card>
</template>

<script setup>
import {reactive, toRefs} from 'vue'
import Vcode from "vue3-puzzle-vcode"
import {ElMessage} from 'element-plus'
import CountDown from '@chenfengyuan/vue-countdown'
import {getCaptchaSms, checkRegisterCode} from "@/apiPc/match";
import {onMounted} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";

const language = useStorage('language', 0)

const data = reactive({
  isShow: false,
  isCodeTrue: false,
  counting: false,
  form: {},
  activeStep: 0,
  failVcode: '验证失败，请重试',
  successVcode: '验证通过！',
  sliderText: '拖动滑块完成拼图',
})
const {isShow, isCodeTrue, counting, form, activeStep, failVcode, successVcode, sliderText} = toRefs(data)
const emit = defineEmits(['submit', 'userName'])
onMounted(() => {
  if (language.value == 1) {
    failVcode.value = 'Error!'
    successVcode.value = 'Success!'
    sliderText.value = 'Drag the slider to complete the puzzle'
  }
})

function sendsmsMsg() {
  if (!form.value.account) {
    if (language.value == 0) {
      ElMessage.warning('请填写邮箱')
    } else {
      ElMessage.warning('Please fill in your email address')
    }
    return
  }
  if (form.value.account.indexOf('@') == -1) {
    if (language.value == 0) {
      ElMessage.warning('请填写正确的邮箱')
    } else {
      ElMessage.warning('Please fill in the correct email')
    }
    return
  }
  if (counting.value) {
    return
  } else {
    isShow.value = true
  }
}

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

function codeSuccess(msg) {
  console.log('验证通过' + msg);
  isShow.value = false
  getCaptchaSms({account: form.value.account}).then(res => {
    counting.value = true
    isCodeTrue.value = true
    ElMessage.success(language.value == 0 ? '发送成功,请关注邮箱邮件' :'Send success, please check your email')
  })
}

function resetCode() {
  isCodeTrue.value = false
}

const goBack = () => {
  router.go(-1)
}
const next = () => {
  if (!form.value.account) {
    if (language.value == 0) {
      ElMessage.warning('请填写邮箱')
    } else {
      ElMessage.warning('Please fill in your phone/email address')
    }
    return
  }
  if (!form.value.code) {
    if (language.value == 0) {
      ElMessage.warning('请填写验证码')
    } else {
      ElMessage.warning('Please fill in Code')
    }
    return
  }
  if (!isCodeTrue.value) {
    if (language.value == 0) {
      ElMessage.warning('请发送验证码')
    } else {
      ElMessage.warning('Please send the verification code')
    }
    return
  }
  checkRegisterCode(form.value).then(res => {
    emit('submit')
    emit('userName', form.value.account)
  })
}

</script>

<style scoped lang="scss">
.d-form{min-height: 50vh}
.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;
}

.vcodeBox {
  position: relative;
  margin: 20px 0 0;
  width: 320px;
  overflow: hidden;
  height: auto;
}

.tip {
  line-height: 1.6;
  margin-top: 10px;
}
</style>