<template>
    <div class='fenbu-box'>
        <!-- 图例 -->
        <div class='legend-boxs'>
            <Legend :innerLeng='1' :floorInfo="floorInfo"  :floors='floors' type='0' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`'></Legend>
            <floor-list v-if='floors.length>0' :changeDataFlag='false' :floorsArr='floors' @emitFloor='emitFloor' :id='"floor"'></floor-list>
        </div>
        <div v-show='floors.length>0' class='canvas-box'>
            <floorMap ref='floorMap' :modalHeight='modalHeight' :loadName='""' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`' :type='"floor"'></floorMap>
        </div>
        <div class='nodata' v-show='floors.length==0'>
            <img class='img1' src='@/assets/imgs/wtp.png' alt />
            <div class='no-img'>暂无分布图，请手动绘制</div>
        </div>
    </div>
</template>
<script>
import floorMap from '@/components/floorMap/index.vue'
import floorList from '@/components/floorList.vue'
import { mapGetters } from 'vuex'
import { queryPics } from '@/api/legendLibrary.js'
export default {
    components: { floorMap, floorList },
    data() {
        return {
            show: false,
            floorInfo: {
                gname: 'f1',
                code: 'F1'
            },
            loadName: '',
            type: '',
            floors: [],
            modalHeight: 500 //适配底图
        }
    },
    props: ['typecode'],
    computed: {
        ...mapGetters(['floorsArr'])
    },
    mounted() {
        if (window.screen.width > 1366) {
            this.modalHeight = 700
        } else {
            this.modalHeight = 500
        }
    },
    methods: {
        /**
         * 楼层组件,传回的方法,进行 floorMap 渲染底图
         */
        emitFloor(item) {
            this.floorInfo = item
            this.$refs.floorMap.init(this.floorInfo.gname)
        },
        additionalColl() {
            this.show = !this.show
        },
        getFloorData() {
            let postParams = {
                Distinct: true,
                PageNumber: 1,
                PageSize: 500,
                Projection: ['floorId']
            }
            if (this.typecode == 'FBT1') {
                postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='FZQZL';isPub=true`
            }
            if (this.typecode == 'FBT2') {
                postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='XFBFYCFL';isPub=true`
            }
            let floor = []
            this.floors = []
            queryPics({ postParams }).then(res => {
                if (res.Total == 0) {
                    this.floors = []
                } else {
                    floor = res.Content
                    this.floorsArr.forEach(el => {
                        floor.forEach(ele => {
                            if (ele.FloorId == el.gname) {
                                this.floors.push({
                                    gname: el.gname,
                                    gcode: el.gcode,
                                    name: el.name,
                                    code: el.code,
                                    seq: el.seq
                                })
                            }
                        })
                    })
                }
                this.floorInfo = this.floors[0]
                // this.init()
            })
        },
        init() {
            this.loadName = `${this.floorInfo.code}`
        },
        openFloorMap() {
            // 查询楼层数据
            this.getFloorData()
            // 注释掉 floorMap init ,由楼层中的emitFloor方法去执行floorMap
            // this.$refs.floorMap.init(this.floorInfo.gname)
        }
    }
}
</script>
<style lang="less">
.fenbu-box {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    .legend-boxs {
        position: fixed;
        z-index: 9;
        right: 32px;
        top: 142px;
    }
    .canvas-box {
        width: 100%;
        height: 100%;
    }
    .nodata {
        height: calc(100%-50px);
        .img1 {
            width: 126px;
            height: 121px;
        }
        .no-img {
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: rgba(100, 108, 115, 1);

            margin-top: 8px;
        }
    }
}
</style>