<style lang="scss" scoped>
.navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background-color: #3d6df8;

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

        &:hover {
            background: rgba(0, 0, 0, .025)
        }
    }

    .breadcrumb-container {
        float: left;
    }

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

        &:focus {
            outline: none;
        }

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

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

                &:hover {
                    background: rgba(0, 0, 0, .025)
                }
            }
        }

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

            .avatar-wrapper {
                position: relative;

                .user-avatar {
                    cursor: pointer;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    vertical-align: middle;
                }

                .user-nickname {
                    cursor: pointer;
                    padding: 0px 5px;
                    font-size: 13px;
                    color: #fff;
                }

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


<template>
    <div class="navbar">
        <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
        <breadcrumb class="breadcrumb-container" />
        <div class="right-menu">
            <el-dropdown class="avatar-container" trigger="click">
                <div class="avatar-wrapper">
                    <img src="@/assets/image/user.png" class="user-avatar">
                    <i class="el-icon-caret-bottom"></i><!---图标-->
                    <span class="user-nickname">{{ userNickname }}</span>
                </div>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <router-link to="/">
                        <el-dropdown-item divided>
                            <span style="display:block;">系统首页</span>
                        </el-dropdown-item>
                    </router-link>
                    <el-dropdown-item divided @click.native="hOpenUpdateDlg">
                        <span style="display:block;">修改密码</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided @click.native="hLogout">
                        <span style="display:block;">退出登录</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-dialog width="45%" :title="dialogData.editData.title" :visible.sync="dialogData.editData.show"
            :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="dialogData.editData.data" :rules="dialogData.editData.rules" ref="editDataForm"
                label-width="80px">
                <el-form-item label="以前密码" prop="old_pwd">
                    <el-input v-model.trim="dialogData.editData.data.old_pwd" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新改密码" prop="new_pwd1">
                    <el-input v-model.trim="dialogData.editData.data.new_pwd1" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="new_pwd2">
                    <el-input v-model.trim="dialogData.editData.data.new_pwd2" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div style="padding-top: 10px;text-align:right">
                <el-button type="success" @click="hSubmit">确定</el-button>
                <el-button type="warning" @click="hClose">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { updateOperatorPwd } from '@/api/user'

export default {
    components: {
        Breadcrumb,
        Hamburger
    },
    data() {
        return {
            userNickname: '',
            dialogData: {
                editData: {
                    title: '修改密码',
                    show: false,
                    data: {
                        old_pwd: '',
                        new_pwd1: '',
                        new_pwd2: ''
                    },
                    rules: {
                        old_pwd: [
                            { required: true, message: '请输入原密码', trigger: 'blur' },
                        ],
                        new_pwd1: [
                            { required: true, message: '请输入新密码', trigger: 'blur' },
                        ],
                        new_pwd2: [
                            { required: true, message: '请输入确认密码', trigger: 'blur' },
                        ]
                    }
                }
            }
        }
    },
    computed: {
        ...mapGetters([
            'sidebar',
            'avatar'
        ]),
    },
    mounted() {
        this.$nextTick(function () {
            this.init()
        })
    },
    methods: {
        toggleSideBar() {
            this.$store.dispatch('app/toggleSideBar')
        },
        init() {
            this.userNickname = this.$store.state.user.userInfo.nickname
        },
        hOpenUpdateDlg() {
            this.dialogData.editData.data = {}
            this.dialogData.editData.show = true
        },
        hClose() {
            this.dialogData.editData.show = false
        },
        hSubmit() {
            this.$refs.editDataForm.validate((valid) => {
                if (valid) {
                    this.updateOperatorPwd()
                }
            })
        },
        updateOperatorPwd() {//修改密码
            let paramData = {}
            let new_pwd1 = this.dialogData.editData.data.new_pwd1
            let new_pwd2 = this.dialogData.editData.data.new_pwd2

            if (new_pwd1 != new_pwd2) {
                this.$message({ message: '新改密码和确认密码不一致', type: 'error' })
                return
            }

            paramData.password = this.dialogData.editData.data.old_pwd
            paramData.new_password = new_pwd1

            //修改密码
            updateOperatorPwd(paramData).then(() => {
                this.$message({ message: '修改密码成功', type: 'success' })
                this.hClose()
                this.$router.push("/login")
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        },
        hLogout() {
            this.$confirm("真的要退出吗", "提示", { type: "warning" })
                .then(() => {
                    //保存当前登录用户的ID
                    let userId = 0
                    userId = this.$store.state.user.userInfo.id

                    //登出
                    this.$store.dispatch("user/logout")

                    //跳转回登录页面
                    this.$router.push({
                        path: '/login',
                        query: {
                            return_url: this.$route.fullPath,//处处前页面
                            id: userId//当前登录用户ID
                        }//当当前页面作为参数传回
                    })
                })
                .catch(() => { })
        }
    }
}
</script>
