<!--
    模板布局
    @Author: tangDM
    @Date: 2019-03-12
-->
<template>
    <div :class="classObj" class="l-admin-app">
        <!-- Tip: 暂时没用到 -->
        <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />

        <!-- 头部 -->
        <navbar />

        <!-- 侧导航 -->
        <sidebar class="l-sidebar" />

        <!-- 主体 -->
        <div class="l-main-container">
            <!-- 标签页功能 -->
            <tags-view v-if="tagsView" />

            <!-- 面包屑功能 -->
            <breadcrumb v-if="breadcrumb" />

            <!-- 视图区域 -->
            <app-main />
        </div>
    </div>
</template>

<script>
import { Navbar, Sidebar, AppMain, TagsView } from "./components";
import Breadcrumb from "@/components/layout/breadcrumb";

export default {
    name: "Layout",
    data() {
        return {
            tagsView: true,
            breadcrumb: false
        };
    },
    components: {
        Navbar,
        Sidebar,
        AppMain,
        TagsView,
        Breadcrumb
    },
    computed: {
        sidebar() {
            return this.$store.state.app.sidebar;
        },
        device() {
            return this.$store.state.app.device;
        },
        classObj() {
            return {
                hideSidebar: !this.sidebar.opened,
                openSidebar: this.sidebar.opened,
                withoutAnimation: this.sidebar.withoutAnimation,
                mobile: this.device === "mobile"
            };
        }
    },
    methods: {
        handleClickOutside() {
            this.$store.dispatch("closeSideBar", { withoutAnimation: false });
        }
    }
};
</script>

<style scoped>
.drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
}

</style>
<style lang="scss">
    .l-admin-app{
        .el-card__body{
            padding: 1rem;
        }
    }
</style>
