<!-- 底图 -->
<template>
    <div id='floor_base' v-loading='loading' ref='graphy'>
        <div id='fengMap'></div>
        <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
        <!-- 地图底部操作按钮 -->
        <div class='strip-bottom'>
            <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' ref='canvasFun'></canvasFun>
        </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'
import canvasFun from '@/components/floorMap/canvasFun'
import { readGroup } from '@/api/public'
import { STopologyParser } from '@/lib/parsers/STopologyParser'
import { mapGetters } from 'vuex'
// import { uuid } from "@/components/mapClass/until";
let fengmap = null

export default {
    data() {
        return {
            appName: '万达可视化系统',
            key: '23f30a832a862c58637a4aadbf50a566',
            mapServerURL: `/wdfn`,
            canvasWidth: 1100,
            canvasHeight: 800,
            loading: false,
            view: null,
            isQuerying: false, // 限制重复查询
            urlMsg: {}
        }
    },
    components: { RoomBox, canvasFun },
    computed: {
        ...mapGetters(['plazaId', 'fmapID'])
    },
    methods: {
        init(floorid) {
            if (this.isQuerying) {
                console.log('正在查询...')
                return
            }
            console.log(this.fmapID)
            this.isQuerying = true
            this.clearGraphy()
            this.scene = new FloorScene()
            this.scene.selectContainer.connect('listChange', this, this.listChange)
            if (!fengmap) {
                fengmap = new SFengParser('fengMap', `${this.mapServerURL}/${this.fmapID}`, this.key, this.appName, null)

                fengmap.loadMap(this.fmapID, res => {
                    this.floorList = res
                    this.parserData(floorid)
                })
                this.readGroup().then(data => {
                    const parserData = new STopologyParser(null)
                    parserData.parseData(data.data.Data[0].Elements)
                    // 多边形
                    parserData.zoneLegendList.forEach(t => {
                        this.scene.addItem(t)
                        this.scene.Nodes.push(t)
                    })
                    // 增加文字
                    parserData.textMarkerList.forEach(t => {
                        this.scene.addItem(t)
                        this.scene.Markers.push(t)
                    })
                    // 增加图片
                    parserData.imageMarkerList.forEach(t => {
                        this.scene.addItem(t)
                        this.scene.Markers.push(t)
                    })
                    // 增加直线
                    parserData.lineMarkerList.forEach(t => {
                        this.scene.addItem(t)
                        this.scene.Markers.push(t)
                    })
                    // 增加图标类图例
                    parserData.imageLegendList.forEach(t => {
                        this.scene.addItem(t)
                        this.scene.Nodes.push(t)
                    })
                    // 增加管线类
                    // 增加图标类图例
                    parserData.relationList.forEach(t => {
                        this.scene.addItem(t)
                        this.scene.Relations.push(t)
                    })
                    this.view.fitSceneToView()
                })
            } else {
                this.parserData(floorid)
            }
        },
        parserData(floor) {
            if (this.floorList[floor]) {
                console.log(this.floorList[floor])
                fengmap.parseData(this.floorList[floor], res => {
                    if (res.err) {
                        console.log(res.err)
                        return
                    }
                    const fParser = new SFloorParser(null)
                    fParser.parseData(res)
                    fParser.spaceList.forEach(t => {
                        t.selectable = true
                        this.scene.addItem(t)
                    })
                    fParser.wallList.forEach(t => this.scene.addItem(t))
                    fParser.virtualWallList.forEach(t => this.scene.addItem(t))
                    fParser.doorList.forEach(t => this.scene.addItem(t))
                    fParser.columnList.forEach(t => this.scene.addItem(t))
                    fParser.casementList.forEach(t => this.scene.addItem(t))
                    this.view.scene = this.scene
                    this.view.fitSceneToView()
                    this.loading = false
                    this.isQuerying = false
                    console.log('success')
                })
            } else {
                console.log('楼层不正确')
            }
        },
        clearGraphy() {
            console.log(new FloorView('canvas'))
            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)
            }
        },
        // 适配底图到窗口
        fit() {
            this.view.fitSceneToView()
        },
        // 保存为png
        savePng() {
            this.view.saveImage(`1.png`, 'png')
        },
        // 保存为svg
        saveSvg() {
            this.view.saveSceneSvg(`1.svg`, 6400, 4800)
        },
        // 保存为json
        saveJson() {
            console.log(2222)
            this.view.saveFloorJson(`1.json`)
        },
        // 缩放
        scale(val) {
            if (!this.view) {
                return
            }
            let scale = this.view.scale
            this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
        },
        // 读取数据
        readGroup() {
            const data = {
                categoryId: this.urlMsg.categoryId,
                projectId: this.urlMsg.ProjectID
            }
            return readGroup(data)
        }
        // handleFmapID(fmapID) {
        //     if (fmapID) {
        //         this.fmapID = fmapID
        //     }
        // }
    },
    watch: {
        // '$store.state.fmapID': 'handleFmapID'
    },
    mounted() {
        this.$nextTick(() => {
            // console.log('-------------')
            // console.log(this.$store.state.fmapID)
            // console.log('-------------')
        })
        setTimeout(() => {
            console.log(this.$store.state.fmapID)
        }, 50000)
        if (window.screen.height == '768') {
            this.canvasWidth = this.$refs.graphy.offsetWidth
            this.canvasHeight = this.$refs.graphy.offsetHeight - 100
        } else {
            this.canvasWidth = this.$refs.graphy.offsetWidth
            this.canvasHeight = this.$refs.graphy.offsetHeight
        }
    },
    created() {
        this.urlMsg = {
            categoryId: this.$cookie.get('categoryId') || 'LCGN',
            ProjectID: this.plazaId,
            BuildingID: '1',
            FloorID: this.$cookie.get('floorMapId') || 'f1',
            fmapID: this.fmapID
        }
        console.log('this.urlMsg', this.urlMsg)
    }
}
</script>
<style lang="less" scoped>
#floor_base {
    position: relative;
    #fengMap {
        position: fixed;
        width: 100px;
        height: 100px;
        z-index: -1;
    }
    .strip-bottom {
        position: absolute;
        right: 0;
        bottom: 40px;
        width: 100%;
    }
}
</style>