<template>
    <div class="back">
        <!-- {{ $store.state.userinfo }} -->
        <div class="box">
            <div>
                <p>学生名：</p>
                <el-input v-model="user" placeholder="请输入用户名"></el-input>
            </div>
            <div>
                <p>密码：</p>
                <el-input
                    v-model="pwd"
                    show-password
                    placeholder="请输入密码"
                ></el-input>
            </div>
            <div class="button">
                <el-button @click="register" type="primary">添加</el-button>
            </div>
        </div>
    </div>
</template>
<style scoped>
.back {
    background-image: url("../assets/1.jpg");
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
}
.box {
    width: 400px;
    height: 200px;
    background-color: #fff;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.box > div {
    width: 80%;
    display: flex;
    align-items: center;
}
.box > div > p {
    flex-shrink: 0;
    width: 80px;
}
.button {
    display: flex;
    justify-content: flex-end;
}
</style>
<script>
export default {
    data() {
        return {
            user: "",
            pwd: "",
        };
    },
    methods: {
        register() {
            this.axios
                .get("/addstu", {
                    params: {
                        pwd: this.pwd,
                        user: this.user,
                    },
                })
                .then((res) => {
                    console.log(res.data);
                    if (res.data.code == 1) {
                        this.$message.error("添加失败");
                    } else {
                        this.$message({
                            message: "添加成功",
                            type: "success",
                        });
                    }
                });
        },
    },
};
</script>