<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader class="product_tabs" :title="$route.meta.title" hidden-breadcrumb></PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120"  label-position="right">
                <FormItem label="账号" prop="">
                    <Input type="text" v-model="account" :disabled="true" class="input"></Input>
                </FormItem>
                <FormItem label="姓名" prop="real_name">
                    <Input type="text" v-model="formValidate.real_name" class="input"></Input>
                </FormItem>
                <FormItem label="原始密码" prop="pwd">
                    <Input type="password" v-model="formValidate.pwd" class="input"></Input>
                </FormItem>
                <FormItem label="新密码" prop="new_pwd">
                    <Input type="password" v-model="formValidate.new_pwd"  class="input"></Input>
                </FormItem>
                <FormItem label="确认新密码" prop="conf_pwd">
                    <Input type="password" v-model="formValidate.conf_pwd" class="input"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                </FormItem>
            </Form>
        </Card>
    </div>
</template>

<script>
    import { updtaeAdmin } from '@/api/user';
    import { mapState } from 'vuex';
    import util from '@/libs/util';
    export default {
        name: "setting_user",
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            ...mapState('admin/userLevel', [
                'categoryId'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 75;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'left';
            }
        },
        data (){
            return{
                account:'',
                formValidate: {
                    real_name: '',
                    pwd: '',
                    new_pwd: '',
                    conf_pwd: ''
                },
                ruleValidate: {
                  real_name: [
                      { required: true, message: '您的姓名不能为空', trigger: 'blur' }
                  ],
                  pwd: [
                      { required: true, message: '请输入您的原始密码', trigger: 'blur' }
                  ],
                  new_pwd: [
                      { required: true, message: '请输入您的新密码', trigger: 'blur' }
                  ],
                  conf_pwd: [
                      { required: true, message: '请确认您的新密码', trigger: 'blur' }
                  ]
              },
            }
        },
        async mounted () {
            const db = await this.$store.dispatch('admin/db/database', {
                user: true
            });
            this.account = db.get('user_info').value().account;
        },
        methods:{
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        updtaeAdmin(this.formValidate).then(res=>{
                            this.$Message.success(res.msg);
                        }).catch(res=>{
                            this.$Message.success(res.msg);
                        })
                    } else {
                        if(this.formValidate.new_pwd !== this.formValidate.conf_pwd){
                            this.$Message.error('您输入的新密码与旧密码不一致');
                        }
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .input{width:75%;}
</style>