<!--
 * @FilePath: \screenFront\src\views\legionProducts\chart\devStatus.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-28 14:29:11
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div class="box">
        <div class="box-title">{{t('messages.DevStatus')}}</div>
        <div class="box-body">
            <div class="card">
                <div><b>{{ prop.data.counts}}</b>{{t('messages.units')}}</div>
                <h3>{{t('messages.TOTAL')}}</h3>
            </div>
            <div class="card border">
                <div><b>{{ prop.data.onLine}}</b>{{t('messages.units')}}</div>
                <h3>{{t('messages.OnlineNum')}}</h3>
            </div>
            <div class="card">
                <div style="color:rgb(228, 57, 97)"><b>{{ prop.data.offLine}}</b>{{t('messages.units')}}</div>
                <h3>{{t('messages.OffNum')}}</h3>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted, defineProps } from 'vue'
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                "offLine": 0,
                "counts": 0,
                "onLine": 0
            }
        }
    }
})
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.box-title {
    width: 100%;
    height: 10%;
    padding: 10px;
    font-size: 20px;
    color: #fff;
    text-align: left;
    font-weight: bold;
}

.box-body {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.box-body .card {
    width: 33%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box-body .card div {
    font-size: 2rem;
    font-weight: 800;
    color: #20AEC5;
    margin-bottom: 10px;
}

.box-body .card div b {
    font-size: 3rem;
    font-weight: 800;
}

.box-body .card h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-top: 10px;
    color: #637C9F;
}

.box-body .card.border {
    border-right: 1px solid #20AEC5;
    border-left: 1px solid #20AEC5;
}
</style>
