<template>
    <div>
        <h1>我是page2，账号管理页面</h1>
        <el-divider><i class="el-icon-s-custom"></i></el-divider>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" style="width: 20%">
<!--原密码-->
            <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>
<!--新密码-->
            <el-form-item label="新密码：" prop="newPs">
                <el-input v-model="ruleForm.newPs"
                          placeholder="请输入要更改的密码"
                          maxlength="24"
                          show-word-limit
                          show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="onSubmit('ruleForm')" round>更改信息</el-button>
                <el-button type="primary" @click="cancelBtnClick" round>取&nbsp&nbsp消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    const axios = require('axios');
    import Cookies from 'js-cookie';
    export default {
        data(){
            return {
                ruleForm: {
                    us:'',
                    ps:'',
                    newPs:'',
                },
                rules: {//触发方式，blur失去焦点，change数据改变
                    us: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 5, max: 18, message: '长度在 5-18 个字符', trigger: 'blur'}
                    ],
                    ps: [
                        {min: 6, max: 28,required: true, message: '长度在 6-24 个字符', trigger: 'blur'}
                    ],
                    newPs: [
                        {min: 6, max: 28,required: true, message: '长度在 6-24 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods:{
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('https://mz.tshe.cn/restauantCH/user/updatePs', {
                            us: Cookies.get('username'),
                            ps: this.ruleForm.ps,
                            newPs: this.ruleForm.newPs,
                        })
                            .then((res) => {
                                console.log(res, 'XXXXXXXXXXXXXX');
                                if(res.data.code==-1){
                                    this.$message.error(res.data.msg);
                                }
                                else if(res.data.code==-2){
                                    this.$message.error(res.data.msg);
                                }
                                else if(res.data.code==-3){
                                    this.$message.error(res.data.msg);
                                }
                                else if(res.data.code==-4){
                                    this.$message.error(res.data.msg);
                                }
                                else if(res.data.code==0){
                                    Cookies.remove('username',0);//修改成功清空Cookies账号
                                    Cookies.remove('passWord',0);//修改成功清空Cookies密码
                                    this.$message.success(res.data.msg);
                                    this.$router.push('/');
                                }
                            })
                    }
                    else {
                        this.$message.error('格式错误，请重新输入！');
                        return false;
                    }
                });
            },
            cancelBtnClick(){
                this.$router.go(-1);
            }
        }

    }
</script>
