<template>
    <!-- 登录页面 -->
    <view class="login">
        <uni-forms :modelValue="loginForm" label-position="top" class="login-form">
            <h1>用户登录</h1>
            <uni-forms-item label="用户名">
                <uni-easyinput v-model="loginForm.username" placeholder="请输入用户名" />
            </uni-forms-item>
            <uni-forms-item required label="密码">
                <uni-easyinput
                    type="password"
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                />
            </uni-forms-item>

            <view class="login-btn" @tap="onHandleLogin">登录</view>
        </uni-forms>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { appLoginAPI, getUserInfoAPI } from '@/services/index.js'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()

// 登录参数
const loginForm = reactive({
    username: '',
    password: '',
    loginType: 'USERNAME_PASSWORD',
    code: '',
    phoneUuid: '',
    uuid: '',
    verificationCode: '',
})
// 登录按钮
const onHandleLogin = async () => {
    const res = await appLoginAPI(loginForm)
    if (res.code === 200) {
        uni.showToast({ title: '登录成功', icon: 'none' })
        // 获取 token 并存储
        memberStore.setToken(res.data.access_token)

        // 获取用户信息并存储
        const result = await getUserInfoAPI()
        memberStore.setUserInfo(result.user)

        uni.showToast({ title: '登录成功！', icon: 'none' })
        setTimeout(() => {
            uni.switchTab({
                url: '/pages/index/index',
            })
        }, 500)
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;

    .login-form {
        width: 90%;
        padding: 15rpx;
        border: 1px solid #333;
        background-color: #fff;
        border-radius: 16rpx;

        h1 {
            text-align: center;
            padding: 30rpx 0;
            font-size: 32rpx;
            font-weight: bold;
        }

        .login-btn {
            padding: 18rpx 0;
            text-align: center;
            background-color: #1989fa;
            color: #fff;
            border-radius: 10rpx;
        }
    }
}
</style>
