<template>
    <div class="signMap" id="signMap">
        <div class="sum-title">
            会议室
        </div>
        <div class="compass">
            <img src="../assets/img/main/compass.png" height="30" width="30"/>
        </div>
        <div class="screen">
            <img src="../assets/img/headside/screen_max.png" v-if="!screen_full" height="18" width="19"
                 @click="full_screen"/>
            <img src="../assets/img/headside/screen_min.png" v-if="screen_full" height="18" width="19"
                 @click="cancle_screen"/>
        </div>
        <div :class="[{'signMapList':true},{'full_state':full_state}]">
            <div class="tips" v-if="scan == ''">
                <span>请开始扫描</span>
            </div>
            <div class="signMapListBg">
                <span v-for="s in scan"
                      :style="{ left: s.x*0.8+'PX', top: s.y+'PX'}"
                >
                      <el-popover
                              placement="top-start"
                              title="标题"
                              width="200"
                              trigger="hover"
                              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <div slot="reference">
                             <em class="types">
                                        <img src="../assets/img/main/cam.png" height="54" width="54" v-if="s.type == 1"/>
                                        </em>
                                        <s>{{s.name}}  {{s.type | typeName}}</s>
                        </div>
                     </el-popover>
                </span>
            </div>
            <div class="right_rule">
                <span>0</span>
                <span v-for="i in 24" v-if="i % 2 == 0">{{i}}</span>
            </div>
            <div class="bottom_rule">
                <span>0</span>
                <span v-for="i in 56" v-if="i % 2 == 0">{{i}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                screen_full: false,
                checked: true,
                full_state: false,
                scan: [
                    {name: '小米', type: 1, x: 10, y: 120, level: 3},
                    {name: '小米', type: 1, x: 23, y: 133, level: 3},
                    {name: '小米', type: 1, x: 144, y: 12, level: 3},
                    {name: '小米', type: 1, x: 31, y: 141, level: 3},
                ],

            }
        },
        watch: {},
        mounted() {
            this.init()
        },
        methods: {
            init() {
            },
            // 全屏
            full_screen() {
                this.screen_full = true;
                let elem = document.getElementById("signMap");
                this.full_state = true;
                if (elem.webkitRequestFullScreen) {
                    elem.webkitRequestFullScreen();
                } else if (elem.mozRequestFullScreen) {
                    elem.mozRequestFullScreen();
                } else if (elem.requestFullScreen) {
                    elem.requestFullscreen();
                } else {
                    this.screen_full = false;
                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
                }
            },
            // 取消全屏
            cancle_screen() {
                this.screen_full = false;
                this.full_state = false;
                var elem = document;
                if (elem.webkitCancelFullScreen) {
                    elem.webkitCancelFullScreen();
                } else if (elem.mozCancelFullScreen) {
                    elem.mozCancelFullScreen();
                } else if (elem.cancelFullScreen) {
                    elem.cancelFullScreen();
                } else if (elem.exitFullscreen) {
                    elem.exitFullscreen();
                } else {
                    this.screen_full = true;
                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
                }
            },
        },
        filters: {
            typeName: function (value) {
                switch (parseInt(value)) {
                    case 0:
                        return "其他设备";
                        break;
                    case 1:
                        return "摄像头";
                        break;
                    case 2:
                        return "路由器";
                        break;
                    case 3:
                        return "手机";
                        break;
                }
            },
        }
    }
</script>

<style scoped>
    .signMap {
        width: 100%;
        height: 473px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0px;
    }

    .signMapList {
        position: relative;
        width: 100%;
        height: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        color: #6DC1FF;
    }

    .sum-title {
        width: 150px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
        color: #6DC1FF;
        margin: 0 auto;
        text-align: center;
        background: url("../assets/img/main/tit.png") top center no-repeat;
        background-size: 100%;
    }

    .compass {
        position: relative;
        left: 3%;
        top: -20px;
        float: left;
    }

    .screen {
        position: relative;
        right: 3%;
        top: -20px;
        float: right;
        cursor: pointer;
    }

    .signMapListBg {
        width: 95%;
        /*height: 385px;*/
        height: 90%;
        float: left;
        background: url("../assets/img/main/grid.png");
        background-size: 100% 100%;
    }

    .right_rule {
        float: left;
        width: 30px;
        height: 90%;
    }

    .right_rule span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 8%;
        line-height: 100%;
        text-align: center;
        font-size: 12px;
    }

    .bottom_rule {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .bottom_rule span {
        width: 3.2%;
        text-align: center;
        float: left;
        font-size: 12px;
    }

    .tips {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 306px;
        height: 306px;
        overflow: hidden;
        background: url("../assets/img/main/ready.png");
        background-size: 100% 100%;
        text-align: center;
        line-height: 306px;
        font-size: 30px;
        color: #fff;
    }

    .signMapListBg span {
        position: relative;
        float: left;
        overflow: hidden;
        cursor: pointer;
    }

    .signMapListBg em {
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .signMapListBg s {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
        text-decoration: none;
    }

    .signMapListBg img {
        -webkit-animation: twinkling 1s infinite ease-in-out;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }
    .signMap s {
        color: #72FF99;
    }

    @-webkit-keyframes twinkling {
        0% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes twinkling {
        0% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }


</style>
