<template>
    <div class='fenbu-box'>
        <!-- 图例 -->
        <div class='legend-boxs'>
            <Legend :floors='floors' type='0' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`'></Legend>
        </div>
        <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
        <div v-if='floors.length>0'>
            <floorMap ref='floorMap' :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: []
        }
    },
    props: ['typecode'],
    computed: {
        ...mapGetters(['floorsArr'])
    },
    methods: {
        emitFloor(item) {
            console.log(item)
            this.floorInfo = item
            this.$refs.floorMap.init(this.floorInfo.gname)
        },
        additionalColl() {
            this.show = !this.show
        },
        getFloorData() {
            let postParams = {
                Distinct: true,
<<<<<<< HEAD
                Filters: `projectId =${this.$store.state.plazaId}; categoryId='XFBFYCFL';isPub=true`,
=======
                Filters: `projectId =${this.$store.state.plazaId};categoryId='XTYLT';isPub=true`,
>>>>>>> 4fc95b05ad81abc33c44ac2be3ffca29d9da58fe
                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 = []
            queryPics({ postParams }).then(res => {
                console.log(res)
                if (res.Total == 0) {
                    this.floors = []
                } else {
                    floor = res.Content
                    this.floorsArr.forEach(el => {
                        floor.forEach(ele => {
                            if (ele.FloorId == el.gname) {
                                console.log(el)
                                this.floors.push({
                                    gname: el.gname,
                                    gcode: el.gcode,
                                    name: el.name,
                                    code: el.code,
                                    seq: el.seq
                                })
                            }
                        })
                    })
                }
                console.log(this.floors)
                this.floorInfo = this.floors[0]
                console.log(this.floorInfo.gname)
                this.$refs.floorMap.init(this.floorInfo.gname)
                this.init()
            })
        },
        init() {
            this.loadName = `${this.floorInfo.code}`
        }
    },
    mounted() {
        console.log(this.floorsArr)
        this.getFloorData()
    }
}
</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: 155px;
    }
    .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>