<template>
    <el-container :style="appMain" ref="main">
        <el-header v-show="flag.showHeader" class="app-head" :height="state.size.headHeight">

            <Head :title="title || state.lang.title" @updatePwd="pwd => emit('updatePwd', pwd)" @logout="emit('logout')" />
        </el-header>
        <el-container id="container">
            <el-aside v-show="flag.showAside" :width="state.size.asideWidth">
                <MenuTree :data="menus" :type="type" />
            </el-aside>
            <el-main class="app-main">
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { MenuTree, Head } from "noob"

const { state, commit } = useStore();
const emit = defineEmits(['updatePwd', 'logout']);
const router = useRouter()
const appMain = reactive({
    height: window.innerHeight + 'px',
    backgroundColor: state.style.bodyBg
    // backgroundImage: "url(" + publik.background + ")",
});
const main = ref();
const flag = reactive({
    showHeader: true,
    showAside: true
})

const props = defineProps({
    title: {
        type: String,
        default: null,
    },
    menus: {
        type: Array<any>(),
        default: null
    },
    type: {
        type: String,
        default: 'def',
    }
});

const onResize = () => {
    appMain.height = window.innerHeight + 'px';
}

onMounted(() => {
    router.push("/")
    window.onresize = onResize;
});

</script>

<style lang='scss'>
@charset "UTF-8";

.app-main {
    box-shadow: 2px 2px 5px 3px #e5e6eb;
    border-radius: 4px;
    margin: 3px 0px 0px 3px !important;
    padding: 5px !important;
}

.el-header,
.main-head,
.main-table {
    padding: 0;
}

#app,
#container,
.app-main {
    background-color: v-bind('state.style.bodyBg');
    color: v-bind('state.style.color');
    font-size: v-bind('state.size.fontSize');
}

.app-head {
    padding: 0px !important;
}
</style>