<style lang="scss" scoped>
    .navbar {
        height: 50px;
        overflow: hidden;
        position: relative;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

        .hamburger-container {
            line-height: 46px;
            height: 100%;
            float: left;
            cursor: pointer;
            transition: background 0.3s;
            -webkit-tap-highlight-color: transparent;

            &:hover {
                background: rgba(0, 0, 0, 0.025);
            }
        }

        .breadcrumb-container {
            float: left;
        }

        .errLog-container {
            display: inline-block;
            vertical-align: top;
        }

        .right-menu {
            float: right;
            height: 100%;
            line-height: 50px;

            &:focus {
                outline: none;
            }

            .el-button {
                font-size: 13px;
                margin-right: 10px;
            }

            .right-menu-item {
                display: inline-block;
                padding: 0 8px;
                height: 100%;
                font-size: 18px;
                color: #5a5e66;
                vertical-align: top;

                &.hover-effect {
                    cursor: pointer;
                    transition: background 0.3s;

                    &:hover {
                        background: rgba(0, 0, 0, 0.025);
                    }
                }
            }

            .avatar-container {
                margin-right: 30px;

                .avatar-wrapper {
                    position: relative;
                    font-size: 14px;

                    .user-avatar {
                        cursor: pointer;
                        width: 40px;
                        height: 40px;
                        border-radius: 10px;
                    }

                    .el-icon-caret-bottom {
                        cursor: pointer;
                        position: absolute;
                        right: -20px;
                        top: 20px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>

<template>
    <div class="navbar">
        <div class="right-menu">
            <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
                <div class="avatar-wrapper">
                    {{ name }}
                    <i class="el-icon-caret-bottom"/>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <router-link :to="{name:'userCenter'}">
                        <el-dropdown-item>个人设置</el-dropdown-item>
                    </router-link>
                    <el-dropdown-item divided>
                        <span style="display:block;" @click="changePassword">修改密码</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided>
                        <span style="display:block;" @click="logout">退出</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dialog
                append-to-body
                title="修改密码"
                :visible.sync="visible"
                width="500px"
                :before-close="handleClose"
            >
                <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
                    <section class="dialog__form__container">
                        <el-form-item label="原密码" prop="oldPassword">
                            <el-input v-model.trim="editForm.oldPassword" type="password" :maxlength="20"/>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPassword">
                            <el-input v-model.trim="editForm.newPassword" type="password" :maxlength="20"/>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="againPassword">
                            <el-input v-model.trim="editForm.againPassword" type="password" :maxlength="20"/>
                        </el-form-item>
                        <el-form-item label=" ">
                            <el-button
                                size="small"
                                type="primary"
                                @click="handleOk"
                            >保存
                            </el-button>
                            <el-button size="small" @click="handleClose">取消</el-button>
                        </el-form-item>
                    </section>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {changePassword} from '@/api/moudles/uc/user';

    export default {
        components: {},
        data() {
            const validatePassword = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请完善必填项'));
                } else if (value.length < 6) {
                    callback(new Error('密码6-18个字符'));
                } else {
                    callback();
                }
            };
            const validateAgainPassword = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请完善必填项'));
                } else if (value.length < 6) {
                    callback(new Error('密码6-18个字符'));
                } else if (value !== this.editForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                visible: false,
                editForm: {
                    oldPassword: '',
                    newPassword: '',
                    againPassword: ''
                },
                rules: {
                    oldPassword: [
                        {
                            required: true,
                            validator: validatePassword,
                            trigger: 'blur'
                        }
                    ],
                    newPassword: [
                        {
                            required: true,
                            validator: validatePassword,
                            trigger: 'blur'
                        }
                    ],
                    againPassword: [
                        {
                            required: true,
                            validator: validateAgainPassword,
                            trigger: 'blur'
                        }
                    ]
                }
            };
        },
        computed: {
            ...mapGetters(['sidebar', 'name', 'device'])
        },
        methods: {
            toggleSideBar() {
                this.$store.dispatch('app/toggleSideBar');
            },
            async logout() {
                await this.$store.dispatch('user/logout');
                this.$router.push(`/login?redirect=${this.$route.fullPath}`);
            },
            changePassword() {
                this.visible = true;
                this.editForm.oldPassword = '';
                this.editForm.newPassword = '';
                this.editForm.againPassword = '';
            },
            handleOk() {
                const that = this;
                that.$refs.editForm.validate((valid) => {
                    if (!valid) {
                        return;
                    }
                    that.editForm.oldPassword = btoa(that.editForm.oldPassword);
                    that.editForm.newPassword = btoa(that.editForm.newPassword);
                    that.editForm.againPassword = btoa(that.editForm.againPassword);
                    changePassword(that.editForm).then((res) => {
                        if (res.success) {
                            that.$message.success(res.msg || '修改成功');
                            setTimeout(() => {
                                that.logout();
                            }, 500);
                        } else {
                            that.$message.error(res.msg || '修改失败');
                        }
                    });
                });
            },
            handleClose() {
                this.visible = false;
            }
        }
    };
</script>