<template>
    <div :class="classObj" class="layout-wrapper">
        <!-- <div id="ppp" style="right:0px;width:200px;height:90%;px;margin-top:3%;background:red;position: absolute;z-index:200 ;overflow-y: auto;"> -->
        <!-- <alarmcenter style="width:100px; z-index: " ></alarmcenter> -->
        <!-- </div> -->
        <component :is="layout">
            <div ref="appmain" id="APP_MAIN" />
        </component>
        <!-- 避免切换布局时app-main更新 -->
        <portal :target="`.${layout} #APP_MAIN`">
            <app-main />
        </portal>
        <settings />
        <MqttWs v-if="show" />
    </div>
</template>

<script>
import { mapState } from 'vuex'
import alarmcenter from '@/layout/components/alarmcenter/alarmcenter.vue'
import Layout1 from './layout1/index.vue'
import Layout2 from './layout2/index.vue'
import Layout3 from './layout3/index.vue'
import Layout4 from './layout4/index.vue'
import AppMain from './components/AppMain.vue'
import Settings from './components/Settings/index.vue'
import Portal from '@/components/Portal'
import MqttWs from '@/components/Mqtt/mqttWs.vue'
import { getThemeColor, dictypeData, getSysConfig } from '@/api/user'
import { addClass, removeClass } from '@/utils/className.js'

// 用来切换样式
const LayoutList = ['layout1', 'layout2', 'layout3', 'layout4']

export default {
    name: 'layout',
    components: {
        Layout1,
        Layout2,
        Layout3,
        Layout4,
        AppMain,
        Settings,
        Portal,
        alarmcenter,
        MqttWs
    },
    data() {
        return {
            appwidth: null,
            appheight: null,
            show: false
        }
    },
    computed: {
        ...mapState({
            sidebar: state => state.app.sidebar,
            device: state => state.app.device,
            needTagsView: state => state.settings.tagsView,
            fixedHeader: state => state.settings.fixedHeader
        }),
        classObj() {
            return {
                hideSidebar: !this.sidebar.opened,
                openSidebar: this.sidebar.opened,
                withoutAnimation: this.sidebar.withoutAnimation,
                mobile: this.device === 'mobile',
                fixedHeader: this.fixedHeader,
                needTagsView: this.needTagsView
            }
        },
        layout() {
            const { layout } = this.$store.state.settings
            const body = document.body
            LayoutList.forEach(item => removeClass(body, item))
            addClass(body, layout)
            return layout
        }
    },
    created() {
        //this.getdicData()
    },
    mounted() {
        //   setTimeout(() => {
        //   this.appwidth = document.getElementById("app").offsetWidth -205
        //   this.appheight = document.getElementById("app").offsetHeight -105

        //   window.sessionStorage.setItem("appwidth",this.appwidth);
        //   window.sessionStorage.setItem("appheight", this.appheight);
        //  // console.log("+++++++++++++++++++++", document.getElementById("app").offsetHeight);
        // }, 100);
        //window.sessionStorage.setItem('appheight',this.$refs.appmain.offsetHeight)

        this.show = JSON.parse(window.sessionStorage.getItem('Info')).roleCode.includes('audit_manager')
    },
    methods: {
        getdicData() {
            dictypeData().then(response => {
                const dictType = response.data
                window.sessionStorage.setItem('dictypeData', JSON.stringify(dictType))
                // setDictype(JSON.stringify(dictType))
            })
            this.getSystemData()
        },
        getSystemData() {
            getSysConfig().then(res => {
                const sysdata = res.data
                let systype = res.data.type
                window.sessionStorage.setItem('sysdata', JSON.stringify(sysdata))
                window.sessionStorage.setItem('systype', systype)
                //setSysConfig()
                this.SysConfig()
            })
        },
        SysConfig() {
            getSysConfig().then(res => {
                if (res.code == 'A0000') {
                    let systype = res.data.type
                    window.sessionStorage.setItem('systype', systype)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.layout-wrapper {
    width: 100%;
    height: 100%;
}
</style>
