<script setup>
import {reactive} from "vue";
import XNav from "../../components/XNav.vue";
import BulletChat from "../login/BulletChat.vue";
import XInput from "../../components/XInput.vue";
import SendMsg from "../../components/SendMsg.vue";
import Api from "../../api/index.js";
import {showToast, toPage, verifyForm} from "../../utils/uils.js";

const form = reactive({
    wechat: null,
    mobile: null,
    captcha: null,
    password: null,
    invite: null,
});

const rules = {
    wechat: {
        reg: /^[a-zA-Z0-9_-]{1,19}$/,
        msg: '微信号错误',
        title: '微信号',
        required: true,
    },
    mobile: {
        reg: /^1[3-9]\d{9}$/,
        title: '手机号',
        msg: '手机号错误',
        required: true,
    },
    captcha: {
        reg: /^\d{6}$/,
        title: '验证码',
        msg: '验证码错误',
        required: true,
    },
    password: {
        title: '密码',
        msg: '密码错误',
        required: true,
    }
};

const success = async () => {
    verifyForm(form, rules);
    const {msg} = await Api.system.register(form);
    showToast(msg);
    await toPage(`/pages/login/index?showWX=1`);
}
</script>

<template>
    <!--注册-->
    <XNav></XNav>

    <view class="h-[390rpx] relative overflow-hidden">
        <image class="!absolute left-1/2 top-1/2 -translate-1/2 !w-[1198rpx] !h-[806rpx] !pb-[40rpx]"
               src="/static/icons/bg.png"></image>

        <view class="!flex gap-[16rpx] items-center !mt-[56rpx] !ml-[16rpx] relative z-10">
            <image class="!w-[68rpx] !h-[68rpx]" src="/static/icons/hi.png"></image>
            <view class="title">欢迎注册</view>
        </view>

        <BulletChat></BulletChat>
    </view>

    <view class="h-full bg-white !-mt-[20rpx] rounded-t-[20rpx] !pt-[44rpx] relative z-10">
        <view class="!px-[34rpx] !flex flex-col gap-[40rpx]">
            <x-input v-model:model-value="form.wechat" placeholder="请输入微信号"></x-input>
            <x-input v-model:model-value="form.mobile" placeholder="请输入手机号"></x-input>
            <send-msg v-model:model-value="form.captcha" :mobile="form.mobile"></send-msg>
            <x-input v-model:model-value="form.password" placeholder="请输入登录密码"></x-input>
            <x-input v-model:model-value="form.invite" placeholder="请输入邀请码"></x-input>

            <tui-button class="!mt-[52rpx]" @click="success">确认注册</tui-button>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.title {
    color: rgb(29, 33, 41);
    font-size: 26px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    text-align: left;
}
</style>
