<template>
  <el-row class="login-box">
    <div>
      <div class="restFrom">
        <el-form
          ref="registerRef"
          :model="registerForm"
          :rules="registerRules"
          class="register-form"
        >
          <div v-if="!stringId">
            <el-form-item prop="phonenumber">
              <el-input
                v-model="registerForm.phonenumber"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="请输入手机号"
              >
                <template #prefix><svg-icon icon-class="phone" class="el-input__icon input-icon" /></template>
              </el-input>
            </el-form-item>
           
            <el-form-item prop="captcha">
              <captcha ref="codeRef" v-model="registerForm.captcha" v-model:uuid="registerForm.uuid" @keyup.enter="handleRegister" />
            </el-form-item>
            <el-form-item prop="code">
              <captcha-sms v-model="registerForm.code" :verify="checkCaptchaSms" @keyup.enter="handleRegister" @error="getCode" />
            </el-form-item>
            <el-form-item style="height: 20px">
              <el-button type="primary" link @click="forgetPassword">去登录</el-button>
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-button
                :loading="loading"
                size="large"
                type="success"
                style="width: 100%;border: 0;"
                @click.prevent="handleRegister"
              >
                <span v-if="!loading">修 改</span>
                <span v-else>修 改 中...</span>
              </el-button>
            </el-form-item>
          </div>
          <div v-if="stringId">
            <el-form-item prop="password">
              <el-input
                v-model="registerForm.password" 
                type="password"
                size="large"
                auto-complete="off"
                placeholder="密码（6-18个字符组成，区分大小写，需包含字母+数字）"
              >
                <template #prefix><svg-icon
                  icon-class="password"
                  class="el-input__icon input-icon"
                /></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passwords">
              <el-input
                v-model="registerForm.passwords"
                type="password"
                size="large"
                auto-complete="off"
                placeholder="确认密码"
              >
                <template #prefix><svg-icon
                  icon-class="password"
                  class="el-input__icon input-icon"
                /></template>
              </el-input>
            </el-form-item>
            <el-form-item style="height: 20px">
              <el-button type="primary" link @click="forgetPassword">去登录</el-button>
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-button
                :loading="loading"
                size="large"
                type="success"
                style="width: 100%;border: 0;"
                @click.prevent="modification"
              >
                <span v-if="!loading">修 改</span>
                <span v-else>修 改 中...</span>
              </el-button>
            </el-form-item>
          </div>
          
        </el-form>
      </div>
    </div>
  </el-row>
</template>

<script setup>

import { ref } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { resetPassByPhonePre, resetPassByPhoneNext } from '@/api/login'
import { ElMessage, ElMessageBox } from 'element-plus'
import Captcha from '@/views/login/components/captcha.vue'
import CaptchaSms from '@/views/login/components/captchaSms.vue'


const { proxy } = getCurrentInstance()
const emit = defineEmits(['login'])
const stringId = ref()
const registerForm = ref({
  password: '',
  code: '',
  uuid: '',
  captcha: ''
})


const registerRules = {
  phonenumber: [
    { required: true, trigger: 'blur', message: '请输入手机号' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '手机号码格式不正确',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, trigger: 'blur', message: '请输入您的密码' },
    {
      min: 6,
      max: 18,
      message: '用户密码长度必须介于 6 和 18 之间',
      trigger: 'blur'
    },
    {
      pattern: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]{8,}$/,
      message: '8位以上大小写字母、数字、特殊符号组合',
      trigger: 'blur'
    }
  ],
  passwords: [
    { required: true, trigger: 'blur', message: '请确认密码' },
    { validator: validatePassword, trigger: 'blur' }

  ],
  captcha: [{ required: true, trigger: 'blur', message: '请输入图形验证码' }],
  code: [{ required: true, trigger: 'blur', message: '请输入短信验证码' }]
}

const loading = ref(false)

function handleRegister() {
  proxy.$refs['registerRef'].validate((valid) => {
    if (valid) {
      loading.value = true
      resetPassByPhonePre(registerForm.value)
        .then((res) => {
          // emit('login')
          stringId.value = res.data
          console.log(res)
          loading.value = false
        })
        .catch(() => {
          loading.value = false
          getCode()
        })
    }
  })
}

function modification(params) {
  proxy.$refs['registerRef'].validate((valid) => {
    if (valid) {
      loading.value = true
      resetPassByPhoneNext({ passwd: registerForm.value.password, uuid: stringId.value })
        .then((res) => {
          ElMessageBox.alert(
            "<font color='red'>修改成功，请登录！</font>",
            {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }
          ).then(() => {
            loading.value = false
            // router.push('/login')
            emit('login')
          })
        })
        .catch(() => {
          loading.value = false
          getCode()
        })
    }
  })
}

// 确认密码
function validatePassword(rule, value, callback) {
  if (registerForm.value.password === value) {
    return callback() // callback() is a function on the Vue prototype. It can be called like the regular callback. (See https://vuejs.org
  } else {
    return callback(new Error('两次密码不一致，请重新输入'))
  }
}

// 发送短信验证码
function checkCaptchaSms() {
  // 判断手机号正确
  if (!registerForm.value.phonenumber) {
    ElMessage({
      showClose: true,
      message: '请输入手机号',
      type: 'error'
    })
    return Promise.reject()
  }
  // 判断验证码填了没
  if (!registerForm.value.captcha) {
    ElMessage({
      showClose: true,
      message: '请输入图形验证码',
      type: 'error'
    })
    return Promise.reject()
  }

  const strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/
  if (!strTemp.test(registerForm.value.phonenumber)) {
    ElMessage({
      showClose: true,
      message: '请输入正确的手机号',
      type: 'error'
    })
    return Promise.reject()
  }

  return Promise.resolve({
    uuid: registerForm.value.uuid,
    telNo: registerForm.value.phonenumber,
    captcha: registerForm.value.captcha
  })
}

function getCode() {
  proxy.$refs['codeRef'].getCode()
}

function forgetPassword() {
  emit('login')
}
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  color: #fff;
  background-color: #44dcb5;
}
.restFrom {
  display: flex;
  justify-content: center;
  align-items: center;
  // height: 80%;
  min-height:  430px;
}
.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  padding: 0px 200px;
  height: 100px;
  background-color: #fff;
}
.title-right {
  display: flex;
  justify-content: space-between;
}
.title-left {
  color: #043793;
  font-weight: 900;
  font-size: 30px;
  margin-left: 100px;
  padding-top: 25px;
}

.tilt-btn {
  // background-color: #043793;
  color: #043793;
  font-weight: 700;
  background-color: none;
  font-size: 20px;
  margin-right: 20px;
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.btn {
  color: #fff;
  background-color: #043793;
  border-radius: 10px;
}
.title-text {
  color: #043793;
  font-weight: 500;
  font-size: 20px;
}
.text-center {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  margin-right: 40px;
}
.register {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  height: 100%;
  background-image: url("@/assets/images/login-background.jpg");
  background-size: cover;
}

.register-form {
  width: 580px;
  // height: 460px;
  background: #FFFFFF;
  box-shadow: 0px 0px 38px 0px rgba(30,98,151,0.73);
  border-radius: 15px;
  padding: 40px 65px;
  :deep(.el-input) {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 40px;
  padding-left: 12px;
}

.text{
  text-align: center;
  position: absolute;
  top: 120px;
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
}

.con{
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #7B7F83;
}
.imgs{
  width: 268px;
  height:249px ;
}
.imgbox{
  width: 350px;
  // margin: 25px;
  text-align: center;
}

.card{
  margin: 25px;
  border: 4px solid #DCDCDC;
  border-radius: 15px;
  position: relative;
}

.imgSon{
  position: absolute;
  top: -1px;
  left: -1px;
  width: 90px;
  height: 90px;
  border: 0  !important;
}

.active{
  border: 4px solid #014A9F !important;

}

.btn{
  width: 440px;
  height: 60px;
  background: #014A9F;
  border-radius: 4px;
}

:deep(.btn span){
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}
h1{text-align: center;    color: #fff;}
</style>