<!--
 * @Author: your name
 * @Date: 2021-11-18 17:27:08
 * @LastEditTime: 2021-11-24 15:34:41
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /ansu-business/src/views/Layout/index.vue
-->
<template>
    <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
            <div class="logo"><img class="m1" src="../../assets/images/logo.png" /><span class="s1" v-if="!collapsed">小蜜蜂SaaS</span></div>
            <yMenu :csd="collapsed" :num='tagActive'></yMenu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0; height: 42px">
                <div class="h-d1">
                    <div v-for="(item,index) in menuTags" :key="index" :class="tagActive === index ? 'h-d1-item h-d1-item-active' : 'h-d1-item'" @click="handlerTags(index)"><span class="s1">{{item.label}}</span></div>
                </div>
                <div class="h-d2">
                    <a-icon class="h-d2-c" style="color: #e27473" type="logout" />
                    <a-icon class="h-d2-c" style="color: #b7b7b7" type="question-circle" />
                    <a-icon class="h-d2-c" type="alert" />
                    <a-icon class="h-d2-c" style="color: #979a96;margin-right: 7px;" type="user" />
                    <span class="h-d2-s">admin</span>
                </div>
            </a-layout-header>
            <div class="l-h-d1">
                <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="() => (collapsed = !collapsed)" />
                <a-breadcrumb>
                    <a-breadcrumb-item v-for="(item,index) in tags" :key="index"><a class="abt" @click="handlerBread(item)">{{item.meta.title}}</a></a-breadcrumb-item>
                </a-breadcrumb>
            </div>
            <a-layout-content :style="{ margin: '10px', padding: '13px', background: '#fff'}">
                <router-view></router-view>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script>
import yMenu from "./yMenu";
export default {
    components: {
        yMenu,
    },
    watch: {
        $route: {
            handler(val) {
                this.tags = val.matched;
            },
            immediate: true,
        },
        tagActive:{
            handler(val) {
                 sessionStorage.setItem('modal',this.menuTags[val].value)
            },
            immediate: true,
        }
    },
    data() {
        return {
            collapsed: false,
            tagActive: 0,
            menuTags: [
                {
                    label: "基础功能",
                    value: "basic"
                },
                {
                    label: "缴费管理",
                    value: "payment"
                },
                {
                    label: "智慧商城",
                    value: "smartMall"
                },
                {
                    label: "运营管理",
                    value: "operation"
                },
                {
                    label: "设置",
                    value: "setting"
                }
            ],
        };
    },
    methods: {
        handlerBread(row) {
            let path = row.path || "/";
            this.$router.push(path);
        },
        handlerTags(n) {
            this.tagActive = n;
        }
    },
};
</script>
<style lang="less" scoped>
#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    .m1 {
       height: 24px;
       background: #fff;
       padding: 3px;
       border-radius: 2px;
    }
    .s1 {
        display: block;
        color: #d6d6d6;
        font-size: 16px;
        margin-left: 10px;
        font-weight: 500;
    }
}
.h-d1 {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    line-height: 1;
    .h-d1-item {
        width: 102px;
        height: 100%;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        .s1 {
            display: inline-block;
            height: 100%;
            border-bottom: 2px solid transparent;
        }
    }
    .h-d1-item-active {
        .s1 {
             border-bottom: 2px solid #5679b1;
        }
       
    }
}
.h-d2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .h-d2-c {
        display: inline-block;
        margin-left: 24px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
    }
    .h-d2-s {
        display: inline-block;
        margin-right: 24px;
    }
}

.l-h-d1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}
.abt {
    cursor: pointer;
}
</style>