<template>
    <div class="total">
        <div class="other-people">
            <div class="image-border image-border1"></div>
            <div class="image-border image-border2"></div>
            <div class="image-border image-border3"></div>
            <div class="image-border image-border4"></div>
            <div class="other-people-title">
                实时监测
            </div>
            <div class="totalContianer" v-if="TotalPanel">
                <div class="tlt">
                    <h5>正在监测</h5>
                    <BigRader :total-rs="totalRs"></BigRader>
                </div>
                <div class="trt">
                    <h5>实时监测记录</h5>
                    <Watching :total-rs="totalRs" ></Watching>
                </div>
            </div>
            <div class="loftContainer" v-if="LoftPanel">
                <div class="tlt">
                    <h5>正在监测</h5>
                    <BigRader :total-rs="totalRs"></BigRader>
                </div>
                <div class="trt">
                    <h5>实时监测记录</h5>
                    <Watching :total-rs="totalRs"></Watching>
                </div>
            </div>
            <div class="manageContainer" v-if="managePanel">
                <div class="tlt">
                    <h5></h5>
                    <SmallRader  :strs="totalRs"></SmallRader>
                </div>
                <div class="trt">
                    <Loft></Loft>
                </div>
            </div>
            <div class="RoomContainer" v-if="RoomPanel">
                <div class="tlt">
                    <h5></h5>
                    <SmallRader  :strs="totalRs"></SmallRader>
                </div>
                <div class="trt">
                    <Room></Room>
                </div>
            </div>
            <div class="DetctorContianer" v-if="DetctorPanel">
                <div class="tlt">
                    <h5>正在监测</h5>
                    <BigRader :total-rs="totalRs"></BigRader>
                </div>
                <div class="trt">
                    <h5>实时监测记录</h5>
                    <Watching :total-rs="totalRs"></Watching>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    let qs = require('qs');
    import BigRader from '@/components/BigRader.vue'
    import SmallRader from '@/components/SmallRader.vue'
    import Watching from '@/components/Watching.vue'
    import Loft from '@/components/Loft.vue'
    import Room from '@/components/Room.vue'
    import {RegionDetInfolist} from '../api/getApiRes.js'
    export default {
        data() {
            return {
                TotalPanel: true,//总控
                LoftPanel: false,//楼层
                managePanel: false,//区域
                RoomPanel: false,//房间
                DetctorPanel: false,//设备
                totalRs: [],
            }
        },
        mounted() {
            this.getDate();
            let that = this;
            this.timer = setInterval(() => {
                that.getDate();
            }, 2800);
        },
        destroyed () {
            clearInterval(this.timer);//页面销毁时清除定时器
            clearInterval(this.wordDisplay);//页面销毁时清除定时器
        },
        methods: {
            // 全部设备情况
            getDate() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId:this.regionId
                };
                let postdata = qs.stringify(param);
                RegionDetInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.totalRs = json;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            wordDisplay(word) {
                let index = 0;
                let that = this;
                setTimeout(function () {
                    that.list.unshift(word[index]);
                    index = index + 1 ;
                }, 300);
            }
        },
        props: ['postTitle','regionId'],
        watch: {
            postTitle: function (val) {
                let that = this;
                that.TotalPanel = false;
                that.LoftPanel = false;
                that.managePanel = false;
                that.RoomPanel = false;
                that.DetctorPanel = false;

                switch (parseInt(val)) {
                    case 0: //默认全部
                        that.TotalPanel = true;
                        break;
                    case 1: //楼层
                        that.LoftPanel = true;
                        break;
                    case 2: //楼层区域
                        that.managePanel = true;
                        break;
                    case 3: //小区域
                        that.RoomPanel = true;
                        break;
                    case 4: //单个设备
                        that.DetctorPanel = true;
                        break;
                }
            },
            regionId: function (val) {
                // 地区改变后，重新获取数据
                this.getDate();
            }
        },
        components: {
            BigRader, Watching, SmallRader, Loft, Room
        }
    }
</script>

<style scoped>
    .other-people {
        width: 963px;
        height: 481px;
        margin-left: 0;
        overflow: hidden;
        background: #000F2A;
    }

    ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .totalContianer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 55px;
    }

    .totalContianer .tlt {
        width: 48%;
        float: left;
        padding-left: 10px;
    }

    .totalContianer .trt {
        width: 48%;
        float: right;
        padding-right: 20px;
        overflow: hidden;
    }

    .totalContianer h5 {
        width: 126px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #6DC1FF;
        font-size: 14px;
        margin: 0;
        margin-left: 33%;
        margin-bottom: 19px;
        background: url("../assets/img/main/title.png") top center no-repeat;
        background-size: 100% 100%;
    }

    .total .image-border2 {
        right: 0;
    }

    .total .image-border4 {
        right: 0;
    }

    .loftContainer .tlt {
        width: 48%;
        float: left;
        padding-left: 10px;
    }

    .loftContainer .trt {
        width: 48%;
        float: right;
        padding-right: 20px;
        overflow: hidden;
    }


    .loftContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 55px;
    }


    .RoomContainer .tlt {
        float: left;
        padding-left: 10px;
        margin-top: 60px;
    }

    .RoomContainer .trt {
        float: right;
        padding-right: 20px;
        overflow: hidden;
        margin-top: 30px;
    }

    .DetctorContianer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 55px;
    }

    .DetctorContianer .tlt {
        width: 48%;
        float: left;
        padding-left: 10px;
    }

    .DetctorContianer .trt {
        width: 48%;
        float: right;
        padding-right: 20px;
        overflow: hidden;
    }

    .DetctorContianer h5 {
        width: 126px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #6DC1FF;
        font-size: 14px;
        margin: 0;
        margin-left: 33%;
        margin-bottom: 19px;
        background: url("../assets/img/main/title.png") top center no-repeat;
        background-size: 100% 100%;
    }

    .manageContainer .tlt {
        float: left;
        padding-left: 10px;
        margin-top: 60px;
    }

    .manageContainer .trt {
        float: right;
        padding-right: 20px;
        overflow: hidden;
        margin-top: 30px;
    }

    .loftContainer h5 {
        width: 126px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #6DC1FF;
        font-size: 14px;
        margin: 0;
        margin-left: 33%;
        margin-bottom: 19px;
        background: url("../assets/img/main/title.png") top center no-repeat;
        background-size: 100% 100%;
    }
</style>
