<template>
    <div ref="appheight" id="app" class="zindx" :class="themeName">
        <router-view />
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import { getThemeColor } from '@/api/user'
import { themeColor } from './settings'
import '@/assets/font_3482754_22duxhlb6kw/iconfont'

export default {
    name: 'app',
    components: {},
    data() {
        return {
            lastTime: null, //最后一次点击的时间
            currentTime: null, //当前点击的时间
            timeOut: 15 * 60 * 1000, //设置超时时间： 15分钟,
            themecolor: '',
            appheight: null,
            appwidth: null,
            themeName: '',
            echartTimer: null
        }
    },
    computed: {
        settings() {
            return this.$store.state.settings
        }
    },
    created() {
        if (process.env.VUE_APP_MODE === 'jbqr') { 
            window.addEventListener('message', function (e) {
                if (e.data.info != undefined) {
                    window.localStorage.setItem('adminInfo', e.data.info)
                }
                // window.localStorage.setItem('adminInfo', e.data)
            })
        }
        let DOMIN = window.location.origin
        let STATIC_URL = DOMIN + '/api/system-boot/image/toStream?bgImage='
        localStorage.setItem('STATIC_URL', STATIC_URL)
        this.lastTime = new Date().getTime() //网页第一次打开时，记录当前时间
        this.gettheme()
        window.echartsArr = []
        //定时清理
        setInterval(() => {
            if (window.echartsArr.length > 10) {
                window.echartsArr.splice(0, window.echartsArr.length - 10)
            }
        }, 10000)
    },
    mounted() {
        // 处理笔记本系统默认系统比例为150%带来的布局影响
        if (process.env.VUE_APP_ZOOM) {
            const m = this.detectZoom()
            document.body.style.zoom = 100 / Number(m)
        }
        setTimeout(() => {
            this.appwidth = document.body.offsetWidth - 205
            this.appheight = document.body.offsetHeight - 105
            window.sessionStorage.setItem('appwidth', this.appwidth)
            window.sessionStorage.setItem('appheight', this.appheight)
            if (process.env.VUE_APP_MODE === 'jbqr') {
                window.sessionStorage.setItem('appheight', document.body.offsetHeight - 10)
            }else if(process.env.VUE_APP_MODE === 'cgyqr'){
                window.sessionStorage.setItem('appheight', document.body.offsetHeight - 10)
            }
        }, 100)
        let timer = null
        window.addEventListener('resize', () => {
            // if (timer) {
            //     clearTimeout(timer)
            // }
            // timer = setTimeout(() => {
            console.log('窗口变化')
            this.appwidth = document.body.offsetWidth - 205
            this.appheight = document.body.offsetHeight - 105
            window.sessionStorage.setItem('appwidth', this.appwidth)
            window.sessionStorage.setItem('appheight', this.appheight)
            if (process.env.VUE_APP_MODE === 'jbqr') {
                window.sessionStorage.setItem('appheight', document.body.offsetHeight - 10)
            }else if(process.env.VUE_APP_MODE === 'cgyqr'){
                window.sessionStorage.setItem('appheight', document.body.offsetHeight - 10)
            }
            // }, 100)
        })
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.addEventListener('unload', e => this.unloadHandler(e))
        window.addEventListener('resize', this.handleResizeEcharts)
    },
    // destroyed() {
    //     window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    //     window.removeEventListener('unload', e => this.unloadHandler(e))
    //     window.removeEventListener('resize', this.handleResizeEcharts)
    // },
    methods: {
        ...mapActions({
            changeSetting: 'settings/changeSetting'
        }),
        handleResizeEcharts() {
            // 防抖
            if (this.echartTimer) {
                clearTimeout(this.echartTimer)
            }
            this.echartTimer = setTimeout(() => {
                this.echartTimer = null
                window.echartsArr.forEach(item => {
                    item.resize()
                })
            }, 200)
        },
        gettheme() {
            //主题接口
            getThemeColor().then(response => {
                const data = response.data
                var themecolor = data.color
                var logoUrl = data.logoUrl
                window.sessionStorage.setItem('logo', logoUrl)
                var title = data.name
                this.changeSetting({ themeColor: themecolor })
                this.changeSetting({ logoUrl: logoUrl })
                this.changeSetting({ title: title })
                // // 深蓝色主题
                let echartsColor = {}
                if (data.color == '#044267') {
                    require.ensure([], function (require) {
                        require('../src/styles/element-uitwo.scss')
                    })
                    this.themeName = 'element-uitwo'
                    echartsColor = {
                        WordColor: '#fff',
                        thread: '#0379A0',
                        FigureColor: [
                            '#00CCFF',
                            '#FF9933',
                            '#41E398',
                            '#0192CD',
                            '#00FFFF',
                            '#FAC800',
                            '#12AFA6',
                            '#FF680B ',
                            '#FF0000 ',
                            '#07CCCA '
                        ]
                    }
                } else if (data.color == '#065252') {
                    //   // 深绿色
                    require.ensure([], function (require) {
                        require('../src/styles/element-uione.scss')
                    })
                    this.themeName = 'element-uione'
                    echartsColor = {
                        WordColor: '#fff',
                        thread: '#268080',
                        FigureColor: [
                            '#01DFA3 ',
                            '#FAC800',
                            '#00CCFF',
                            '#00FFFF',
                            '#FF680B',
                            '#00FF00',
                            '#D5FF6B ',
                            '#FF9933 ',
                            '#5B6E96 ',
                            '#66FFCC '
                        ]
                    }
                } else if (data.color == '#4AB5A5') {
                    //   // 浅色调
                    require.ensure([], function (require) {
                        require('../src/styles/element-uithree.scss')
                    })
                    this.themeName = 'element-uithree'
                    echartsColor = {
                        WordColor: '#000',
                        thread: '#000000',
                        FigureColor: [
                            '#07CCCA ',
                            '#00BFF5',
                            '#FFBF00',
                            '#77DA63',
                            '#D5FF6B',
                            '#Ff6600',
                            '#FF9100',
                            '#5B6E96',
                            '#66FFCC',
                            '#B3B3B3'
                        ]
                    }
                } else {
                    //普通
                    require.ensure([], function (require) {
                        require('../src/styles/element-uiforth.scss')
                    })
                    this.themeName = 'element-uiforth'
                    echartsColor = {
                        WordColor: '#000',
                        thread: '#000000',
                        FigureColor: [
                            '#07CCCA ',
                            '#00BFF5',
                            '#FFBF00',
                            '#77DA63',
                            '#D5FF6B',
                            '#Ff6600',
                            '#FF9100',
                            '#5B6E96',
                            '#66FFCC',
                            '#B3B3B3',
                            '#FF00FF',
                            '#CC00FF',
                            '#FF9999'
                        ]
                    }
                }
                window.localStorage.setItem('echartsColor', JSON.stringify(echartsColor))
            })
        },
        beforeunloadHandler() {
            this._beforeUnload_time = new Date().getTime()
            //  var storage = window.localStorage;
            //  storage.clear()
        },
        unloadHandler(e) {
            this._gap_time = new Date().getTime() - this._beforeUnload_time
            // // debugger
            // // 判断是窗口关闭还是刷新
            // if (this._gap_time <= 5) {
            //     var storage = window.localStorage
            //     storage.clear()
            // }
        },
        detectZoom() {
            let ratio = 0,
                screen = window.screen,
                ua = navigator.userAgent.toLowerCase()
            if (window.devicePixelRatio !== undefined) {
                ratio = window.devicePixelRatio
            } else if (~ua.indexOf('msie')) {
                if (screen.deviceXDPI && screen.logicalXDPI) {
                    ratio = screen.deviceXDPI / screen.logicalXDPI
                }
            } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
                ratio = window.outerWidth / window.innerWidth
            }
            if (ratio) {
                ratio = Math.round(ratio * 100)
            }
            return ratio
        }
    }
}
</script>

<style>
.zindx {
    min-width: 1200px;
}

body .el-table th.gutter {
    display: table-cell !important;
}

.plTableBox.el-table__header,
.el-table__body,
.el-table__footer {
    width: 100% !important;
    table-layout: fixed !important;
}
</style>
