<template>
    <el-container class="mta-CIframe" direction="vertical">
        <!-- header -->
        <mta-header></mta-header>
        <!-- main -->
        <el-container class="mta-home-box" id="box">
            <router-view/>
        </el-container>
    </el-container>
</template>
<script>
    import { mapGetters }                            from 'vuex';
    import MtaHeader                                 from '@/components/client/common/header.vue';
    import MtaFooter                                 from '@/components/client/common/footer.vue';
    import MtaTransform                              from '@/components/management/Transform';
    import { initThemeColor, handleLocalstorgeData } from '@/utils/theme';
    import * as Initialization                       from '@/utils/initializationConfig';


    export default {
        name:       'cframe',
        components: {
            MtaHeader,
            MtaFooter,
            MtaTransform,
        },
        data() {
            return {
                // activeNav: '/c/Exam/full'
                routerFrom: null,
            };
        },
        computed:   {
            ...mapGetters(['getAuth', 'getThemeColor', 'getScrollTop', 'getNeedScroll']),
        },
        watch:      {
            'getScrollTop': {
                handler(a, b) {
                    if (this.getScrollTop && this.getNeedScroll) {
                        let duration = 200; // 整个过渡时长
                        let times = 10; // 十次动画
                        for (let i = 0; i < times; i++) {
                            setTimeout(() => {
                                document.getElementById('box').scrollTop = parseInt(a / times * (i + 1)) - 30;
                            }, duration / 10 * (i + 1));
                        }
                    }
                },
            },
        },

        created() {
            initThemeColor();
            // 初始化 页面标签meta ico图标
            Initialization.initializationPageConfig();
            let typeface = handleLocalstorgeData('themeFont', 'data-fontsize', '');
            handleLocalstorgeData('themeFont', 'data-fontsize', typeface);
        },
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/css/base/variables";

    $main-bg-color: #F2F2F2;
    .mta-CIframe {
        .mta-home-box {
            background-color: $main-bg-color;
            min-width: $screen-limit-width;
            /*height: calc(100vh - 60px);*/
            overflow: auto;
            transition: all 1s ease;
        }

        .mta-client-header {
            /*position:fixed;*/
            /*top: 0;*/
            /*left: 0;*/
            /*z-index: 9999;*/
            /*float:left;*/
        }
    }


</style>
