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

const UserStore = useUserStore();

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

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

<template>
    <view class="account-login">
        <x-input v-model:model-value="form.mobile" placeholder="请输入手机号"></x-input>
        <x-input v-model:model-value="form.password" placeholder="密码">
            <template #suffix>
                <x-link @click="toPage('/pages/forgotPassword/index')">忘记密码?</x-link>
            </template>
        </x-input>
        <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 scoped>
.account-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>
