<template>
    <view class="login-wrap">
        <view class="login-title">Mocp</view>
        <uni-forms ref="loginFormRef" :modelValue="loginForm" :rules="rules" label-position="top">
            <uni-forms-item label="账号" name="username">
                <uni-easyinput type="text" v-model="loginForm.username" placeholder="请输入账号" />
            </uni-forms-item>
            <uni-forms-item label="密码" name="password">
                <uni-easyinput type="password" v-model="loginForm.password" placeholder="请输入密码" />
            </uni-forms-item>
            <uni-forms-item label="验证码" name="verifyCode">
                <view class="verify-code">
                    <uni-easyinput type="text" v-model="loginForm.verifyCode" placeholder="请输入验证码" />
                    <image :src="loginCode" mode="scaleToFill" v-if="loginCode" />
                </view>
            </uni-forms-item>
        </uni-forms>
        <button type="primary" size="mini" @tap="handleLogin" class="login-btn">登录</button>
    </view>
</template>

<script setup>
import { reactive, ref, toRaw, watch } from 'vue'
import { getGifCaptchaApi, loginApi } from '@/api/user'
import { debounce } from 'lodash'
import message from '@/utils/message'

//表单数据
const loginForm = reactive({
    username: '',
    password: '',
    verifyCode: ''
})
//表单规则
const rules = reactive({
    username: {
        rules: [
            {
                required: true,
                errorMessage: '请输入账号'
            }
        ]
    },
    password: {
        rules: [
            {
                required: true,
                errorMessage: '请输入密码'
            }
        ]
    },
    verifyCode: {
        rules: [
            {
                required: true,
                errorMessage: '请输入验证码'
            }
        ]
    }
})
//获取验证码
const loginCode = ref('')
const getGifCaptcha = async () => {
    const params = {
        username: loginForm.username
    }
    const res = await getGifCaptchaApi(params, { arraybuffer: true })
    if (res) {
        loginCode.value = 'data:image/png;base64,' + uni.arrayBufferToBase64(res)
    }
}
watch(
    () => loginForm.username,
    debounce((value) => {
        if (value) {
            getGifCaptcha()
        }
    }, 500)
)
//登录
const loginFormRef = ref()
const handleLogin = async () => {
    await loginFormRef.value?.validate()
    const res = await loginApi(toRaw(loginForm), { loading: '登陆中...' })
    if (res.code == 200) {
        //跳转工作台
        uni.switchTab({ url: '/pages/panel/index' })
    } else {
        message.error(res.message)
    }
}
</script>

<style lang="scss">
page {
    background: #fff;
}
.login-wrap {
    padding: 50rpx;
    .login-title {
        font-weight: bold;
        font-size: 40rpx;
        margin-bottom: 100rpx;
    }
    .verify-code {
        display: flex;
        justify-content: space-between;
        align-items: center;
        image {
            margin-left: 10rpx;
            width: 200rpx;
            height: 70rpx;
        }
    }
    .login-btn {
        margin-top: 50rpx;
        width: 100%;
    }
}
</style>
