<template>
    <div class="equipinfo">
        <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="thisContent">
                <h5>设备运行时间 <s class="timeShow">{{timeShow}}</s></h5>
                <ul>
                    <li>
                        <div class="ringCircle">
                            <Ring></Ring>
                        </div>
                        <em>{{info.state}}</em>
                        <span>设备状态</span>
                    </li>
                    <li>
                        <div class="ringCircle">
                            <Ring></Ring>
                        </div>
                        <em>{{info.warning}}台</em>
                        <span>可疑事件数</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    // todo 接收main。vue 传入的参数并渲染 ，本身不请求Ajax
    import Ring from '@/components/Ring.vue'
    export default {
        data(){
            return{
                timeShow: ' 00 : 00 : 00',
                info:{
                    state:'在线',
                    warning:72,
                }
            }
        },
        mounted() {
            // this.timeRun();
            // this.timer = setInterval(() => {
            //     this.timeRun();
            // }, 1000);
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        methods: {
            // 显示设备持续时间
            timeRun() {
                let seconds = this.seconds;
                let hour = parseInt(seconds / 3600);
                let r = parseInt(seconds % 3600);
                let m = parseInt(r / 60);
                let s = parseInt(r % 60);
                hour = hour > 9 ? hour : '0' + hour;
                m = m > 9 ? m : '0' + m;
                s = s > 9 ? s : '0' + s;
                let res = hour + " : " + m + " : " + s;
                this.timeShow = res;
                this.seconds += 1;
            },
        },
        components: {
            Ring
        }
    }
</script>

<style scoped>
    .thisContent {
        width: 100%;
        height: 400px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .equipinfo {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .other-people {
        width: 439px;
        height: 422px;
        margin-left: 0;
        overflow: hidden;
        background: #000F2A;
    }
    .equipinfo .image-border2 {
        right: 0;
    }
    .equipinfo .image-border4 {
        right: 0;
    }
    ul,li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .thisContent ul {
        width: 80%;
        height: 100%;
        overflow: hidden;
        display: block;
        padding: 0 13px;
        margin: 0 auto;
        margin-top: 60px;
    }
    .thisContent ul li {
        width: 120px;
        height: 110px;
        float: left;
        margin-right: 20px;
    }
    .thisContent ul li:nth-child(2){
        margin-right: 0;
        float: right;
    }
    .ringCircle {
        width: 100px;
        height: 100px;
        overflow: hidden;
        border-radius: 250px;
        border:10px solid rgba(37,146,226,0.6) ;
    }
    .thisContent li em {
        position: relative;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        bottom: 75px;
        color: #67BFFF;
        font-size: 18px;
        text-align: center;
        font-style: normal;
    }
    .thisContent li span {
        position: relative;
        bottom: 20px;
        color: #67BFFF;
        font-size: 16px;
        text-align: center;
    }
    .thisContent h5 {
        width: 320px;
        height: 43px;
        line-height: 43px;
        text-align: center;
        color: #6DC1FF;
        font-size: 22px;
        margin: 0;
        margin-left: 41px;
        margin-top: 60px;
        margin-bottom: 19px;
        background: url("../assets/img/main/bigTitle.png") top center no-repeat;
        background-size: 100% 100%;
    }
    .timeShow {
        text-decoration: none;
        line-height: 43px;
        font-size: 24px;
        color: #6DC1FF;
        text-align: center;
        font-family: UnidreamLED;
    }
</style>
