<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>X·in管理端 - 修改密码</title>
    <script type="text/javascript" src="themes/js/vue.min.js"></script>
    <script type="text/javascript" src="themes/js/index.js"></script>
    <script type="text/javascript" src="themes/js/axios.min.js"></script>
    <script type="text/javascript" src="themes/js/jquery.js"></script>
    <script type="text/javascript" src="themes/js/moment.js"></script>
    <link rel="stylesheet" href="themes/css/index.css" type="text/css">
</head>
<style>
    .header{
        height: 60px;
        width: 100%;
    }

    .header .logo{
        height: 60px;
        width: 260px;
    }

    .header .logo-image{
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 90%;
        background-image: url('themes/img/xin.png');
    }
    .el-form{
        width: 480px;
        margin: auto;
        margin-top: 40px;
    }
    .admin {
        display: flex;
        align-items: center;
        border: 1px solid #DCDFE6;
        background-color: #fff;
        border-radius: 4px;
        height: 40px;
        margin-bottom: 20px;
    }

    .iconinfo {
        display: block;
        width: 40px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #999;
        height: 40px;
        line-height: 40px;
    }

    #app {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        background-color: #f0f2f5;
        background-image: url("themes/img/login_bg.svg");
    }

    .container {
        justify-content: center;
        align-items: center;
        background-color: #f0f2f5;
        width: 80%;
        margin: 40px auto;
    }
    .title{
        height: 60px;
        width: 100%;
        text-align: center;
        margin-top: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .system {
        font-size: 20px;
        font-weight: 600;
    }
</style>
<body>
<body>
<div id="app">
    <div class="header">
        <div class="logo">
            <div class="logo-image"></div>
        </div>
    </div>
    <div class="container">
        <div class="title">
            <span class="system">修改密码</span>
        </div>
        <el-form :model="from" id="passLogin" :rules="rules" ref="user" label-width="80px" @keyup.enter.native="login">
            <el-form-item label="原密码" class="demo-dynamic" prop="pass">
                <el-input v-model="from.pass" size="small" placeholder="请输入原密码" type="password" show-password ></el-input>
            </el-form-item>
            <el-form-item label="新密码" class="demo-dynamic" prop="editpass">
                <el-input size="small" v-model="from.editpass" placeholder="请输入要修改的密码" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" class="demo-dynamic" prop="checkpass">
                <el-input size="small" v-model="from.checkpass" placeholder="请确认改改的密码" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <div style="text-align: center;">
                    <el-button type="primary" style="width: 100%;" @click="edit('user')">确认修改</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                from: {
                    pass: '',
                    editpass:'',
                    checkpass:''
                },
                rules: {
                    pass: [
                        {required: true, message: '请输入原密码', trigger: 'blur'},
                    ],
                    editpass: [
                        {required: true, message: '请输入要修改的密码', trigger: 'blur'},
                    ],
                    checkpass: [
                        {required: true, message: '请确认改改的密码', trigger: 'blur'},
                    ],
                }
            }
        },
        methods: {
            edit(user) {
                this.$refs[user].validate((valid) => {
                    if(valid){
                        if(this.from.editpass == this.from.checkpass){
                            const that = this;
                            axios.post('/xinadmin/edit', this.from,{
                                headers: {
                                    'token': sessionStorage.getItem("token")
                                }
                                }).then(function (res) {
                                console.log(res)
                                if (res.data.state == "success") {
                                    that.$message.success('修改成功');
                                    setTimeout(()=>{   //设置延迟执行
                                        location.href = "login.jsp";
                                    },2000);
                                }else{
                                    that.$message.error("密码错误");
                                }
                            }).catch(function (error) {
                                console.log(error)
                            })
                        }else{
                            this.$message.error("两次密码不一致")
                        }
                    }
                });
            }
        }
    })
</script>
