<!-- 农村公路路障数值化履职 -->
<template>
    <div class="country-road">
        <div class="top-side">
            <div class="info-item-box">
                <img class="icon" />
                <div class="right-side">
                    <div class="number-label-text">{{ '' }}<span class="special">人</span></div>
                    <div class="label-text">{{ '农村公路巡检总人数' }}</div>
                </div>
            </div>
        </div>
        <div class="bottom-side">
            <template v-for="(item, index) in columnConfig" :key="index">
                <div class="bottom-item-box">
                    <img class="icon" />
                    <div class="right-side">
                        <div class="number-label-text" :class="{special: item.special}">{{ data[item.name] }}</div>
                        <div class="label-text">{{ item['label'] }}</div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})
const columnConfig = ref([
    {
        label: '事件总数 (件)',
        special: true,
        icon: '',
        name: '',
    },
    {
        label: '处置数 (件)',
        icon: '',
        name: '',
    },
    {
        label: '处置中 (件)',
        icon: '',
        name: '',
    }
])
</script>
<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;


.info-item-box {
    display: flex;
    align-items: center;

    .icon {}

    .special {}

    .number-label-text {}

    .label-text {}
}

.bottom-item-box {
    display: flex;
    align-items: center;

    .icon {}

    .special {}

    .number-label-text {}

    .label-text {}
}
</style>