<script setup>
import {reactive, nextTick} from "vue";
import XInput from "../../components/XInput.vue";
import {showToast, toPage, verifyForm} from "../../utils/uils.js";
import SendMsg from "../../components/SendMsg.vue";
import {useUserStore} from "../../pinia/UserStore/index.js";
import Api from "../../api/index.js";

const UserStore = useUserStore();

const form = reactive({
    mobile: null,
    captcha: null,
});
const rules = {
    mobile: {
        reg: /^1[3-9]\d{9}$/,
        title: '手机号',
        msg: '手机号错误',
        required: true,
    },
    captcha: {
        reg: /^\d{6}$/,
        title: '验证码',
        msg: '验证码错误',
        required: true,
    }
};

const success = async () => {
    verifyForm(form, rules);
    const {data} = await Api.system.smsLogin(form);
    showToast('登录成功');
    UserStore.isLogin = true;
    UserStore.token = data.token;
    Object.assign(UserStore.userInfo, data);
    await nextTick(() => {
        toPage('/pages/home/index');
    })
}
</script>

<template>
    <view class="phone-login">
        <x-input v-model:model-value="form.mobile" placeholder="请输入手机号"></x-input>
        <send-msg v-model:model-value="form.captcha" :mobile="form.mobile" :type="2"></send-msg>
        <tui-button class="btn primary" @click="success">登录</tui-button>
        <tui-button @click="toPage('/pages/register/index')" class="btn link-btn" plain link>
            <image class="register-icon" mode="heightFix" src="../../static/icons/去注册.png"></image>
        </tui-button>
    </view>
</template>

<style lang="scss" scoped>
.phone-login{
    padding: 0 34rpx;
    display: flex;
    flex-direction: column;
    gap: 40rpx;
}

.btn{
    margin-top: 40rpx;
}

.btn.primary{
    margin-top: 80rpx;
}

.register-icon{
    height: 26rpx;
}
</style>
