<template>
    <div class="login-wrapper">
        <form @submit="onLogin">
            <p>
                <input placeholder="请输入账号" type="text" v-model="data.account">
            </p>
            <p>
                <input placeholder="请输入密码" type="text" v-model="data.password">
                {{ data.password }}
            </p>
            <button type="submit">登录</button>
        </form>
    </div>
</template>

<script lang="ts">
import {reactive} from "vue";
import http from "../util/http";

export default {
    name: "User",
    setup() {
        // vue 数据双向绑定(响应式原理)
        // vue2 Object.definedProperty
        // vue3 Proxy
        const data = reactive({
            account: '',
            password: ''
        })

        function onLogin(e: Event) {
            e.preventDefault()
            http.post('/admin/user/login', data).then(result => {
                console.log(result)
            }).catch(err => {
                console.log(err)
            })
        }

        return {
            data, onLogin
        }
    }
}
</script>

<style scoped>
.login-wrapper {

}
</style>