<template>
  <view class="login register">
    <view class="content">
      <!-- 头部logo -->
      <view class="header">
        <image :src="'/static/icon.png'"></image>
      </view>
      <!-- 主体 -->
      <view class="main">
        <uni-forms ref="userForm" :model="registerForm" :rules="rules" label-width="140upx">
          <uni-forms-item label="登录名" name="username">
            <uni-easyinput type="text" v-model="registerForm.username" placeholder="请输入登录名" :clearable="false"/>
          </uni-forms-item>
          <uni-forms-item label="密码" name="password">
            <uni-easyinput type="password" v-model="registerForm.password" placeholder="请输入密码" :clearable="false"/>
          </uni-forms-item>
          <uni-forms-item label="确认密码" name="confirmPassword">
            <uni-easyinput type="password" v-model="registerForm.confirmPassword" placeholder="请输入确认密码"
                           :clearable="false"/>
          </uni-forms-item>
          <uni-forms-item label="手机" name="phonenumber">
            <uni-easyinput type="text" v-model="registerForm.phonenumber" placeholder="请输入手机" :clearable="false"/>
          </uni-forms-item>
          <uni-forms-item label="验证码" name="code">
            <uni-easyinput type="text" v-model="registerForm.code" placeholder="请输入验证码" :clearable="false"/>
            <image :src="codeUrl" mode="widthFix" class="register-img" @tap="getCode"></image>
          </uni-forms-item>
          <view class="margin-top text-center">
            <button class="cu-btn bg-cyan lg margin-top" style="width: 100%;" @tap="save">保存</button>
            <button class="cu-btn solid lg margin-top" style="width: 100%;" @tap="login">登录</button>
          </view>
        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import UniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import UniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import {ref} from "vue";
import {getCodeImg, register} from "@/api/Login";
import MessageUtils from "@/utils/MessageUtils";

const userForm = ref();
// 验证码开关
const captchaOnOff = ref(true);
const codeUrl = ref("");
const equalToPassword = (rule:any, value:any,data:any, callback:any) => {
  if (registerForm.value.password !== value) {
    callback('两次输入的密码不一致');
  } else {
    return true;
  }
}
const login = () => {
  uni.reLaunch({
    url: "/pages/login/login"
  })
}
const getCode = () => {
  getCodeImg().then((res : any) => {
    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
    if (captchaOnOff.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      registerForm.value.uuid = res.uuid
    }
  });
}

getCode();
const rules = {
  username: {
    rules: [{
      required: true,
      errorMessage: '请输入姓名',
    },
      {
        minLength: 7,
        maxLength: 10,
        errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
      }
    ]
  },
  password: {
    rules: [{
      required: true,
      errorMessage: '请输入密码',
    },
      {
        minLength: 7,
        maxLength: 10,
        errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
      }
    ]
  },
  repassword: {
    rules: [
      { required: true, trigger: 'blur', message: '请再次输入您的密码' },
      {validateFunction: equalToPassword}
    ]
  },
  phonenumber: {
    rules: [{
      required: false,
      errorMessage: '请输入手机号',
    }, {
      validateFunction: function (rule: string, value: string, data: string, callback: Function) {
        const pattern = /^1[3456789]\d{9}$/
        if (!pattern.test(value)) {
          callback('手机号格式不对')
        }
        return true
      }
    }]
  }
}
const registerForm = ref({
  host: '',
  username: '',
  phonenumber: '',
  password: '',
  confirmPassword: '',
  code: '',
  uuid: ''
})

const save = () => {
  userForm.value.validate().then(() => {
    register(registerForm.value)
        .then(() => {
          MessageUtils.success('注册成功');
          uni.reLaunch({
            url: "/pages/login/login"
          })
        })
        .catch((err) => {
          MessageUtils.error(err.msg);
        })
  })
}
</script>

<style scoped>
@import url('@/static/css/main.css');
.register-img{
  width: 200upx;
  height: 80upx;
}
.uni-forms-item__content{
  display: flex!important;
}
</style>
