<template>
    <div id="page-main" v-bind:class="{ 'page-sidebar-closed': sidebarClosed }">
        <page-header ref="pageHeader"></page-header>

        <div id="page-container" class="page-container">
            <page-sidebar></page-sidebar>
            <div id="page-content-wrapper" class="page-content-wrapper">
                <div class="page-bar">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-show="!breadcrumb.length" :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item
                            v-show="breadcrumb.length"
                            v-for="(b, index) in breadcrumb"
                            :key="index"
                            :to="b.path ? { path: b.path } : null"
                            >{{ b.label }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <!-- <router-view class='page-content'/> -->
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive" class="page-content"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive" class="page-content"></router-view>
                <div class="version">当前版本： V 3.11</div>
            </div>
        </div>
        <!-- <div class='page-footer'>
        © 2016 SAGACLOUD. All rights reserved 京ICP备16059843号-1
    </div>-->
    </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import PageHeader from "./PageHeader";
import PageSidebar from "./PageSidebar";
import menus from "@/data/menus";

export default {
    name: "Main",
    components: {
        "page-header": PageHeader,
        "page-sidebar": PageSidebar,
    },
    props: [],
    data() {
        return {
            isPath: false,
        };
    },
    computed: {
        ...mapGetters("layout", ["sidebarClosed", "breadcrumb"]),
    },
    methods: {
        ...mapMutations("layout", ["setSidebarClosed", "setSidebarSelected"]),
        windwoResize() {
            // 窗口大小发生变化时
            let clientWidth = `${document.documentElement.clientWidth}`;
            let clientHeight = `${document.documentElement.clientHeight}`;
            //this.setPageContentHeight(height)
            if (clientWidth > 1000) {
                this.setSidebarClosed(false);
            } else if (clientWidth > 800) {
                this.setSidebarClosed(true);
            } else {
                this.setSidebarClosed(false);
            }
        },
        findPathInArray(arr, path) {
            arr.forEach((ele) => {
                if (ele.path == path) {
                    this.isPath = true;
                }
                if (ele.children) {
                    this.findPathInArray(ele.children, path);
                }
            });
        },
    },
    watch: {
        $route: {
            handler: function (route, oldVal) {
                let path = route.path;
                this.isPath = false;
                this.findPathInArray(menus, path);
                if (this.isPath) {
                    this.setSidebarSelected(path);
                }
            },
            // 深度观察监听
            deep: true,
        },
    },
};
</script>
<style lang="less">
#page-main {
    .version {
        position: fixed;
        bottom: 2px;
        left: 50%;
        order: 2;
        flex-grow: 0;
        flex-shrink: 0;
        height: 15px;
        line-height: 1.3;
        text-align: center;
        color: #6d6d6d;
    }
}
</style>
