<template>
    <div class="password">
        <Form ref="formInline" :label-width="120" :model="formInline" :rules="ruleInline">
            <Form-item prop="passwd" label="输入密码">
                <Input type="password" size="large" v-model="formInline.passwd" placeholder="输入密码" @on-enter="handleSubmit('formInline')">
                </Input>
            </Form-item>
            <Form-item prop="passwdCheck" label="再次输入密码">
                <Input type="password" size="large" v-model="formInline.passwdCheck" placeholder="再次输入密码" @on-enter="handleSubmit('formInline')">
                </Input>
            </Form-item>
            <Form-item class="login-btn">
                <Button type="primary" :loading="loading" @click="handleSubmit('formInline')">
                    确认修改
                </Button>
            </Form-item>
        </Form>
    </div>
</template>

<script>
import UserService from 'services/user/user-service';
import Vue from 'vue';

export default {
    name: 'password',
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请输入密码'));
            } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])[a-zA-Z\d\W_]{8,}$/.test(value)) {
                return callback(new Error('密码长度必须大于八位，且包含大写字母，小写字母，数字和特殊字符'));
            } else {
                if (this.formInline.passwdCheck !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.formInline.validateField('passwdCheck');
                }
                return callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请再次输入密码'));
            } else if (value !== this.formInline.passwd) {
                return callback(new Error('两次输入密码不一致!'));
            } else {
                return callback();
            }
        };

        return {
            loading: false,
            formInline: {
                passwd: '',
                password: ''
            },
            ruleInline: {
                passwd: [
                    { validator: validatePass, trigger: 'change' }
                ],
                passwdCheck: [
                    { validator: validatePassCheck, trigger: 'change' }
                ]
            }
        };
    },
    created() {
        this.UserService = new UserService();
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.update(this.formInline.passwdCheck);
                } else {
                    this.$Message.error('请按照规则输入密码!');
                }
            });
        },
        update(passwdCheck) {
            this.loading = true;

            this.UserService.update({
                password: passwdCheck
            }).then(ret => {
                this.loading = false;
                if (ret.code === 200) {
                    Vue.$store.remove('needUpdate');
                    this.$router.push('/');
                } else {
                    this.$Message.error(ret.message);
                }
            });
        }
    }
};
</script>

<style lang="scss">
.password {
    width: 500px;
}
</style>