<template>
    <div class="loginBox">
            <el-form  :model="ruleForm" class="login" ref="ruleForm" :rules="rules" style="width: 18%">
                <h1>神州餐厅管理系统-NavLogin</h1>
                <br><br>
                <!--账号-->
                <el-form-item label="账号" prop="us">
                    <el-input v-model="ruleForm.us"
                              placeholder="请输入账号名"
                              maxlength="18"
                              show-word-limit></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item label="密码" prop="ps">
                    <el-input  v-model="ruleForm.ps"
                               placeholder="请输入密码"
                               maxlength="24"
                               show-word-limit
                               show-password></el-input>
                </el-form-item>
                <!-- `checked` 为 true 或 false -->
                <el-checkbox v-model="checked" style="float: left">记住密码</el-checkbox>
                <el-checkbox v-model="aotuLoginStatus" >自动登录</el-checkbox>
                <br><br>
                <el-button @click="jumpVerifyAccount" style="float: left">忘记密码</el-button>
                <br>
                <br><br>
                <el-form-item>
                    <el-button type="success" round @click="submitForm('ruleForm')">登录</el-button>
                    <el-button type="primary" round @click="regBtnClick">注册</el-button>
                </el-form-item>
            </el-form>
    </div>

</template>

<script>
    const axios=require('axios');
    import Cookies from 'js-cookie';
    export default {
        data() {
            return {
                token:'',
                checked:false,
                aotuLoginStatus:false,
                username:'',
                passWorld:'',
                ruleForm: {
                    us: '',
                    ps: '',
                    todos:[]
                },
                rules: {
                    us: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 5, max: 18, message: '长度在 5-18 个字符', trigger: 'blur'}
                    ],
                    ps: [
                        {min: 6, max: 24,required: true, message: '长度在 6-24 个字符', trigger: 'change'}
                    ]
                }
            }
        },
        created() {
            if( Cookies.get('username')){
                this.ruleForm.us=Cookies.get('username');
            }
            if(Cookies.get('passWord')){//点击【记住密码】，则登录之前传密码，到显示的页面上
                this.checked=true;
                this.ruleForm.ps=Cookies.get('passWord');
            }

            //刚进入的时候，根据cookie是否有【账号、密码】 && 【if(自动登录==true)】来判断
            if(Cookies.get('username') && Cookies.get('passWord') && Cookies.get('aotuLoginCookie')){
                this.aotuLoginStatus=true;
                this.$router.push('/foodRestaurant');
            }
        },
        methods: {
// 注册
            regBtnClick(){
                this.$router.push('/regist');
            },
//忘记密码
            jumpVerifyAccount(){
                this.$router.push('/yanzhengUS');
            },
//登录
            submitForm(formName) {

//登录-点击登录
                this.$refs[formName].validate((valid) => {//登录判断操作
                    if (valid) {
                        axios.post('https://mz.tshe.cn/restauantCH/user/login',{
                            us:this.ruleForm.us,
                            ps:this.ruleForm.ps
                        },
                            {
                                headers:{
                                    // 切记 token 不要直接发送，要在前面加上 Bearer 字符串和一个空格
                                    'Authorization':`Bearer ${this.token}`
                                }
                            }
                        )
                            .then((res)=>{
                                if(res.data.code==0){
                                    this.$message.success(res.data.msg);

                                    //登录-记住密码
                                    if (this.checked == true) {//判断复选框是否被勾选 勾选则配置cookie.ps，有效期1天
                                        Cookies.set('passWord',this.ruleForm.ps,1);
                                    }
                                    else{
                                        Cookies.remove('passWord',0)
                                    }
                                    //登录-自动登录
                                    if(this.aotuLoginStatus==true){//如果复选框被勾选，则直接进入到主页面
                                        Cookies.set('aotuLoginCookie',this.aotuLoginStatus,1);//点击自动登录==true，就设置cookie
                                    }
                                    else {//不点击自动登录则删除cookie
                                        Cookies.remove('aotuLoginCookie',0);
                                    }
                                    Cookies.set('username',this.ruleForm.us,1);
                                    Cookies.set('token',res.data.token,1);
                                    this.$router.push('/foodRestaurant');
                                }
                                else if(res.data.code==-1){
                                    this.$message.error(res.data.msg);
                                }
                            })
                    }
                    else {
                        //格式错误的话 不记录登录失败的信息
                        this.$message.error('格式错误');
                        return false;
                    }
                });
            },
            },
    }
</script>

<style>
    .loginBox {
        text-align: center;
    }
    body {
        background: pink url('../loginBGI/登录背景图片-3.png')
        no-repeat
        fixed;
        background-size: cover;
    }
    .loginBox.label {
        color: white;
    }
    .login {
        margin: 250px auto 0  ;
    }
</style>
