<template>
    <div class="watching">
        <ul>
            <li v-if="safeNow">
                <span></span>
                <em>
                    <i>当前环境暂时安全</i>
                </em>
            </li>
            <li v-for="(l,index) in list" :class="{'yellow':l.WarnNum != 0}" :key="index">
                <span> {{l.Dettime |fmtDate }}</span>
                <em>
                    <i v-if="l.RegionName">{{l.RegionName}}</i>
                    <i v-if="l.DectectorName">{{l.DectectorName}}</i>
                    {{l.WarnString}}</em>
            </li>

            <div class="notips" v-show="!list">
                暂无数据,等待探查信号源
            </div>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                readyList: [],
                allLines: 18,
                currentLine: 0,
                listState: false,
                safeNow: false,
            }
        },
        props: ['totalRs','pageLevel'],
        methods: {
            wordDisplay(word) {
                let that = this;
                if (!word) {
                    // 当前环境暂时安全
                    that.safeNow = true;
                    return false
                } else {
                    that.safeNow = false;
                    for (var i = 0; i < word.length; i++) {
                        that.list.unshift(word[i]);
                        if (that.list.length > 200) {
                            that.list.pop()
                        }
                    }
                }
            },
        },
        watch: {
            totalRs: function (val) {
                let that = this;
                that.readyList = [];
                // 逐行显示
                // 操作层级为4是单独设备
                if (parseInt(this.pageLevel) != 4) {
                    that.wordDisplay(val.RegionDetRs);
                }else{
                    that.wordDisplay([val.DetRs]);
                }
            },
        },
        filters: {
            fmtDate: function (value) {
                if (!value) {
                    return '---';
                } else {
                    return value.substr(11, 8);
                }
            }
        }
    }
</script>

<style scoped>
    .watching {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .watching ul {
        width: 100%;
        height: 345px;
        overflow: hidden;
        overflow-y: scroll;
        display: block;
        margin: 0 auto;
    }

    .watching li {
        height: 34px;
        line-height: 34px;
        padding-left: 20px;
        padding-right: 10px;
        background: rgba(0, 107, 184, 0.2);
        font-size: 14px;
        color: #6DC1FF;
        /*text-align: left;*/
        overflow: hidden;
        margin-bottom: 5px;
    }

    .watching li em {
        float: left;
        text-align: left;
    }

    .watching li span {
        width: 50px;
        float: left;
        font-family: UnidreamLED;
        font-size: 16px;
        margin-right: 10px;
        text-justify: distribute-all-lines; /*ie6-8*/
        text-align-last: justify; /* ie9*/
        -moz-text-align-last: justify; /*ff*/
        -webkit-text-align-last: justify; /*chrome 20+*/
        text-align: justify;
    }

    .watching li.yellow {
        color: #FFDD00;
    }

    .watching ul::-webkit-scrollbar { /*滚动条整体样式*/

        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;

    }

    .watching ul::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #01355B;

    }

    .watching ul::-webkit-scrollbar-track { /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 10px;

        background: none;

    }
</style>
