<template>
    <div>
        <!--登录弹框-->
        <el-dialog
            title="登录"
            :visible.sync="loginDialogVisible"
            width="25vw"
            append-to-body
            :close-on-click-modal="false"
            :before-close="modalClose">
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
                    <el-form-item prop="username">
                        <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
                        <el-input
                            prefix-icon="el-icon-user"
                            v-model="ruleForm.username"
                            placeholder="用户名"
                            auto-complete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <!-- type：密码显示* -->
                        <el-input
                            prefix-icon="el-icon-unlock"
                            :type="passwordVisible"
                            v-model="ruleForm.password"
                            placeholder="密码"
                            auto-complete="new-password"
                        >
                            <i slot="suffix" :class="icon" @click="showPass"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
                        <el-input
                            prefix-icon="el-icon-mobile-phone"
                            type="text"
                            placeholder="点击图片更换验证码"
                            v-model="ruleForm.code"
                            class="vertify_code"
                            auto-complete="false"
                            style="width: 15.8vw"
                        ></el-input>
                        <!-- <span class="code">验证码</span> -->
                        <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
                    </el-form-item>
                    <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
                        <el-form-item prop="remember">
                            <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
                        </el-form-item>

                        <el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
                    </div>

                    <div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
                        <el-button type="primary" @click="submitForm('ruleForm')"
                        >登录
                        </el-button
                        >
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <!--注册弹框-->
        <el-dialog
            title="注册"
            :visible.sync="registerDialogVisible"
            width="25vw"
            append-to-body
            :close-on-click-modal="false">
            <div>
                <el-form :model="resisterRuleForm" :rules="rules" ref="resisterRuleForm" class="form">
                    <el-form-item prop="username">
                        <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
                        <el-input
                            prefix-icon="el-icon-user"
                            v-model="resisterRuleForm.username"
                            placeholder="用户名"
                            auto-complete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <!-- type：密码显示* -->
                        <el-input
                            prefix-icon="el-icon-unlock"
                            :type="passwordVisible"
                            v-model="resisterRuleForm.password"
                            placeholder="密码"
                            auto-complete="new-password"
                        >
                            <i slot="suffix" :class="icon" @click="showPass"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
                        <el-input
                            prefix-icon="el-icon-mobile-phone"
                            type="text"
                            placeholder="点击图片更换验证码"
                            v-model="resisterRuleForm.code"
                            class="vertify_code"
                            auto-complete="false"
                            style="width: 15.8vw"
                        ></el-input>
                        <!-- <span class="code">验证码</span> -->
                        <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
                    </el-form-item>
                    <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
                        <!--                            <el-form-item prop="remember">-->
                        <!--                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
                        <!--                            </el-form-item>-->

                        <el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
                    </div>

                    <div class="login-btn" style="margin-top: 10px;display: flex;flex-direction: row;justify-content: space-between">
                        <el-button type="primary" @click="resisterForm('resisterRuleForm')"
                        >注册
                        </el-button
                        >
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";

export default {
    name: "LoginDialog",
    props:{
        loginDialogVisible:Boolean
    },
    data(){
        return {
            // loginDialogVisible:false,
            registerDialogVisible:false,
            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
            checked: false,
            passwordVisible: "password",
            icon: "el-icon-view",
            ruleForm: {
                username: null,
                password: null,
                code: null,
                remember: null
            },
            resisterRuleForm: {
                username: null,
                password: null,
                code: null,
            },
            rules: {
                username: [
                    // required：规则，o：失去焦点触发
                    {required: true, message: "请输入用户名", trigger: "blur"},
                ],
                password: [{required: true, message: "请输入密码", trigger: "blur"}],
                code: [{required: true, message: "请输入验证码", trigger: "blur"}],
            },
        }
    },
    methods:{
        submitForm(formName) {
            var _this=this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //存入cookie
                    // this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天


                    // } else {
                    //     this.clearCookie();
                    // }

                    //调用方法提交
                    axios({
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8082/helloGithub_war_exploded/userLogin',
                        // URL 中的查询参数
                        params: {
                            username: this.ruleForm.username,
                            password: this.ruleForm.password,
                            code: this.ruleForm.code,
                            remember: this.ruleForm.remember,

                        }
                    }).then(function (res) {
                        // Vue.prototype.$message({
                        //     message: '成功！',
                        //     type: 'success'
                        // });
                        if (res.data.code === 200) {
                            _this.$cookie.set('username',_this.ruleForm.username,7);
                            Vue.prototype.$notify({
                                title: '成功',
                                message: ('i', {style: 'color: teal'}, res.data.msg),
                                type: 'success',
                                offset: 50
                            });
                            _this.$emit('update:loginDialogVisible', false);
                            setTimeout(()=>{
                                window.location.reload();
                            },800)

                        } else {
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: res.data.msg,
                                offset: 50
                            });
                        }
                    });
                } else {
                    return false;
                }
            });
        },

        resisterForm(formName) {
            var _this=this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //调用方法提交
                    axios({
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8082/helloGithub_war_exploded/userRegister',
                        // URL 中的查询参数
                        params: {
                            username: this.resisterRuleForm.username,
                            password: this.resisterRuleForm.password,
                            code: this.resisterRuleForm.code,

                        }
                    }).then(function (res) {
                        // Vue.prototype.$message({
                        //     message: '成功！',
                        //     type: 'success'
                        // });
                        if (res.data.code === 200) {
                            Vue.prototype.$notify({
                                title: '成功',
                                message: ('i', {style: 'color: teal'}, res.data.msg),
                                type: 'success',
                                offset: 50
                            });
                            _this.registerDialogVisible=false;
                        } else {
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: res.data.msg,
                                offset: 50
                            });
                        }
                        // console.log(res);
                    });
                } else {
                    return false;
                }

            });
        },
        //点击图片更换验证码
        resetImg() {
            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        showPass() {
            if (this.passwordVisible === "text") {
                this.passwordVisible = "password";
                //更换图标
                this.icon = "el-icon-view";
            } else {
                this.passwordVisible = "text";
                this.icon = "el-icon-lock";
            }
        },
        registerFun() {
            this.$emit('update:loginDialogVisible', false);
            this.registerDialogVisible = true;
        },
        loginFun() {
            this.$emit('update:loginDialogVisible', true);
            this.registerDialogVisible = false;
        },
        modalClose() {
            this.$emit('update:loginDialogVisible', false); // 直接修改父组件的属性
        }
    }
}
</script>

<style scoped>

</style>