<template>
    <div class="Room">
        <div class="curTitle">
            {{loftTitle}}平面图
        </div>
        <div class="RoomContainer">
            <div class="RoomBg">
                <ul>
                    <li :class="{'active':p.DetectorWarnNum != 0}" v-for="p in loftPoints"
                        :style="{ left: p.DetselfInfo.Width*0.8+'PX', top: p.DetselfInfo.Height+'PX'}" @click="seeDet(p)">
                        <em><i></i>{{p.DetselfInfo.TagName}}</em></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                points: [],
            }
        },
        props: ['loftMap', 'loftTitle', 'loftPoints'],
        methods: {
            seeDet(row) {
                this.$router.push(
                    {
                        path: '/equip', query: {RegionId: row.RegionId, TagName: row.TagName}
                    }
                );
            }
        },
    }
</script>

<style scoped>
    .Room {
        width: 690px;
        height: 481px;
        float: right;
        margin-top: 11px;
    }

    .RoomContainer {
        width: 690px;
        height: 381px;
        margin-left: 0;
        margin-top: 14px;
        overflow: hidden;
        border: 1px solid #2592E2;
        float: left;
        background: rgba(27, 86, 200, 0.14);
    }

    .curTitle {
        width: 164px;
        height: 26px;
        line-height: 26px;
        color: #6DC1FF;
        float: left;
        text-align: center;
        background: url("../assets/img/main/title.png") top center no-repeat;
        /*background: url("../assets/img/op_title.png") top center no-repeat;*/
        background-size: 100% 100%;
        font-size: 14px;
    }

    .RoomBg {
        width: 641px;
        height: 330px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/main/RoomBg.png") top center no-repeat;
        background-size: 100% 100%;
        margin-top: 24px;
    }

    .RoomBg ul {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .RoomBg li {
        position: relative;
    }

    .RoomBg li em {
        color: #6DC1FF;
        font-size: 12px;
        margin-right: 5px;
        float: left;
        line-height: 22px;
    }

    .RoomBg li i {
        width: 14px;
        height: 14px;
        float: left;
        text-align: center;
        line-height: 22px;
        background: #2592E2;
        border-radius: 250px;
        color: #BEE3FF;
        font-size: 10px;

    }
    .RoomBg li.active i {
        background: #FFDD00;
        color: #2592E2;
        animation: warn 1.8s linear;
        animation-iteration-count: infinite !important;
    }

    @keyframes warn {
        0% {
            transform: scale(0);
            opacity: 0.0;
        }
        25% {
            transform: scale(0.25);
            opacity: 0.1;
        }
        50% {
            transform: scale(0.5);
            opacity: 0.3;
        }
        75% {
            transform: scale(0.75);
            opacity: 0.5;
        }
        100% {
            transform: scale(1);
            opacity: 0.0;
        }
    }
</style>
