<style lang="scss" scoped>
    .qg-header {
        width: 100%;
        height: $headerHeight;
        /*
                background-color: darken($primary, 5);
        */
        background-color: $primary;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: fixed;
        z-index: 1000;
    }

    .qg-header-nav {
        white-space: nowrap;
        overflow: hidden;
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;

        > a {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            position: relative;
            padding: 0 20px;
            height: 100%;

            &:hover {
                color: rgba(255, 255, 255, 1);
                font-weight: bold;
            }

            &.active {
                color: rgba(255, 255, 255, 1);
                font-weight: bold;
                background-color: rgba(255, 255, 255, 0.2);
                /*&:after{*/
                /*    content: '';*/
                /*    position: absolute;*/
                /*}*/
            }
        }

    }
</style>
<style lang="scss">
    #app .theme-navtl {
        .sidebar-container {
            top: $headerHeight;
            border-right: 1px solid #efefef;
            height: auto;
            background-color: #fff;
            flex: 1;

            .el-menu {
                background-color: #fff;
            }
        }

        .sidebar-logo-container {
            width: auto;
            background-color: transparent;
            border: none;
            padding: 0 32px;
            color: #fff;
        }
    }

    .theme-navtl {
        .qg-header .el-dropdown {
            color: #fff;
        }

        .right-menu-icon {
            color: rgba(255, 255, 255, .8);

            &:hover {
                color: #fff;
            }
        }
    }
</style>

<template>
    <header class="qg-header">
        <logo style="width: auto;padding: 0 32px;"/>
        <nav class="qg-header-nav">
            <template v-for="item in menus">
                <app-link
                    v-if="item.routeUrl || item.redirect"
                    :key="item.name"
                    :class="{'active':activeMenu && activeMenu.id === item.id}"
                    :to="item.routeUrl|| item.redirect || '/404'"
                    :target="item.openWay?'':''"
                    @click.native="setSubMenus(item)"
                >
                    <span>{{ item.name }}</span>
                </app-link>
                <a
                    v-else
                    :key="item.name"
                    :class="{'active':activeMenu && activeMenu.id === item.id}"
                    href=""
                    @click="setSubMenus(item)"
                >{{ item.name }}</a>
            </template>
        </nav>
        <right-menu/>
    </header>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {changePassword} from '@/api/moudles/uc/user';
    import AppLink from '@/layout/components/Sidebar/Link';
    import Logo from '@/layout/components/Logo';
    import {RightMenu} from '../../../components';
    import {getFirstNav} from '@/utils';

    export default {
        name: 'ThemeHeader',
        components: {Logo, AppLink, RightMenu},
        data() {
            return {
                visible: false,
                activeMenu: {}
            };
        },
        computed: {
            ...mapGetters(['menus', 'subMenus', 'crumbList'])
        },
        watch: {
            crumbList(val) {
                console.log('crumbList', val);
            },
            activeMenu(val) {
                this.$store.dispatch('permission/setSubMenus', (val && val.childList) || []);
            }
        },
        created() {
            console.log('this.menus', this.menus);
            this.menus.forEach(item => {
                if (item.childList && item.childList.length > 0) {
                    item.redirect = getFirstNav(item.childList);
                }
            });
            this.activeMenu = (this.crumbList && this.crumbList[0]) || {};
            // TODO iframe 嵌入的页面 刷新后，nav没定位，如果iframe嵌入的是内部也需要测试
        },
        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;
            },
            setSubMenus(item) {
                this.activeMenu = item;
            }
        }
    };
</script>