<template>
    <div id='app'>
        <div :id='`fengMap${id}`' class='fengMap'></div>
        <router-view />
    </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { SFengParser } from '@saga-web/feng-map'
window.fengmapData = null
export default {
    data() {
        return {
            view: '',
            scene: '',
            id: '2',
            canvasID: '',
            key: '23f30a832a862c58637a4aadbf50a566',
            appName: '万达可视化系统',
            mapServerURL: `http://map.wanda.cn/editor`,
            mapthemeUrl: `http://map.wanda.cn/editor/webtheme`
        }
    },
    mounted() {
        // 监听页面刷新事件
        window.addEventListener('unload', this.unload)
        // 页面加载完成后，移除session里的存储的信息
        window.addEventListener('load', this.load)
        // 请求该项目下的楼层数据
        this.getFengMap()
    },
    computed: {
        ...mapGetters(['plazaId', 'fmapID', 'haveFengMap'])
    },
    methods: {
        ...mapActions(['getfmapID']),
        ...mapMutations(['SETHAVEFENGMAP']),
        unload() {
            // const { userInfo, projectId, menuStatus,manualAutoMode } = this.$store.state;
            const state = this.$store.state
            sessionStorage.setItem('state', JSON.stringify(state))
        },
        load() {
            sessionStorage.clear()
        },
        getFengMap() {
            if (!this.fmapID) {
                this.getfmapID().then(() => {
                    this.getMap()
                })
                return
            }
            this.getMap()
        },
        getMap() {
            if (!window.fengmapData) {
                window.fengmapData = new SFengParser(
                    `fengMap${this.id}`,
                    `${this.mapServerURL}/fmap/${this.fmapID}`,
                    this.key,
                    this.appName,
                    null,
                    this.mapthemeUrl
                )
                window.fengmapData.loadMap(this.fmapID, () => {
                    // 获取主题数据
                    window.fengmapData.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then(res => {
                        this.SETHAVEFENGMAP()
                    })
                })
            }
        }
    }
}
</script>
<style lang="less">
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
}

body,
button,
input,
select,
textarea {
    font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

address,
cite,
dfn,
var,
em,
i,
u {
    font-style: normal;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    border: none;
    vertical-align: middle;
}

:focus {
    outline: 0;
}

button,
input,
select,
textarea {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 滚动条样式 */

body ::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

body ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 3px;
}

body ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #e6e6e6;
    border: 1px solid #e6e6e6;
}

body ::-webkit-scrollbar-thumb:vertical:hover {
    background: #e6e6e6;
    border: 1px solid #e6e6e6;
}

#app {
    //meri-design组件select的字体颜色
    /deep/ .p-select-fakePlaceholder {
        span {
            span {
                color: #606266 !important;
                font-size: 13px;
                font-weight: normal;
            }
        }
    }
    //element 分页组件背景色
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
    }
    //element button
    /deep/ .el-button--primary,
    .p-button-primary {
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
    }
}
.clearfix::after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

.left {
    float: left;
}

.right {
    float: right;
}
html,
body {
    width: 100%;
    height: 100%;
    // min-width: 1920px;
    //   background: url('./assets/images/back.jpg') no-repeat;
}
#app {
    height: 100%;
    width: 100%;
    position: relative;
    .fengMap {
        position: fixed;
        width: 100px;
        height: 100px;
        z-index: -1;
        opacity: 0;
    }
}
// element表头背景颜色修改
.core-device-report,
.specification-update-record {
    .el-table thead th {
        background-color: #f8f9fa;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
    }
}
// 说明书更新记录 element 时间控件样式重写
.specification-update-record,
.core-device-report {
    .el-input__inner {
        height: 32px;
        line-height: 32px;
    }
    .el-date-editor .el-range__icon,
    .el-date-editor .el-range-separator {
        line-height: 26px;
        width: 8%;
    }
}
</style>