<template>
  <div>
    <h2>注册</h2>
    <p class="register" @click="$emit('setState',false)">
      我有账号，点击登录
    </p>
    <el-form
        ref="registerRuleFormRef"
        :model="register"
        :rules="registerRules"
        label-width="0px"
    >
      <el-form-item
          style="margin-bottom: 10px"
          prop="nickname"
          class="app-form-center"
          label-width="80px"
          label="昵称"
      >
        <el-input
            v-model="register.nickname"
            size="large"
            type="text"
            maxlength="50"

            placeholder="请输入您的昵称"
        />
      </el-form-item>
      <el-form-item
          style="margin-bottom: 10px"
          prop="name"
          class="app-form-center"
          label-width="80px"
          label="用户名"
      >
        <el-input
            v-model="register.name"
            size="large"
            type="text"
            maxlength="50"
            placeholder="请输入您的用户名"
        />
      </el-form-item>
      <el-form-item
          style="margin-bottom: 10px"
          prop="email"
          class="app-form-center"
          label-width="80px"
          label="邮箱"
      >
        <el-input
            v-model="register.email"
            size="large"
            type="text"
            maxlength="50"
            placeholder="请输入您的邮箱"
        />
      </el-form-item>
      <el-form-item
          style="margin-bottom: 10px"
          prop="password"
          class="app-form-center"
          label-width="80px"
          label="密码"
      >
        <el-input
            v-model="register.password"
            placeholder="请输入您的密码"
            type="password"
            autocomplete="off"
            size="large"
        />
      </el-form-item>
      <el-form-item
          style="margin-bottom: 10px"
          prop="entryPassword"
          class="app-form-center"
          label-width="80px"
          label="确认密码"
      >
        <el-input
            v-model="register.entryPassword"
            placeholder="请输入二次确认密码"
            type="password"
            autocomplete="off"
            size="large"
        />
      </el-form-item>
      <el-form-item
          label-width="80px"
          label="验证码"
          style="margin-bottom: 10px"
          class="app-form-center"
          prop="verify"

      >
        <div class="verify">
          <div style="width: 80px">
            <el-input
                v-model="register.verify"
                placeholder="验证码"
                size="large"
                autocomplete="off"
            />
          </div>
          <div>
            <img src="/api/get/imgCode" height="30px" alt="">
          </div>
          <div>换一张</div>
        </div>
      </el-form-item>
      <el-form-item label="" prop="agreement">
        <div class="">
          <div>
            <el-checkbox v-model="register.agreement" />
            我已阅读并同意“铜壶协议和隐私条款”
          </div>
          <div class="submit-btn" @click="onRegister">
            注册
          </div>

          <div class="Short-flex">
            <span @click="$emit('setMssages',true)">短信快捷登录</span>


          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>

</template>

<script lang="ts">
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref, getCurrentInstance} from 'vue'
import verify from './verify.png'
import {types} from "sass";
import {register, sendCode} from "@/api/work";
import {ElForm, ElMessage} from "element-plus";
import {registerUserApi} from "@/api/user";
let time:number = -9999
export default defineComponent({
  emits:["setState","setMssages"],
  props:{
    islogin:{
      type:Boolean,
      default:()=>false
    }
  },
  setup(props,{emit}) {
    const { proxy }: any = getCurrentInstance()
    const registerRuleFormRef = ref<InstanceType<typeof ElForm>>()
    const onRegister = () => {
      if (!register.agreement) {
        proxy.$message.error('请先勾选协议', 2000)
        return
      }
      const formWrap = unref<any>(registerRuleFormRef)
      if (!formWrap) return
      // 验证成功
      formWrap.validate((valid: boolean) => {
        console.log(valid)
        if (valid) {
          registerUserApi({
            password_1: register.password,
            password_2: register.entryPassword,
            email: register.email,
            agree: register.agreement
          }).then((res: any) => {
            console.log(res)
          })
        }
      })
    }
    // 注册验证
    const registerRules = reactive({
      email: [
        // { required: true, message: '邮箱不能为空', trigger: 'blur' },
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {
            console.log(rule, value, callback)

            if (!value) {
              return callback(new Error('请填写您的email'))
            }
            callback()
          }
        }
      ],
      password: [
        {
          required: true,
          validator: (rule: any, value: any, callback: any) => {
            if (!value) {
              return callback(new Error('请填写您的密码'))
            }
            callback()
          },
          trigger: 'blur'
        }
      ],
      entryPassword: [
        {
          // required: true,
          validator: (rule: any, value: any, callback: any) => {
            if (value !== register.password) {
              return callback(new Error('两次密码不一致'))
            }
            callback()
          },
          trigger: 'blur'
        }
      ],
      verify: [
        {
          required: true,
          trigger: 'blur',
          message: '请填写验证码'
        }
      ]
    })
    const register = reactive({
      email: '',
      password: '',
      nickname: '',
      name: '',
      entryPassword: '',
      agreement: false,
      verify: '',
      imgVerify: null
    })
    return {
      register,
      registerRuleFormRef,
      registerRules,
      onRegister
    }
  },
  mounted() {
    clearInterval(time)
  },
  onBeforeUnmount() {
    clearInterval(time)
  }
})
</script>

<style lang="scss" scoped>
.forms-sumit {
  width: 360px;
  transition: all 1s;
}
.submit-btn {
  outline: none;
  margin: 0 auto;
  padding: 12px 30px;
  line-height: 1;
  font-size: 16px;
  border-radius: 60px;
  color: #fff;
  background-color: var(--system-primary-color);
  border: none;
  &:hover {
    background-color: var(--system-primary-text-color);
  }
}
.form-center {
  text-align: center;
}
.verify {
  width: 100%;
  text-align: left;
  // display: flex;
  > div {
    display: inline-block;
  }
  > div:first-child {
    width: 80px;
  }
  > div:nth-child(2) {
    margin-left: 10px;
    vertical-align: middle;
  }
  > div:nth-child(3) {
    margin-left: 5px;
  }
}
img {
  width: 100%;
  display: block;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.5s;
}
.Short-flex {
  display: flex;
  justify-content: space-between;
  > span {
    color: #19abdb;
    cursor: pointer;
  }
}
.el-form-item{
  align-items: center;
}
.register {
  text-align: center;
  color: #19abdb;
  cursor: pointer;
  font-size: 12px;
}
</style>
