<template>
    <div class="docs">
        <div class="container">
            <div class="container-left">
                <div class="logo-wrap">
                    <div class="logo" @click="goToHome"></div>
                </div>
                <div class="menu-wrap">
                    <el-scrollbar class="menu-wrap-scrollbar">
                        <div class="menu-item" v-for="menu in navs" :key="menu.path">
                            <template v-if="Array.isArray(menu.list) && menu.list.length">
                                <div :class="['group-name', isGroupActive(menu)]">
                                    <span>{{ menu.name }}</span>
                                </div>
                                <div
                                    :class="['menu-link', 'small', isActive(menuItem.path)]"
                                    @click="goToPage(menuItem.path)"
                                    v-for="menuItem in menu.list"
                                    :key="menuItem.path"
                                >
                                    <span>{{ menuItem.title }}</span>
                                </div>
                            </template>
                            <div :class="['menu-link', isActive(menu.path)]" @click="goToPage(menu.path)" v-else>
                                {{ menu.name }}
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>

            <el-scrollbar class="page-wrap">
                <router-view class="page"></router-view>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
import Navs from '../nav.config.json'
export default {
    data() {
        return {
            navs: Navs,
            pathBase: '/docs'
        }
    },
    computed: {
        menuWrap() {
            return this.$el.getElementsByClassName('menu-wrap')[0]
        },
        menuScrollbar() {
            return this.$el.getElementsByClassName('menu-wrap-scrollbar')[0]
        },
        activeMenu() {
            const route = this.$route
            const { meta, path } = route
            // if set path, the sidebar will highlight the path you set
            if (meta.activeMenu) {
                return meta.activeMenu
            }
            return path
        }
    },
    watch: {
        navs: {
            immediate: true,
            deep: true,
            handler() {
                this.$nextTick(() => {
                    this.menuScrollbar.style.height =
                        (this.menuWrap.clientHeight - 50 > 0 ? this.menuWrap.clientHeight - 50 : 0) + 'px'
                })
            }
        }
    },
    created() {
        window.addEventListener('resize', () => {
            this.menuScrollbar.style.height =
                (this.menuWrap.clientHeight - 50 > 0 ? this.menuWrap.clientHeight - 50 : 0) + 'px'
        })
    },
    methods: {
        isGroupActive(groupMenu) {
            if (!groupMenu || !this.activeMenu || !groupMenu.list || groupMenu.list.length === 0) {
                return ''
            }
            let flag = groupMenu.list.some(menu => {
                return this.isActive(menu.path).length > 0
            })
            if (flag) {
                return 'active'
            } else {
                return ''
            }
        },
        isActive(path) {
            if (!path || !this.activeMenu) {
                return ''
            }
            let activePath = this.activeMenu.split(this.pathBase)[1]
            if (activePath === path || activePath.split('/')[1] === path) {
                return 'active'
            } else {
                return ''
            }
        },
        goToPage(path) {
            if (!path) {
                this.$router.push({ path: '/' })
            }
            if (path.indexOf('/') < 0 || path.indexOf('/') !== 0) {
                path = '/' + path
            }
            this.$router.push({ path: this.pathBase + path })
        },
        goToHome() {
            this.$router.push({ path: '/' })
        }
    }
}
</script>

<style lang="scss">
@import '../assets/styles/function.scss';

.docs {
    @include box_flex($width: 100%, $height: 100%, $direction: column, $justify: flex-start, $align: flex-start);
    @include background_color(bgImg);
    padding: 54px 0 45px;
    overflow-y: hidden;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;

    .container {
        margin: 0 360px;
        flex: 1;
        overflow: hidden;
        @include box_flex($width: 1200px, $direction: row, $justify: flex-start, $align: flex-start);

        .container-left {
            overflow: hidden;
            @include box_flex($width: 279px, $height: 100%, $direction: column, $justify: center, $align: center);
            @include background_color(bgColor);
            box-shadow: 0 3px 18px 0 rgba(15, 24, 50, 0.15);
            border-radius: 8px;

            .logo-wrap {
                z-index: 9999;
                padding: 30px 40px 20px;
                width: 245px;
                cursor: pointer;
                @include themeify {
                    border-bottom: 1px solid themed(menuBorderColor);
                }
                .logo {
                    @include background_color(menuLogo);
                    width: 166px;
                    height: 114px;
                }
            }

            .menu-wrap {
                padding: 30px 0 20px;
                width: 220px;
                flex: 1;
                overflow: hidden;
                z-index: 9999;

                .menu-wrap-scrollbar {
                    position: fixed;
                    width: 220px;
                    .el-scrollbar__wrap {
                        overflow-x: hidden;
                    }
                    .menu-item {
                        line-height: 40px;
                        margin-bottom: 6px;
                        .menu-link {
                            font-size: 20px;
                            @include font_color(menuFontColor);
                            margin: 0;
                            padding: 0 26px;
                            text-decoration: none;
                            display: block;
                            position: relative;
                            transition: 0.15s ease-out;
                            font-weight: bold;
                            cursor: pointer;
                            font-family: SourceHanSansCN-Bold;
                            &.small {
                                font-family: SourceHanSansCN-Regular;
                                font-size: 16px;
                                line-height: 40px;
                                font-weight: 400;
                                text-indent: 1em;
                                margin-bottom: 4px;
                                &.active {
                                    @include background_color(subMenuActiveBgImg);
                                    @include font_color(subMenuActiveFontColor);
                                }
                            }
                            &.active {
                                @include font_color(menuActiveFontColor);
                            }
                        }
                        .group-name {
                            font-size: 20px;
                            @include font_color(menuFontColor);
                            margin-bottom: 8px;
                            padding: 0 26px;
                            line-height: 40px;
                            font-weight: bold;
                            font-family: SourceHanSansCN-Bold;
                            &.active {
                                @include font_color(menuActiveFontColor);
                            }
                        }
                    }
                }
            }
        }

        .page-wrap {
            flex: 1;
            height: 100%;
            overflow: hidden;
            position: relative;
            margin-left: 15px;
            box-shadow: 0 3px 18px 0 rgba(15, 24, 50, 0.15);
            border-radius: 8px;
            @include background_color(bgColor);

            .el-scrollbar__wrap {
                overflow-x: hidden;
            }

            .page {
                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    margin: 14px 30px 14px;
                    @include font_color(fontColor3);
                }

                h1,
                h2,
                h3 {
                    position: relative;
                    padding-left: 16px;
                    &::before {
                        display: block;
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 4px;
                        height: 80%;
                        border-radius: 3px;
                        @include background_color(fontColor3);
                    }
                }

                p,
                pre {
                    margin-left: 30px;
                    margin-right: 30px;
                }

                p,
                pre {
                    width: calc(100% - 60px);
                }

                table {
                    border-collapse: collapse;
                    width: 100%;
                    @include background_color(bgColor);
                    font-size: 14px;
                    margin-bottom: 45px;
                    line-height: 1.5em;
                }
                table strong {
                    font-weight: 400;
                }
                table td,
                table th {
                    @include border_color($direction: bottom, $type: solid, $width: 1px, $color: 'borderColor');
                    padding: 15px;
                    max-width: 250px;
                    @include font_color(fontColor5);
                    text-align: center;
                }
                table td:first-child,
                table th:first-child {
                    padding-left: 10px;
                }
            }
        }
    }
}
</style>
