<template>
    <awsui-layout id="manage" :style="{'width': '100%', 'height': mainHeight}">
        <awsui-aside width="280px" style="overflow: hidden;border-right: 1px solid #F2F2F2">
            <manage-main ref="manageMain" key="manageMain"/>
        </awsui-aside>
        <awsui-main>
            <manage-list v-if="visibleList" ref="manageList" :teamId="teamId" :key="Math.random()"></manage-list>
        </awsui-main>
    </awsui-layout>
</template>

<script>
    import ManageMain from "./ManageMain";
    import ManageList from "./ManageList";
    export default {
        name: "Manage",
        components: {ManageList, ManageMain},
        data() {
            return {
                mainHeight: (document.documentElement.clientHeight) + 'px',
                teamId: '',
                visibleList: false
            }
        },
        provide: function() {
            return {
                openTeam: this.openTeam
            }
        },
        mounted() {
            const that = this;
            that.$store.commit('setTopMainHeightFn',this.mainHeight);// 更新主体高度存储
            that.resize();
        },
        methods: {
            openTeam(teamId) {
                this.visibleList = false;
                this.teamId = teamId;
                this.visibleList = true;
            },
            resize() {// 窗口监听window.resize
                const that = this
                let resizeTimer = null;
                window.onresize = () => {
                    return (() => {
                        if (resizeTimer) clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function(){
                            that.mainHeight = (document.documentElement.clientHeight) + 'px';
                            that.$store.commit('setTopMainHeightFn',that.mainHeight);
                        } , 400);
                    })()
                }
            },
        },
    }
</script>

<style scoped>
    #manage >>> .awsui-main {
        padding: 0px;
    }
    #manage >>> .awsui-aside {
        padding: 0;
    }
</style>