<template>
    <div class='floorFunc-box'>
        <div class='lcgn-title'>
            <span class='span1'>{{floorInfo.code}}</span>
        </div>
        <!-- 图例 -->
        <div class='legend-boxs'>
            <Legend :floors='floorsArr' type='1' :editTips='`编辑${floorInfo.code}层楼层功能平面图`'></Legend>
        </div>
        <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
        <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
    </div>
</template>
<script>
import floorMap from '@/components/floorMap/index.vue'
import floorList from '@/components/floorList.vue'
import { mapGetters } from 'vuex'

export default {
    components: { floorMap, floorList },
    data() {
        return {
            show: true,
            floorInfo: {
                gname: 'f1',
                code: 'F1'
            },
            loadName: '',
            type: ''
        }
    },
    computed: {
        ...mapGetters(['floorsArr'])
    },
    methods: {
        emitFloor(item) {
            this.floorInfo = item
            this.$refs.floorMap.init(this.floorInfo.gname)
            this.init()
        },
        additionalColl() {
            this.show = !this.show
        },
        init() {
            this.loadName = `楼层功能-${this.floorInfo.code}`
        }
    },
    mounted() {
        this.init()
        this.$refs.floorMap.init(this.floorInfo.gname)
    }
}
</script>
<style lang="less">
.floorFunc-box {
    background: rgba(242, 245, 247, 1);
    height: calc(100vh - 48px);
    flex: 1;
    .lcgn-title {
        position: fixed;
        z-index: 2;
        display: block;
        top: 120px;
        left: 146px;
        width: 140px;
        height: 32px;
        background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
        box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
        color: #025baa;
        font-size: 16px;
        &::before {
            width: 2px;
            height: 16px;
            background: rgba(2, 91, 170, 1);
            display: inline-block;
            content: '';
            margin-right: 10px;
            margin-top: 8px;
        }
        .span1 {
            position: absolute;
            top: 3px;
        }
    }
    .legend-boxs {
        position: fixed;
        z-index: 9;
        right: 32px;
        top: 142px;
    }
}
</style>