<script setup>
import TableHeader from './tableHeader.vue';
import Line from './line.vue';
import { BorderBox8 as DvBorderBox8, } from '@kjgl77/datav-vue3'
import { onMounted, reactive, ref } from 'vue'
import Api from '@/api/index';

let count = ref({})

onMounted(() => {
    init()
    setInterval(() => {
        init()
    }, 10000)
})
function init() {
    Api('/orderStats/total').then((res) => {
        count.value = {
            ...count.value,
            ...res
        }
    })
    Api('/deviceStats/total').then((res) => {
        count.value = {
            ...count.value,
            ...res
        }
    })
}
</script>

<template>
    <div class="left">
        <TableHeader title="电桩信息" />
        <div class="left_dzinfo">
            <div class="left_dzinfo_view">
                <div>{{ count.deviceTotal || 0 }}</div>
                <div>总电桩数</div>
            </div>
            <div class="left_dzinfo_view">
                <div>{{ count.gunTotal || 0 }}</div>
                <div>总端口数</div>
            </div>
            <div class="left_dzinfo_view">
                <div>{{ count.alertTotal || 0 }}</div>
                <div>总报警数</div>

            </div>
            <div class="left_dzinfo_view">
                <div>{{ count.onlineDeviceTotal || 0 }}</div>
                <div>在线电桩数</div>
            </div>
            <div class="left_dzinfo_view">
                <div>{{ count.onlineGunTotal || 0 }}</div>
                <div>在线端口数</div>
            </div>
            <div class="left_dzinfo_view">
                <div>{{ count.useTotal || 0 }}</div>
                <div>使用中</div>
            </div>
        </div>
        <div class="left_lv">
            <div class="left_lv_view">
                <img style="width: 33px;height: 40px;" src="/src/assets/img/1.png" alt="">
                <div class="left_lv_view_info">
                    <div style="color: #fff;font-size: 14px;">使用率（%）</div>
                    <div style="color: #5EFFFC;font-size: 13px;">{{ count.useRate || 0 }}%</div>
                </div>
            </div>
            <div class="left_lv_view">
                <img style="width: 42px;height: 42px;" src="/src/assets/img/2.png" alt="">
                <div class="left_lv_view_info">
                    <div style="color: #fff;font-size: 14px;">使用时长（月）</div>
                    <div style="color: #5EFFFC;font-size: 13px;">{{ count.useTime || 0 }}min</div>
                </div>
            </div class="left_lv_view">
        </div>
        <TableHeader title="订单数据" />
        <div class="left_order">
            <div class="left_order_view">
                <img src="/src/assets/img/-s-icon-巡防队.png" alt="">
                <div>日订单数</div>
                <div style="color: #2CFFB1">{{ count.dayCount || 0 }}</div>
            </div>
            <div class="left_order_view">
                <img src="/src/assets/img/-s-icon-保安队.png" alt="">
                <div>月订单数</div>
                <div style="color: #1CFBFF">{{ count.monthCount || 0 }}</div>
            </div>
            <div class="left_order_view">
                <img src="/src/assets/img/-s-icon-城管员.png" alt="">
                <div>季订单数</div>
                <div style="color: #FCCE4A">{{ count.jiCount || 0 }}</div>
            </div>
        </div>
        <TableHeader title="订单数据趋势" />
        <div style="width: 100%;height: 300px;">
            <Line />
        </div>
    </div>
</template>

<style scoped lang="scss">
.left {
    padding: 0 20px;

    &_dzinfo {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 15px;

        &_view {
            width: 111px;
            height: 85px;
            background: url("@/assets/img/框@2x.png") no-repeat center;
            background-size: cover;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 12px;

            div:nth-child(1) {
                font-size: 17px;
                color: #53DFEC;
                margin-bottom: 10px;
            }

            div:nth-child(2) {
                font-size: 13px;
            }
        }
    }

    &_lv {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;

        &_view {
            width: 173px;
            height: 84px;
            background: rgba(6, 57, 108, 0.4);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(6, 57, 108, 0.4);

            img {
                margin-right: 15px;
            }
        }
    }

    &_order {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30px;
        margin-bottom: 20px;


        &_view:nth-child(1) {
            background: url("@/assets/img/order1.png") no-repeat center;
            width: 125px;
            height: 184px;
            background-size: cover;
        }

        &_view:nth-child(2) {
            background: url("@/assets/img/order2.png") no-repeat center;
            width: 125px;
            height: 184px;
            background-size: cover;
        }

        &_view:nth-child(3) {
            background: url("@/assets/img/order3.png") no-repeat center;
            width: 125px;
            height: 184px;
            background-size: cover;
        }

        &_view {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;

            img {
                width: 92px;
                height: 99px;
            }
        }

    }
}
</style>
