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

            <Head :title="title" @updatePwd="pwd => emit('updatePwd', pwd)" @logout="emit('logout')" :styleAble="styleAble"
                :sizeAble="sizeAble" :langAble="langAble" :center="center" :username="username" :closeAble="closeAble" />
        </el-header>
        <el-container id="container">
            <el-aside v-show="state.size.asideWidth != '0px'" :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, Api } from "noob-mengyxu"

const { state, commit, dispatch } = useStore();
const emit = defineEmits(['updatePwd', 'logout']);
const router = useRouter()
const appMain = reactive({
    height: window.innerHeight + 'px',
    backgroundColor: state.style.bodyBg
});
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',
    },
    styleAble: {
        type: Boolean,
        default: true,
    },
    sizeAble: {
        type: Boolean,
        default: true,
    },
    langAble: {
        type: Boolean,
        default: true,
    },
    center: {
        type: String,
        default: 'home',
    },
    checkUser: {
        type: Boolean,
        default: true,
    },
    username: {
        type: String,
        default: null,
    },
    closeAble: {
        type: Boolean,
        default: false,
    },
});

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

const getUser = () => {
    Api.pub.getInfo().then((rsp) => {
        if (rsp) {
            commit('updateState', ['user', rsp]);
        } else {
            router.push('/login');
        }
    });
};

const onLogout = () => {
    Api.pub.logout().then(rsp => {
        getUser();
    });
}

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

</script>

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

body {
    font-size: v-bind('state.size.fontSize') !important;
    font-family: "Microsoft YaHei";
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

.app-main {
    box-shadow: 2px 2px 5px 3px #e5e6eb;
    border-radius: 4px;
    margin: 3px 0px 0px 3px !important;
    padding: v-bind('state.size.mainPad') !important;
    height: v-bind('state.size.mainHeight');
}

.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;
}

.form-item {
    margin-right: v-bind('state.size.searchMargin');

    &.full {
        width: 100%;
        margin-right: 0px;
    }
}

#app {

    .el-input {
        --el-input-bg-color: v-bind('state.style.itemBg') !important;
        --el-input-text-color: v-bind('state.style.color') !important;
    }

    .el-popper {
        --el-bg-color-overlay: v-bind('state.style.itemBg') !important;
        --el-fill-color-light: v-bind('state.style.bodyBg') !important;
        text-align: left;
    }

    .el-dialog {
        --el-dialog-bg-color: v-bind('state.style.bodyBg') !important;
    }

    * {
        --el-text-color-regular: : v-bind('state.style.color') !important;
        --el-text-color-primary: v-bind('state.style.color') !important;
        --el-disabled-bg-color: v-bind('state.style.itemBg') !important;
    }

    *::selection {
        background-color: v-bind('state.style.selectionBg');
        color: v-bind('state.style.selectionColor');
    }
}
</style>