<template>
  <el-row class="login-box">
    <div>
      <h1>团 体 会 员 注 册</h1>
      <!-- <el-row v-if="!showRegister" :gutter="20">
      <el-card class=" box">
        <el-row>
          <el-col :span="12">
            <el-card
              shadow="hover" class="card
            "  :class="{ active: selectItem==1}" @click="selectItem=1"
            >
              <div class="imgbox">
                <img class="imgs" src="@/assets/images/btn01@2x.png" alt="">
                <h2 style="text-align: center;">团体会员</h2>
                <div class="con">
                  这里是团体会员介绍这里
                  是团体会员介绍
                </div>
              </div>
              <img v-if="selectItem==1" class="imgSon" src="@/assets/images/xz@2x.png" alt="">
            </el-card>

          </el-col>
          <el-col :span="12">
            <el-card
              shadow="hover" class="card
            " :class="{ active: selectItem==2}" @click="selectItem=2"
            >
              <div class="imgbox">
                <img class="imgs" src="@/assets/images/btn02@2x.png" alt="">
                <h2 style="text-align: center;">个人会员</h2>
                <div class="con">
                  这里是团体会员介绍这里
                  是团体会员介绍
                </div>
              </div>
              <img v-if="selectItem==2" class="imgSon" src="@/assets/images/xz@2x.png" alt="">

            </el-card>
          </el-col>
        </el-row>
        <br>
        <br>
        <el-row justify="center">
          <el-button class="btn" :disabled="selectItem==0" type="primary" @click="selected">确 定</el-button>
        </el-row>
      </el-card>
    </el-row> -->
      <div class="restFrom">
        <el-form
          ref="registerRef"
          :model="registerForm"
          :rules="registerRules"
          class="register-form"
        >
          <el-form-item prop="telNo">
            <el-input
              v-model="registerForm.telNo"
              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="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              size="large"
              auto-complete="off"
              placeholder="密码为8位以上大小写字母加数字加特殊符号组合"
            >
              <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 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="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>
        </el-form>
      </div>
    </div>
  </el-row>
</template>

<script setup>

import { ref } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { groupMemberRegister } from '@/api/login'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import Captcha from './components/captcha'
import CaptchaSms from './components/captchaSms'
import zxcvbn from 'zxcvbn'


const { proxy } = getCurrentInstance()
// const selectItem = ref(1)
// const showRegister = ref(true)

// function selected() {
//   if (selectItem.value == 2) {
//     proxy.$modal.msgWarning('个人会员暂未开放注册')
//   } else if (selectItem.value == 1) {
//     showRegister.value = true
//   }
// }

const router = useRouter()
const registerForm = ref({
  telNo: '',
  password: '',
  code: '',
  uuid: '',
  captcha: ''
})


const registerRules = {
  telNo: [
    { 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() {
  // console.log(zxcvbn(registerForm.value.password))

  proxy.$refs['registerRef'].validate((valid) => {
    if (valid) {
      loading.value = true
      groupMemberRegister(registerForm.value)
        .then((res) => {
          ElMessageBox.alert(
            "<font color='red'>恭喜你，您的账号 " +
              registerForm.value.telNo +
              ' 注册成功！</font>',
            '系统提示',
            {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }
          ).then(() => {
            router.push('/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.telNo) {
    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.telNo)) {
    ElMessage({
      showClose: true,
      message: '请输入正确的手机号',
      type: 'error'
    })
    return Promise.reject()
  }

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

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

</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%;
}
.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>