<template>
    <div>
      <el-tooltip v-if="online" effect="dark" :content="'信号:'+ signal" placement="top-start">
        <img v-if="signal < 10" style="width: 20px;" src="../../assets/system/img/online_0.png"/>
        <img v-if="signal >= 10 && signal<35" style="width: 20px;" src="../../assets/system/img/online_1.png"/>
        <img v-if="signal >= 35 && signal<45" style="width: 20px;" src="../../assets/system/img/online_2.png"/>
        <img v-if="signal >= 45 && signal<=55" style="width: 20px;" src="../../assets/system/img/online_3.png"/>
        <img v-if="signal > 55" style="width: 20px;" src="../../assets/system/img/online_4.png"/>
      </el-tooltip>

      <el-tooltip v-else effect="dark" :content="'离线时间:'+ offTime " placement="top-start">
        <img  style="width: 20px;" src="../../assets/system/img/off_online.png"/>
      </el-tooltip>

    </div>
</template>


<script>
    export default {
        name: "ui-signal",
        computed: {},
        data() {
            return {}
        },
        props: {
            signal: {
                default: 0,
                type: Number
            },
            online : {
                default : false,
                type : Boolean
            },
            offTime:{
                default : "",
                type : String
            }
        },

        created() {

        },
        methods: {}
    }
</script>
<style scoped>

</style>
