<!-- 楼层功能右下侧hove的时候出现编辑平面图-->
<template>
    <div class='edit_map'>
        <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
            <span class='edit-icon'>
                <i class='el-icon-edit'></i>
                <span v-if='len>0'></span>
            </span>
        </el-tooltip>
        <div class='hover-div'>
            <span class='icon1' @click='legendClik'>
                <a-icon type='form' />
            </span>
            <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
                <span class='icon2' @click='dump'>
                    <a-icon type='form' />
                </span>
            </el-tooltip>
        </div>
        <remarks ref='EditdMarks'></remarks>
    </div>
</template>
<script>
import Remarks from './legendremarks'
export default {
    data() {
        return {
            len: 2,
            text: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后的数字,代表此位置的数量'
        }
    },
    methods: {
        dump() {},
        legendClik() {
            this.$refs.EditdMarks.showModal()
        }
    },
    components: {
        Remarks
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
.edit_map {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 2;
    .edit-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
        border-radius: 50%;
        text-align: center;
        line-height: 48px;
        display: inline-block;
        cursor: pointer;
        position: relative;
        i {
            color: #ffffff;
            font-size: 20px;
        }
        span {
            position: absolute;
            right: 4px;
            top: 2px;
            width: 10px;
            height: 10px;
            display: inline-block;
            background: #f54a45;
            border-radius: 50%;
        }
    }
    .hover-div {
        position: absolute;
        bottom: 58px;
        right: 28px;
        .icon1 {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
            border: 1px solid rgba(31, 36, 41, 0.2);
            font-size: 16px;
            display: inline-block;
            color: #646c73;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .icon2 {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
            border: 1px solid rgba(31, 36, 41, 0.2);
            font-size: 16px;
            display: inline-block;
            color: #646c73;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            margin-top: 15px;
            cursor: pointer;
        }
    }
}
</style>
<style lang="less">
</style>