<template>
    <div id="index" ref="appRef" style="position: relative">
        <div id="screenContent" class="business" :style="{position:'absolute',top:0,pointerEvents:pointerEvents}">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <TopMenu @modelChange="modelChange"/>
                <div class="body-box">
                    <router-view/>
                    <div class="content-right-style" style="pointer-events: none">
                        <MenuRight/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import drawMixin from '../../utils/drawMixin';
    import TopMenu from './top.vue';
    import MenuConfig from '../../menuConfig';
    import MenuRight from '../homePages/threeDimensionalSchoolModel/menuRight.vue';
    export default{
        mixins: [drawMixin],
        data(){
            return {
                loading: true,
                pointerEvents:"auto",
            }
        },
        mounted(){
            this.cancelLoading();
        },
        watch:{
            $route:{
                handler(val,oldval){
                    let path = val.path;
                    //非工作台添加背景图 工作台根据主题动态设定
                    if(path !== '/workBench/main'){
                        document.getElementById("screenContent").style.backgroundImage = 'url(' + require('../../assets/pageBg.jpg') + ')';
                        document.getElementById("app").style.backgroundColor = "#020308";
                    }
                },
                // 深度观察监听
                deep: true
            }
        },
        methods: {
            cancelLoading() {
                setTimeout(() => {
                    this.loading = false
                }, 500)
            },
            modelChange:function (path) {
                this.$router.replace({path:path});
            }
        },
        components:{
            TopMenu,
            MenuRight
        }
    }
</script>
<style lang="scss">
    @import '../../assets/scss/index.scss';
    .business{
        padding: 0!important;
        /*background-image: url("../../assets/pageBg.jpg");*/
        .host-body{
            .body-box{
                position: relative;
                .content-right-style{
                    width: auto;
                    height: 800px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    right: 0;
                }
            }
        }

    }
</style>