<template>
    <div class="navbar-pack">
        <div class="left-pack">
            <div class="logo-pack"  :style="{'width': sidebarClosed ? '64px' : '256px'}">
                <img :src="require(`../../../assets/images/Layout/logo.png`)">
            </div>
            <div class="fold-pack" @click="toggleSideBar">
                <svg-icon icon-class="fold" :class="{ 'inverse': sidebarClosed }"></svg-icon>
            </div>
            <div class="crumbs-pack">
                <breadcrumb class="breadcrumb-container"/>
            </div>
        </div>
        <div class="tools-pack">
            <!--<div class="warning-pack zoom">-->

<!--            <div class="warning-pack">-->
<!--                <svg-icon icon-class="warning"></svg-icon>-->
<!--            </div>-->
<!--            <div class="question-pack">-->
<!--                <el-tooltip class="item" effect="dark" content="使用文档" placement="bottom">-->
<!--                    <svg-icon icon-class="question"></svg-icon>-->
<!--                </el-tooltip>-->
<!--            </div>-->
<!--            <div class="message-pack">-->
<!--                <svg-icon icon-class="message"></svg-icon>-->
<!--            </div>-->
            <div @click="fullClick" class="full-pack">
                <el-tooltip class="item" effect="dark" content="全屏展示" placement="bottom">
                    <svg-icon icon-class="fullscreen"></svg-icon>
                </el-tooltip>
            </div>
            <div class="username-pack">
                {{username}}
            </div>
            <div class="reset-password-pack">
                <span @click="resetPasswordClick">修改密码</span>
            </div>
            <div class="logout-pack">
                <span @click="logoutClick">登出</span>
            </div>
            <!--<div class="language-pack">-->
                <!--<el-dropdown @command="languageCommand">-->
                    <!--<span class="el-dropdown-link">-->
                        <!--{{language}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                    <!--</span>-->
                    <!--<el-dropdown-menu slot="dropdown">-->
                        <!--<el-dropdown-item command="en" :disabled="enDisabled">English</el-dropdown-item>-->
                        <!--<el-dropdown-item command="zh" :disabled="znDisabled">中文</el-dropdown-item>-->
                    <!--</el-dropdown-menu>-->
                <!--</el-dropdown>-->
            <!--</div>-->
            <!--<div class="avatar-pack">
                <el-dropdown @command="dropdownCommand">
                    <span class="el-dropdown-link">
                        <img :src="require(`../../../assets/images/Layout/avatar.png`)">
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="password">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>-->
        </div>

        <!-- 修改密码弹出框 -->
        <el-dialog
            class="change-password-dialog"
            title="修改密码"
            width="510px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible="passwordDialogVisible">
            <div>
                <el-form
                    status-icon
                    :model="passwordData"
                    :rules="passwordRules"
                    ref="passwordDom"
                    label-width="150px"
                    class="demo-ruleForm">
                    <el-form-item label="原密码 :" prop="oldPassword" :required="true">
                        <el-input
                            type="password"
                            :minlength="6"
                            :maxlength="16"
                            placeholder="请输入包括字母、数字的6~16位字符"
                            v-model="passwordData.oldPassword">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新密码 :" prop="password" :required="true">
                        <el-input
                            type="password"
                            :minlength="6"
                            :maxlength="16"
                            placeholder="请输入包括字母、数字的6~16位字符"
                            v-model="passwordData.password">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="确认密码 :" prop="confirmPassword" :required="true">
                        <el-input
                            type="password"
                            :minlength="6"
                            :maxlength="16"
                            placeholder="请再次输入新设置的密码"
                            v-model="passwordData.confirmPassword"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    @click="updatePasswordClick('passwordDom')"
                    type="primary"
                    :loading="loadingStatus">
                    {{loadingStatus ? '保存中': '确定'}}
                </el-button>
                <el-button
                    @click="resetAdminPassword('passwordDom')">
                    取消
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import screenfull from 'screenfull'
    import Cookies from 'js-cookie'
    // 引入路由面包屑组件
    import Breadcrumb from '@/components/Breadcrumb'
    import validator from '@/utils/validator'

    export default {
        name: 'Navbar',
        components: {
            Breadcrumb
        },
        data () {
            return {
                language: '',
                enDisabled: false,
                znDisabled: false,
                passwordDialogVisible: false,
                loadingStatus: false,              // loading保存状态
                // 修改密码数据
                passwordData: {
                    oldPassword: '',               // 原密码
                    password: '',                  // 新密码
                    confirmPassword: ''            // 确认密码
                },
                // 修改验证规则
                passwordRules: {
                    oldPassword: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入密码'));
                                } else if (_.trim(value).length < 6) {
                                    callback(new Error('密码不能少于6位数且不能大于16位数'));
                                } else if (_.trim(value) !== '' && _.trim(value).length >= 6) {
                                    if (validator.checkPassword(_.trim(value)) === false) {
                                        callback(new Error('请输入包含字母、数字的6-16位字符'))
                                    }
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    password: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入密码'));
                                } else if (_.trim(value).length < 6) {
                                    callback(new Error('密码不能少于6位数且不能大于16位数'));
                                } else if (_.trim(value) !== '' && _.trim(value).length >= 6) {
                                    if (validator.checkPassword(_.trim(value)) === false) {
                                        callback(new Error('请输入包含字母、数字的6-16位字符'))
                                    }
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    confirmPassword: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入密码'));
                                } else if (_.trim(value).length < 6) {
                                    callback(new Error('密码不能少于6位数且不能大于16位数'));
                                } else if (_.trim(value) !== '' && _.trim(value).length >= 6) {
                                    if (validator.checkPassword(_.trim(value)) === false) {
                                        callback(new Error('请输入包含字母、数字的6-16位字符'))
                                    }
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                username: ''
            }
        },
        computed: {
            ...mapState({
                sidebarClosed: state => state.sidebarClosed
            })
        },
        methods: {
            toggleSideBar () {
                this.$store.dispatch('toggleSideBar', !this.sidebarClosed)
            },
            fullClick () {
                if (!screenfull.enabled) {
                    this.$message({
                        message: '你的浏览器不能使用此功能，请升级为最新版本',
                        type: 'warning'
                    })
                    return false
                }
                screenfull.toggle()
                this.toggleSideBar()
            },
            // 多语言切换事件
            languageCommand (command) {
                if (command === 'en') {
                    window.sessionStorage.setItem('Admin-Language', 'en')
                    this.$i18n.locale = 'en'
                    this.language = 'English'
                    this.enDisabled = true;
                    this.znDisabled = false;
                } else {
                    window.sessionStorage.setItem('Admin-Language', 'zh')
                    this.$i18n.locale = 'zh'
                    this.language = '中文'
                    this.enDisabled = false;
                    this.znDisabled = true;
                }
                this.$store.dispatch('User/languageChange', command)
            },
            resetPasswordClick () {
                // 修改密码
                this.passwordDialogVisible = true;
            },
            // 退出
            logoutClick () {
                window.sessionStorage.removeItem('Admin-Token')
                window.sessionStorage.removeItem('Admin-Username')
                window.sessionStorage.removeItem('Admin-Name')
                window.sessionStorage.removeItem('Admin-Authority')
                window.sessionStorage.removeItem('Admin-Language')
                // 为了避免bug,重新实例化vue-router对象
                location.reload()
            },
            // 修改密码
            updatePasswordClick (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.passwordData.password !== this.passwordData.confirmPassword) {
                            this.$message.error('确认密码与新密码不一致');
                        } else {
                            let param = {
                                newName: window.sessionStorage.getItem('Admin-Name'),
                                newPassword: this.passwordData.password,
                                oldPassword: this.passwordData.oldPassword
                            };
                            this.loadingStatus = true;
                            this.$store.dispatch('User/updateUserInfo', param).then((list) => {
                                this.loadingStatus = false;
                                this.logoutClick();
                            }).catch((error) => {
                                this.loadingStatus = false;
                                this.$message.error(error.message);
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            // 取消修改密码
            resetAdminPassword (formName) {
                this.$refs[formName].resetFields();
                this.$message('取消修改密码');
                this.passwordData.oldPassword = '';
                this.passwordData.password = '';
                this.passwordData.confirmPassword = '';
                this.passwordDialogVisible = false;
            },
            getusername () {
                let username = window.sessionStorage.getItem('Admin-Name');
                this.username = username;
            }
        },
        mounted () {
            if (window.sessionStorage.getItem('Admin-Language') === 'en') {
                this.language = 'English'
                this.enDisabled = true;
                this.znDisabled = false;
            } else {
                this.language = '中文'
                this.enDisabled = false;
                this.znDisabled = true;
            }
            this.getusername();
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    @import "@/styles/mixin.scss";
    .navbar-pack {
        position: absolute;
        left: 0;
        right: 0;
        height: 64px;
        padding: 0 20px 0 0;
        background-color: #002140;
        background-image: url("../../../assets/images/Layout/header_bg.png");
        background-repeat: no-repeat;
        border-bottom: 1px solid #f0f2f5;
        /*-webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
        box-shadow: 0 1px 4px rgba(0,21,41,.08);*/
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-pack {
            height: 64px;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            .logo-pack {
                @include rdc-box-sizing;
                position: relative;
                height: 64px;
                overflow: hidden;
                padding-left: 19px;
                display: -webkit-flex;
                display: flex;
                align-items: center;
                transition: width 0.4s;
                -moz-transition: width 0.4s;
                -webkit-transition: width 0.4s;
                -o-transition: width 0.4s;
                img {
                    display: inline-block;
                    height: 42px;
                }
            }
            .fold-pack {
                font-size: 20px;
                height: 64px;
                cursor: pointer;
                -webkit-transition: all .3s,padding 0s;
                transition: all .3s,padding 0s;
                padding: 0 24px;
                color: #fff;
                display: -webkit-flex;
                display: flex;
                align-items: center;
                &:hover {
                    background-color: #333b43;
                }
            }
            .crumbs-pack {
                padding-top: 10px;
                .el-breadcrumb {
                    font-size: 16px;
                }
            }
        }

        .tools-pack {
            display: -webkit-flex;
            display: flex;
            align-items: center;
            .warning-pack, .full-pack, .question-pack, .message-pack, .language-pack, .avatar-pack, .username-pack {
                cursor: pointer;
                margin-right: 25px;
                font-size: 24px;
                color: #fff;
            }
            .warning-pack {
                /*color: rgb(255, 31, 31);*/
            }
            .language-pack {
                font-size: 18px;
                margin-right: 0;
                margin-right: 15px;
                .el-dropdown {
                    color: #fff;
                }
            }
            .avatar-pack {
                margin-right: 0;
                font-size: 16px;
                img {
                    width: 38px;
                    height: 38px;
                }
            }
            .username-pack, .reset-password-pack, .logout-pack {
                cursor: pointer;
                font-size: 14px;
                background-color: rgba(222, 207, 207, 0.3);
                border-radius: 5px;
                padding: 5px 10px;
                color: #fff;
                margin-right: 15px;
                -webkit-transition: all .3s;
                transition: all .3s;
                &:hover {
                    background-color: rgba(222, 207, 207, 0.5);
                }
            }

        }
    }
</style>
