
<!-- 底图 -->
<template>
    <div id='floor_base' v-loading='loading' ref='graphy'>
        <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
        <!-- 地图底部操作按钮 -->
        <div class='strip-bottom'>
            <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
        </div>
        <room-box ref='boxRoom'></room-box>
        <equip-detail ref='equipDetail' :key='equipKey'></equip-detail>
        <el-popover ref='popover' placement='right' trigger='manual' v-model='visible' width='380'>
            <!-- <div style="text-align: right;margin-bottom: 10px;">
                <span style="float: left;">对应的工程信息化信息</span>
                <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
            </div>-->
            <!-- 点击图标,出现的弹窗 -->
            <div v-if='equipIds.length && !tabData.pointData.length' style='margin-top: 10px;'>
                <el-table
                    :data='tabData.tableData'
                    max-height='235'
                    style='width: 100%'
                    @row-click='handleClickEquipDetail'
                    v-loading='eqLoading'
                    :cell-class-name='tableCellClassName'
                >
                    <el-table-column prop='sbjc' label='设备简称' width='144' :show-overflow-tooltip='true'></el-table-column>
                    <el-table-column prop='sl' width='50' label='数量' :show-overflow-tooltip='true'></el-table-column>
                    <el-table-column prop='sb_status' width='80' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
                    <el-table-column prop='sbglgs' width='80' label='管理归属' :show-overflow-tooltip='true'></el-table-column>
                    <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
                    <el-table-column label="" width="80" :show-overflow-tooltip='true'>
                        <template slot-scope="scope">
                            <span class="equip-detail-btn">台账详情</span>
                        </template>
                    </el-table-column>-->
                </el-table>
                <!-- <div style="text-align: right; margin-top: 10px;">
                    <el-button size="mini" type="primary" @click="visible = false">关闭</el-button>
                </div>-->
            </div>
            <!-- 点击空间,出现的弹窗 -->
            <div v-else-if='!equipIds.length && tabData.pointData.length' style='margin-top: 10px;'>
                <ul class='pointList'>
                    <li v-for='point in tabData.pointData' :key='point.id' @click='handleClickPointDeatil(point)'>
                        <span :title='point.name'>{{point.name}}</span>
                        <a>查看</a>
                    </li>
                </ul>
                <div style='text-align: right; margin-top: 10px;'>
                    <el-button v-show='showBtnWell' size='mini' type='primary' @click='handleClickHightLight(tabData.pointData)'>查看控制商铺范围</el-button>
                    <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
                </div>
            </div>
            <!-- 既有空间,又有设备的弹窗 -->
            <el-tabs v-else-if='equipIds.length && tabData.pointData.length' v-model='activeName'>
                <el-tab-pane label='设备设施' name='equip'>
                    <el-table
                        :data='tabData.tableData'
                        max-height='235'
                        style='width: 100%'
                        @row-click='handleClickEquipDetail'
                        v-loading='eqLoading'
                    >
                        <el-table-column prop='sbjc' label='设备简称' width='164' :show-overflow-tooltip='true'></el-table-column>
                        <el-table-column prop='sl' width='50' label='数量' :show-overflow-tooltip='true' align='right'></el-table-column>
                        <el-table-column prop='sb_status' width='70' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
                        <el-table-column prop='sbglgs' width='70' label='管理归属' :show-overflow-tooltip='true'></el-table-column>
                        <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
                        <el-table-column label="" width="80" :show-overflow-tooltip='true'>
                            <template slot-scope="scope">
                                <span class="equip-detail-btn">台账详情</span>
                            </template>
                        </el-table-column>-->
                    </el-table>
                    <div style='text-align: right; margin-top: 10px;'>
                        <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
                    </div>
                </el-tab-pane>
                <el-tab-pane label='位置' name='point'>
                    <ul class='pointList'>
                        <li v-for='point in tabData.pointData' :key='point.id' @click='handleClickPointDeatil(point)'>
                            <span :title='point.name'>{{point.name}}</span>
                            <a>查看</a>
                        </li>
                    </ul>
                    <div style='text-align: right; margin-top: 10px;'>
                        <el-button v-show='showBtnWell' size='mini' type='primary' @click='handleClickHightLight(tabData.pointData)'>查看控制商铺范围</el-button>
                        <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-popover>
        <span class='popStyle' :style='popoverPosition' v-popover:popover></span>
    </div>
</template>
<script>
/**
 * @author yunxing
 * @date 2020年08月21日11:04
 * @description 停用,已拆除的状态,使用message进行提示
 */
import { SFengParser, ProjectRf } from '@saga-web/feng-map'
import { SFloorParser, ItemOrder, ItemColor, SPolygonItem, SBoardItem } 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, queryStatis, graphQuery } from '@/api/public'
import { queryShops, queryAssetAll } from '@/api/equipmentList.js'
import { STopologyParser } from '@/lib/parsers/STopologyParser'
import { mapGetters, mapActions } from 'vuex'
import { SImageItem, SImageShowType, SGraphItem } from '@saga-web/graph/lib'
import { SColor } from '@saga-web/draw/lib'
import bus from '@/utils/bus.js'
import { TipelineItem } from '../../lib/items/TipelineItem'
import { SImageLegendItem } from '../../lib/items/SImageLegendItem'
import equipDetail from '../../views/equipment/table/equipDetail'
import { debounce } from 'lodash'
// import { uuid } from "@/components/mapClass/until";

export default {
    data() {
        return {
            appName: '万达可视化系统',
            key: '23f30a832a862c58637a4aadbf50a566',
            mapServerURL: `http://map.wanda.cn/editor`,
            canvasWidth: 600,
            canvasHeight: 800,
            loading: false, // 限制重复查询
            view: null,
            urlMsg: {},
            canvasID: 'canvas',
            floorid: '', //楼层id
            topologyParser: null, // 解析器数据
            fParser: null, // 底图解析器
            wellMap: {}, // 电井控制商铺映射
            activeName: 'equip',
            popoverPosition: {
                top: 0,
                left: 0,
            },
            statusTextPosition: {
                top: 0,
                left: 0,
            },
            visible: false,
            eqLoading: true,
            equipIds: [],
            tabData: {
                tableData: [],
                pointData: [],
            },
            activeItem: null,
            showBtnWell: false,
            count: 0, // 顶楼为多张图时计数器
            equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
            // TODO:  ['运行', '停用', '已拆除']
            statusDisabled: ['运行', '停用', '已拆除'], //显示红色的设备状态
        }
    },
    props: {
        id: {
            default: '1',
            type: String,
        },
        categoryId: {
            default: '',
            type: String,
        },
        // 弹窗高度，适配底图高度使用
        modalHeight: {
            type: [Number, undefined],
            default: undefined,
        },
        loadName: null,
        type: null,
    },
    components: { RoomBox, canvasFun, equipDetail },
    computed: {
        ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
    },
    methods: {
        handleClickLegendItem(item, events) {
            this.tabData = { tableData: [], pointData: [] }
            this.equipIds = []
            this.showBtnWell = false
            this.visible = false
            this.activeItem = null
            this.isLoading = true
            if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
                const e = events[0]
                this.activeItem = item
                item.data.AttachObjectIds.forEach((v) => {
                    if (v.type == 'Image') {
                        if (v.id) {
                            this.equipIds.push(v.id)
                        }
                        // this.tabData.tableData.push(v);
                    } else if (v.type == 'Zone') {
                        this.tabData.pointData.push(v)
                    }
                })
                if (this.equipIds.length) {
                    this.eqLoading = true
                    let data = {
                        plazaId: this.$store.state.plazaId,
                        page: 1,
                        size: this.equipIds.length,
                    }
                    let postParams = {
                        assetnumList: this.equipIds,
                    }
                    queryAssetAll({ data, postParams }).then((res) => {
                        this.tabData.tableData = res.data.data
                        this.eqLoading = false
                        console.log(this.tabData)
                    })
                }
                this.popoverPosition.top = `${e.clientY}px`
                this.popoverPosition.left = `${e.clientX}px`
                this.$nextTick(() => {
                    if (
                        item.data.GraphElementId == '100050' ||
                        item.data.GraphElementId == '100055' ||
                        item.data.GraphElementId == '100056' ||
                        item.data.GraphElementId == '100057'
                    ) {
                        //判断是否为电井
                        this.showBtnWell = true
                    }
                    this.visible = true
                })
            }
        },
        // 查看浮层设备详情
        handleClickEquipDetail: debounce(function (row, column, event) {
            // 设备状态为停用或已拆除时,弹出消息
            if (this.statusDisabled.includes(row?.sb_status)) {
                this.$message({
                    message: `当前设备为“${row.sb_status}”状态，请前往编辑器重新编辑`,
                    type: 'warning',
                })
                return true
            }
            if (row.assetnum) {
                this.equipKey++
                this.$nextTick(() => {
                    this.$refs.equipDetail.open({ row: JSON.stringify(row) })
                })
            }
        }, 200),
        // handleClickEquipDetail(row) {
        //     if (row.assetuid) {
        //         window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
        //     }
        // },
        // 查看浮层位置详情
        handleClickPointDeatil(point) {
            if (point.id && this.activeItem) this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id })
        },
        handleClickHightLight(pointData) {
            this.clearHightLight()
            pointData.forEach((point) => {
                let location = point.id ? point.id : ''
                if (this.wellMap.hasOwnProperty(location)) {
                    this.wellMap[location].forEach((item) => {
                        item.highLightFlag = true
                        item.zOrder = 30
                    })
                } else {
                    let getParams = {
                        plazaId: this.plazaId,
                        floor: this.floorid,
                        keyword: `${location}:wellnum;`,
                    }
                    queryShops({ getParams }).then((res) => {
                        let shopsnumList = []
                        let shopsnumItemList = []
                        if (res.data && res.data.length) {
                            for (let floor in res.data[0]) {
                                if (res.data[0][floor].length) {
                                    res.data[0][floor].forEach((v) => {
                                        shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
                                    })
                                }
                            }
                        }
                        if (shopsnumList.length) {
                            this.fParser.spaceList.forEach((item) => {
                                if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
                                    item.highLightFlag = true
                                    item.zOrder = 30
                                    shopsnumItemList.push(item)
                                }
                            })
                            this.wellMap[location] = shopsnumItemList
                        }
                    })
                }
            })
            this.visible = false
        },
        ...mapActions(['getfmapID']),
        init(floorid) {
            this.loading = true
            this.floorid = floorid
            this.mapSize()
            this.$refs.canvasFun.isShow = false
            setTimeout(() => {
                this.clearGraphy()
                this.scene = new FloorScene()
                if (this.haveFengMap == 1) {
                    this.scene.selectContainer.connect('listChange', this, this.listChange)
                    if (this.canvasID != `canvas${this.id}`) {
                        this.canvasID = `canvas${this.id}`
                    }
                    this.getGraphDetail().then((res) => {
                        if (res.Content.length == 1) {
                            const data = res.Content[0]
                            if (data.MaxY && data.MinX) {
                                window.fengmapData.maxY = data.MaxY
                                window.fengmapData.minX = data.MinX
                            }
                        }
                        this.parserData(floorid)
                    })
                    // this.parserData(floorid);
                } else if (this.haveFengMap == 0) {
                    this.view.scene = this.scene
                    this.readGraph()
                } else {
                    this.loading = false
                }
            }, 100)
        },
        parserData(floor) {
            if (floor == 'g80') {
                // 屋顶
                if (window.fengmapData.frImg) {
                    const pj = this.fmapID.split('_')[0]
                    // 单张图片
                    if (!ProjectRf[pj]) {
                        let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
                        imgItem.showType = SImageShowType.AutoFit
                        imgItem.connect('imgLoadOver', this, () => {
                            this.readGraph()
                        })
                        this.scene.addItem(imgItem)
                        this.view.scene = this.scene
                        // this.view.fitSceneToView()
                    } else {
                        // 多张图
                        try {
                            // 初始化0
                            this.count = 0
                            ProjectRf[pj].forEach((t) => {
                                const item = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${t.name}`)
                                item.width = t.width
                                item.height = t.height
                                item.moveTo(t.x, t.y)
                                item.connect('imgLoadOver', this, () => {
                                    this.countRf(ProjectRf[pj].length)
                                })
                                this.scene.addItem(item)
                            })
                            this.view.scene = this.scene
                        } catch (e) {
                            console.log(e)
                        }
                    }
                } else {
                    // 屋顶图不为图片
                    this.readBaseMap(floor)
                }
            } else {
                if (window.fengmapData.gnameToGid[floor]) {
                    this.readBaseMap(floor)
                } else {
                    console.log('楼层不正确')
                }
            }
        }, // 解析底图
        // 解析楼地板
        loadBoard(floor) {
            window.fengmapData.loadFloor(floor, (res) => {
                const zone = new SBoardItem(null, res)
                this.scene.addItem(zone)
            })
        },
        readBaseMap(floor) {
            this.loadBoard(window.fengmapData.gnameToGid[floor])
            window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], (res) => {
                if (res.err) {
                    console.log('errr', res.err)
                    return
                }
                this.fParser = new SFloorParser(null)
                this.fParser.parseData(res)
                this.fParser.spaceList.forEach((t) => {
                    this.scene.addItem(t)
                    t.nameSize = 12
                    t.nameColor = '#2a2a2a'
                    if (t.data.Name && this.bunkObj[t.data.Name]) {
                        t.name = this.bunkObj[t.data.Name].brandname
                    } else {
                        // t.name = t.data.Name
                        t.name = ''
                    }
                })
                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.readGraph()
            })
        },
        readGraph() {
            this.readGroup(this.floorid)
                .then((data) => {
                    if (data.Result == 'failure') {
                        this.$store.commit('SETISMESSAGE', false)
                        this.view.fitSceneToView()
                        this.view.minScale = this.view.scale
                        if (this.$refs.canvasFun) {
                            this.$refs.canvasFun.everyScale = this.view.scale
                        }
                        this.loading = false
                        return
                    } else {
                        if (
                            data.Data[0].Elements.Nodes.length === 0 &&
                            data.Data[0].Elements.Markers.length === 0 &&
                            data.Data[0].Elements.Relations.length === 0
                        ) {
                            this.$store.commit('SETISMESSAGE', false)
                        } else {
                            this.$store.commit('SETISMESSAGE', true)
                        }
                    }
                    // 无返回Data处理
                    if (!(data.Data && data.Data.length)) {
                        this.view.fitSceneToView()
                        this.view.minScale = this.view.scale
                        if (this.$refs.canvasFun) {
                            this.$refs.canvasFun.everyScale = this.view.scale
                        }
                        return false
                    }
                    // 请求回来的备注
                    if (data.Data && data.Data[0].Note) {
                        let note = data.Data[0].Note
                        bus.$emit('queryRemarksMethods', note)
                    } else {
                        bus.$emit('queryRemarksMethods', '')
                    }
                    //土建装饰的图例展示
                    if (this.$cookie.get('categoryId') == 'SCPZ') {
                        let scpzTable = [],
                            arr = []
                        scpzTable = data.Data[0].Elements.Nodes || []
                        console.log(scpzTable)
                        if (scpzTable.length > 0) {
                            scpzTable.forEach((e) => {
                                if (e.Properties.ItemExplain) {
                                    let obj = e
                                    arr.push(obj)
                                }
                            })
                        }
                        console.log(arr)
                        this.$store.commit('SETSCPZTABLE', arr)
                    }
                    if (data.Data[0].Elements.Nodes.length > 0) {
                        this.$store.commit('SETTYPENUM', '')
                        let Lengd = data.Data[0].Elements.Nodes
                        Lengd.forEach((el) => {
                            if (el.Type == 'Image' && el.Num > 1) {
                                console.log(el.Num)
                                this.$store.commit('SETTYPENUM', el.Num)
                            }
                        })
                    }
                    // 放到后边 $cookie graphId
                    this.$cookie.set('graphId', data.Data[0].ID, 3)
                    if (this.$cookie.get('graphId')) {
                        // 得到graphId 就请求图例
                        // 除土建装饰之外的图例展示 包括楼层功能
                        bus.$emit('queryViewMethods')
                    }
                    this.topologyParser = new STopologyParser(null)
                    this.topologyParser.parseData(data.Data[0].Elements)
                    // 多边形
                    this.topologyParser.zoneLegendList.forEach((t) => {
                        this.scene.addItem(t)
                        t.connect('legendItemClick', t, this.handleClickLegendItem)
                    })
                    // 增加文字
                    this.topologyParser.textMarkerList.forEach((t) => {
                        this.scene.addItem(t)
                    })
                    // 增加图片
                    this.topologyParser.imageMarkerList.forEach((t) => {
                        this.scene.addItem(t)
                    })
                    // 增加直线
                    this.topologyParser.lineMarkerList.forEach((t) => {
                        this.scene.addItem(t)
                    })
                    // 增加图标类图例
                    this.topologyParser.imageLegendList.forEach((t) => {
                        this.scene.addItem(t)
                        t.connect('legendItemClick', t, this.handleClickLegendItem)
                    })
                    // 增加管线类
                    // 增加图标类图例
                    this.topologyParser.relationList.forEach((t) => {
                        t.selectable = true
                        this.scene.addItem(t)
                        t.connect('legendItemClick', t, this.handleClickLegendItem)
                    })
                    this.view.fitSceneToView()
                    this.view.minScale = this.view.scale
                    if (this.$refs.canvasFun) {
                        this.$refs.canvasFun.everyScale = this.view.scale
                    }
                    this.loading = false
                })
                .catch(() => {
                    this.loading = false
                })
        },
        // 顶楼为多张图时计数器
        countRf(len) {
            this.count++
            if (len == this.count) {
                this.readGraph()
            } else {
                console.log('所有图片未加载完成')
            }
        },
        clearGraphy() {
            if (this.view) {
                this.view.scene = null
                return
            }
            this.view = new FloorView(`canvas${this.id}`)
        },
        listChange(item, ev) {
            // if (ev[0].length) {
            //     let selectItem1 = ev[0][0],
            //         location = selectItem1.data.AttachObjectIds[0] ? selectItem1.data.AttachObjectIds[0].id : ''
            //     // 空间类型都可打开弹窗（除防火分区 编号100131，商管办公室 编号100112，铺装石材 编号100129）
            //     if (selectItem1.data.GraphElementType == 'Zone') {
            //         if (
            //             selectItem1.data.GraphElementId != '100131' &&
            //             selectItem1.data.GraphElementId != '100112' &&
            //             selectItem1.data.GraphElementId != '100129'
            //         ) {
            //             if (location) {
            //                 this.$refs.boxRoom.open({ name: selectItem1.name, type: this.type, location: location })
            //             }
            //         }
            //     }
            //     // // 选中电井设置电井关联的商铺高亮
            //     // this.setHightLight(ev[0])
            // }
            // else {
            // this.clearHightLight()
            // }
            if (ev[0].length) {
                if (!(ev[0][0] instanceof SPolygonItem || ev[0][0] instanceof TipelineItem || ev[0][0] instanceof SImageLegendItem)) {
                    this.visible = false
                }
            } else {
                this.visible = false
            }
            this.clearHightLight()
        },
        // 选中电井关联的商铺高亮
        setHightLight(arr) {
            this.clearHightLight()
            arr.forEach((item) => {
                let location = item.data.AttachObjectIds[0] ? item.data.AttachObjectIds[0].id : ''
                // 添加了位置类型并且选中的类型为电井类型
                if (
                    (item.data.GraphElementId == '100050' ||
                        item.data.GraphElementId == '100055' ||
                        item.data.GraphElementId == '100056' ||
                        item.data.GraphElementId == '100057') &&
                    location
                ) {
                    if (this.wellMap.hasOwnProperty(location)) {
                        this.wellMap[location].forEach((item) => {
                            item.highLightFlag = true
                            item.zOrder = 30
                        })
                    } else {
                        let getParams = {
                            plazaId: this.plazaId,
                            floor: this.floorid,
                            keyword: `${location}:wellnum;`,
                        }
                        queryShops({ getParams }).then((res) => {
                            let shopsnumList = []
                            let shopsnumItemList = []
                            if (res.data && res.data.length) {
                                for (let floor in res.data[0]) {
                                    if (res.data[0][floor].length) {
                                        res.data[0][floor].forEach((v) => {
                                            shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
                                        })
                                    }
                                }
                            }
                            if (shopsnumList.length) {
                                this.fParser.spaceList.forEach((item) => {
                                    if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
                                        item.highLightFlag = true
                                        item.zOrder = 30
                                        shopsnumItemList.push(item)
                                    }
                                })
                                this.wellMap[location] = shopsnumItemList
                            }
                        })
                    }
                }
            })
        },
        // 清除电井关联商铺的高亮状态
        clearHightLight() {
            ItemColor.spaceHighColor = new SColor('#FBF2CC')
            for (let key in this.wellMap) {
                this.wellMap[key].forEach((item) => {
                    item.highLightFlag = false
                    item.zOrder = ItemOrder.spaceOrder
                })
            }
        },
        // 适配底图到窗口
        fit() {
            this.view.fitSceneToView()
        },
        // 保存为png
        savePng() {
            // this.view.saveImage(`${this.loadName}.png`, 'png')
            this.view.saveImageSize(`${this.loadName}.png`, 'png', 1920 * 2, 1080 * 2)
            //console.log(`${this.loadName}.png`)
        },
        // 保存为svg
        saveSvg() {
            this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
        },
        // 保存为json
        saveJson() {
            this.view.saveFloorJson(`${this.loadName}.json`)
        },
        // 缩放
        scale(val) {
            if (!this.view) {
                return
            }
            let scale = this.view.scale
            this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
        },
        // 小眼睛控制显示铺位名称
        showText(val) {
            // this.topologyParser.zoneLegendList.forEach(t => {
            //     t.showText = val
            // })
            this.fParser.spaceList.forEach((t) => {
                t.showBaseName = val
            })
        },
        // 读取数据
        readGroup(FloorID) {
            const data = {
                BuildingID: '1',
                FloorID: FloorID,
                categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
                projectId: this.urlMsg.ProjectID,
                Pub: true,
            }
            return readGroup(data)
        },
        // 获取图最大最小值
        getGraphDetail() {
            const categoryId = this.categoryId ? this.categoryId : this.$cookie.get('categoryId')
            const data = {
                Filters: `categoryId='${categoryId}';projectId='${this.urlMsg.ProjectID}';BuildingID='1';FloorID='${this.floorid}';isPub=true`,
            }
            return graphQuery(data)
        },
        // 地图尺寸
        mapSize() {
            this.canvasWidth = this.$refs.graphy.offsetWidth
            if (window.screen.height == '768') {
                this.canvasHeight = this.$refs.graphy.offsetHeight - 100
            } else {
                this.canvasHeight = 900
            }
            // 弹窗中底图高度适配
            if (this.modalHeight) {
                this.canvasHeight = this.modalHeight
            }
        },
        getEvent() {
            bus.$on('changeShow', (res) => {
                this.topologyParser &&
                    this.topologyParser.zoneLegendList.forEach((t) => {
                        let id = t.data.GraphElementId
                        t.maskFlag = !(res.indexOf(id) > -1)
                    })
                // this.topologyParser.textMarkerList.forEach(t => {
                //     let id = t.data.GraphElementId
                //     t.maskFlag = !(res.indexOf(id) > -1)
                // })
                // this.topologyParser.imageMarkerList.forEach(t => {
                //     let id = t.data.GraphElementId
                //     t.maskFlag = !(res.indexOf(id) > -1)
                // })
                // this.topologyParser.lineMarkerList.forEach(t => {
                //     let id = t.data.GraphElementId
                //     t.maskFlag = !(res.indexOf(id) > -1)
                // })
                this.topologyParser &&
                    this.topologyParser.imageLegendList.forEach((t) => {
                        let id = t.data.GraphElementId
                        t.maskFlag = !(res.indexOf(id) > -1)
                    })
                this.topologyParser &&
                    this.topologyParser.relationList.forEach((t) => {
                        let id = t.data.GraphElementId || t.data.GraphElementID
                        t.maskFlag = !(res.indexOf(id) > -1)
                    })
            })
        },
        /**
         * @description 处理popover显隐
         * 当点击位置不在canvas内部时 ( 如点击 页面空白,图例,楼层,设备设施左侧列表项时),将visible置为false,隐藏popover
         */
        handlePopover(e) {
            this.$nextTick(() => {
                if (!this.$refs.graphy.contains(e.target)) {
                    this.visible = false
                }
                this.showStatusText = false
                this.statusText = ''
            })
        },
        /**
         * @description 设备状态列, 状态为停用或已拆除时,样式红色
         */
        tableCellClassName({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 2 && this.statusDisabled.includes(row.sb_status)) {
                return 'status-disabled'
            }
        },
    },
    watch: {
        'view.scale': {
            handler(n) {
                if (this.$refs.canvasFun) {
                    let s = (n * 10) / this.view.minScale
                    this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
                }
            },
        },
        haveFengMap() {
            this.init(this.floorid)
        },
    },
    mounted() {
        this.mapSize()
        this.getEvent()
        // 添加监听点击事件,处理popover显隐
        window.addEventListener('click', this.handlePopover, false)
        this.$once('hook:beforeDestroy', () => {
            window.removeEventListener('click', this.handlePopover)
        })
    },
    created() {
        // document.addEventListener("mousedown", () => {
        //     this.visible = false;
        // })
        this.urlMsg = {
            categoryId: this.$cookie.get('categoryId'),
            ProjectID: this.plazaId,
            BuildingID: '1',
            FloorID: this.$cookie.get('floorMapId') || 'f1',
            fmapID: this.fmapID,
        }
    },
}
</script>
<style lang="less" scoped>
#floor_base {
    position: relative;
    height: 100%;
    .fengMap {
        position: fixed;
        width: 100px;
        height: 100px;
        z-index: -1;
    }
    .strip-bottom {
        position: absolute;
        right: 0;
        bottom: 40px;
        width: 100%;
    }
    .popStyle {
        position: fixed;
    }
}
.floorMapMessage {
    background: #aaa !important;
}
</style>
<style lang="less">
a:hover {
    text-decoration: none;
}
.el-popover {
    .el-table {
        tr {
            .equip-detail-btn {
                display: none;
            }
        }
        tr:hover {
            cursor: pointer;
            .equip-detail-btn {
                cursor: pointer;
                display: inline-block;
                color: #025baa;
            }
        }
    }
    .pointList {
        max-height: 235px;
        overflow-y: auto;
        text-align: right;
        li {
            height: 38px;
            line-height: 38px;
            padding: 0 12px;
            cursor: pointer;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            span {
                float: left;
                width: 260px;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            a {
                display: none;
                color: #025baa;
                font-size: 13px;
            }
        }
        li:hover {
            background-color: #f5f6f7;
            a {
                display: inline-block;
            }
        }
    }
    .el-button--primary {
        background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
    }
    .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
    .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 16px;
    }
    .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
    .el-tabs--bottom .el-tabs__item.is-top:last-child,
    .el-tabs--top .el-tabs__item.is-bottom:last-child,
    .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 16px;
    }
    .el-tabs__nav-wrap::after {
        height: 0;
    }
    .is-active {
        color: #025baa !important;
        border-color: #025baa !important;
        background: rgba(2, 91, 170, 0.15);
    }
    .el-tabs__item {
        padding: 5px 16px;
        height: 30px;
        line-height: 20px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(31, 36, 41, 1);
        border: 1px solid rgba(195, 199, 203, 1);
    }
    .el-tabs__active-bar {
        background-color: transparent !important;
    }
    /deep/ .el-tabs__item:last-child {
        border-radius: 0px 4px 4px 0px;
    }
    /deep/ .el-tabs__item:nth-child(2) {
        border-radius: 4px 0px 0px 4px;
    }
    // 设备状态
    .status-disabled {
        color: #c0c4cc !important;
        text-decoration: line-through;
    }
}
</style>