<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 a correct mailbox information, which cannot be modified after registration.
            The mailbox will receive your registration review, payment of bills, competition invitation and so
            on.
          </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 phone/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>