<!-- 底图 -->
<template>
    <div id='floor_base' v-loading='loading'>
        <div id='fengMap'></div>
        <div class='canvas-container' ref='graphy'>
            <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
        </div>
        <room-box ref='boxRoom'></room-box>
    </div>
</template>
<script>
import { SFengParser } from '@saga-web/feng-map'
import { SFloorParser } from '@saga-web/big'
import { FloorView } from '@/lib/FloorView'
import { FloorScene } from '@/lib/FloorScene'
import RoomBox from '../../views/room/index'
export default {
    data() {
        return {
            appName: '万达可视化系统',
            key: '23f30a832a862c58637a4aadbf50a566',
            mapServerURL: '/wanda',
            fmapID: '1001724_29',
            fmap: null,
            canvasWidth: 700,
            canvasHeight: 800,
            fParser: null,
            loading: true
        }
    },
    components: { RoomBox },
    methods: {
        init(floorid) {
            this.clearGraphy()
            this.scene = new FloorScene()
            this.scene.selectContainer.connect('listChange', this, this.listChange)
            this.fmap = new SFengParser('fengMap', this.mapServerURL, this.key, this.appName, null)
            // console.log(this.fmap)
            this.fmap.parseData('1001724_29', Number(floorid), res => {
                // console.log(res)
                this.fParser = new SFloorParser(null)
                // console.log(this.fParser)
                this.fParser.parseData(res)
                this.fParser.spaceList.forEach(t => {
                    t.selectable = true
                    this.scene.addItem(t)
                })
                this.fParser.wallList.forEach(t => this.scene.addItem(t))
                this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
                this.fParser.doorList.forEach(t => this.scene.addItem(t))
                this.fParser.columnList.forEach(t => this.scene.addItem(t))
                this.fParser.casementList.forEach(t => this.scene.addItem(t))
                this.view.scene = this.scene
                this.view.fitSceneToView()
                this.loading = false
            })
        },
        clearGraphy() {
            if (this.view) {
                this.view.scene = null
                return
            }
            this.view = new FloorView('canvas')
        },
        listChange(item, ev) {
            let name = ev[0][0].data.Name
            if (name.slice(name.length - 2, name.length) == '机房') {
                this.$refs.boxRoom.open(name)
            }
        }
    },
    mounted() {
        this.canvasWidth = this.$refs.graphy.offsetWidth
        this.canvasHeight = this.$refs.graphy.offsetHeight
    }
}
</script>
<style lang="less" scoped>
#floor_base {
    #fengMap {
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: -1;
    }
    .canvas-container {
        width: 100%;
        height: 100%;
    }
}
</style>