<style lang="scss" scoped>
    .right-menu {
        float: right;
        height: 100%;
        line-height: $headerHeight;

        &:focus {
            outline: none;
        }

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

        .right-menu-item {
            display: inline-block;
            padding: 0 8px;
            height: 100%;
            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;
                }
            }
        }
    }

    .right-menu-icon {
        font-size: 18px;
        color: #666;
        display: inline-block;
        padding: 0 12px;
    }
</style>

<template>
    <div class="right-menu">
        <el-tooltip content="启效文档" placement="bottom">
            <a href="http://192.168.0.35/qgyun/book/" class="right-menu-icon" target="_blank">
                <svg-icon icon-class="help"/>
            </a>
        </el-tooltip>
        <el-tooltip content="GitLab地址" placement="bottom">
            <a href="http://gitlab.qgutech.com/framework/qgyun-parent" class="right-menu-icon" target="_blank">
                <svg-icon icon-class="gitlab"/>
            </a>
        </el-tooltip>
        <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>
</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>