<template>
    <div style="height: 145px" class="box1">
        <!-- <div class="boxDiv hexagon">
            <div class="text-style" @click="change('')">{{ props.params.allNum }}</div>
            <div class="mt10 divBot">总数</div>
        </div>
        <div class="boxDiv hexagon hexagon1">
            <div class="text-style" @click="change('运行')">{{ props.params.runNum }}</div>
            <div class="mt10 divBot">在运</div>
        </div>
        <div class="boxDiv hexagon hexagon2">
            <div class="text-style" @click="change('调试')">{{ props.params.checkNum }}</div>
            <div class="mt10 divBot">调试</div>
        </div>
        <div class="boxDiv hexagon hexagon3">
            <div class="text-style" @click="change('停运')">{{ props.params.stopRunNum }}</div>
            <div class="mt10 divBot">停运</div>
        </div> -->
        <div class="statistics">
            <div class="divBox div1">
                <span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
                <span class="divBox_title">终端总数</span>
                <span class="divBox_num text-style" style="color: #57bc6e" @click="change('')">
                    {{ props.params.allNum }}
                </span>
            </div>
            <div class="divBox div2" style="width: 210px">
                <span class="iconfont icon-zaiyunshebei" style="color: #67c23a"></span>
                <span class="divBox_title">在运终端数</span>
                <span class="divBox_num text-style" style="color: #67c23a" @click="change('运行')">
                    {{ props.params.runNum }}
                </span>
            </div>
        </div>
        <div class="statistics">
            <div class="divBox div3">
                <span class="iconfont icon-yichanglei_14feizhinengbiaozaiyunyichang" style="color: #ffbf00"></span>
                <span class="divBox_title">调试终端数</span>
                <span class="divBox_num text-style" style="color: #ffbf00" @click="change('调试')">
                    {{ props.params.checkNum }}
                </span>
            </div>
            <div class="divBox div4" style="width: 210px">
                <span class="iconfont icon-tingyunshijianguanli" style="color: #f56c6c"></span>
                <span class="divBox_title">停运终端数</span>
                <span class="divBox_num text-style" style="color: #f56c6c" @click="change('停运')">
                    {{ props.params.stopRunNum }}
                </span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { color } from '@/components/echarts/color'
const emit = defineEmits(['change'])
const height = mainHeight(330, 3)
const props = defineProps({
    params: {
        type: Object,
        default: () => {}
    }
})
const change = (e: string) => {
    emit('change', e)
}
const info = () => {}
onMounted(() => {
    info()
})
</script>
<style lang="scss" scoped>
      @import '@/assets/font/iconfont.css';
.statistics {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
    .divBox {
        width: 210px;
        height: 70px;
        padding: 10px;
        display: flex;

        .iconfont {
            font-size: 40px;
            margin-right: 5px;
        }
        .divBox_title {
            font-weight: 550;
        }
        .divBox_num {
            font-size: 20px;
            font-weight: 550;
            margin-left: auto;
            font-family: AlimamaDongFangDaKai;
        }
        align-items: center;
        // text-align: center;
        border-radius: 5px;
    }
    .div1 {
        background-color: #eef8f0;
    }
    .div2 {
        background-color: #67c23a24;
    }
    .div3 {
        background-color: #ffbf0024;
    }
    .div4 {
        background-color: #f56c6c24;
    }
}
.text-style {
    cursor: pointer;
    text-decoration: underline;
}
</style>
