<template>
    <div>
        <div class="communication">
            <div><img src="../assets/cangwei.png" />{{chargerCode}}号充电机</div>
            <div :class="statustext[1]">{{statustext[0]}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BatteryCharger",
        props:['chargerCode','comState'],
        computed:{
            statustext(){
                if(this.comState===1){
                    return ['通讯正常','success']
                }else{
                    return ['通讯异常','warning']
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.communication {
    display: flex;
    margin-bottom: 2.6vh;
    div {
        line-height: 36px;
        font-size: 16px;
        font-weight: 600;
        height: 36px;
        width: 136px;
        text-align: center;
    }

    div:first-child {
        background-color: #1b263a;
        border: #25334d solid 1px;
        color: white;
        line-height: 34px;

        img {
            vertical-align: middle;
        }
    }

    .success {
        color: #92fdb9;
    }
    .warning {
        color: #c85e60;
    }
}
</style>