<!-- SidePanelItem.vue -->
<template>
    <div>
        <SidePanelItem title="水质监测数据告警情况"  :select="select" >
            <div class="body_box">
                <div class="box" v-for="(item, index) in data" :key="index">
                    <div>
                        <div :class="item.icon" :style="{background:item.background}"></div>
                        <div class="title_text">{{ item.name }}</div>
                    </div>
                    <div><span class="text_num">{{ item.num }}</span><span>座</span></div>
                </div>
            </div>
        </SidePanelItem>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import SidePanelItem from "@/components/SidePanelItem/index.vue";

// 定义组件名（便于调试和递归）
defineOptions({
    name: "jidiInfoMod",
});
const select = ref({
    show: true,
    value: undefined,
    options: [],
    picker: undefined,
    format: undefined
});
const data = ref([
    {
        name:'正常',
        num:'56',
        icon:'iconfont icon-shuidianzhan1 zhuangji',
        background:'#78c300',
    },
     {
        name:'告警',
        num:'0',
        icon:'iconfont icon-shuidianzhanGaojing shebeiZhengchang',
        background:'#e55555',
    },
     {
        name:'无数据',
        num:'0',
        icon:'iconfont icon-shuidianzhanWushujv shebeiLixian',
        background:'#8d8d8d',
    },
])
// 页面加载时执行的逻辑
onMounted(() => { });
</script>

<style lang="scss">
.body_box {
    width: 100%;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .box {
        width: 126px;
        height: 116px;
        border: 1px solid rgba(108, 164, 247, 0.35);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .iconfont {
            width: 40px;
            height: 40px;
            background: #78c300;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            color: #fff;
        }
        .title_text{
            width: 100%;
            text-align: center;
        }
        .text_num{
            width: 100%;
            text-align: center;
            font-size: 24px;
        }
    }
}
</style>
