<template>
    <div class='fenbu-box'>
        <!-- 图例 -->
        <div class='legend-boxs'>
            <Legend :floors='floors' type='0'></Legend>
        </div>
        <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
        <div class='additional-box' v-if='floors.length>0'>
            <div class='additional' @click='additionalColl'>
                <img src='../../assets/imgs/bg.png' alt />
            </div>
            <el-collapse-transition>
                <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
            </el-collapse-transition>
        </div>
        <div v-show='floors.length>0'>
            <floorMap ref='floorMap' :loadName='loadName' :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: []
        }
    },
    computed: {
        ...mapGetters(['floorsArr'])
    },
    methods: {
        emitFloor(item) {
            this.floorInfo = item
            this.$refs.floorMap.init(this.floorInfo.gname)
        },
        additionalColl() {
            this.show = !this.show
        },
        getFloorData() {
            let postParams = {
                Distinct: true,
                Filters: "projectId ='1000423';categoryId='LCGN' or categoryId='XFBFYCFL';isPub=true",
                PageNumber: 1,
                PageSize: 500,
                Projection: ['floorId']
            }
            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) {
                                this.floors.push({
                                    gname: el.gname,
                                    code: el.code
                                })
                            }
                        })
                    })
                }
                console.log(this.floors)
            })
        }
    },
    mounted() {
        // this.getFloorData()
        // 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: 155px;
    }
    .additional-box {
        position: relative;
        .additional {
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
            border-radius: 2px;
            position: fixed;
            right: 32px;
            top: 420px;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            img {
                width: 20px;
                height: 20px;
            }
        }
        .add-img {
            width: 560px;
            height: 325px;
            background: #ffffff;
            -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
            box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
            border-radius: 2px;
            border: 1px solid #e4e5e7;
            position: absolute;
            right: 77px;
            top: 93px;
            z-index: 2;
        }
    }
    .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>