<!-- 智能巡查 -->
<template>
    <div class="smart-inspection">
        <template v-for="(item, index) in columnConfig" :key="index">
            <div class="item-box">
                <div class="left-side">
                    <img class="icon" />
                </div>
                <div class="right-side">
                    <div class="field-item title">
                        <div class="label-text">{{ item.label }}</div>
                    </div>
                    <div class="field-item expection">
                        <div class="label-text">异常数</div>
                        <div class="value-text">{{ data[item.expection] }}</div>
                    </div>
                    <div class="field-item dispatch">
                        <div class="label-text">派单数</div>
                        <div class="value-text">{{ data[item.dispatch] }}</div>
                    </div>
                    <div class="field-item online">
                        <div class="label-text">总数 / 在线数</div>
                        <div class="value-text">{{ data[item.online] }}</div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})

const columnConfig = ref([
    {
        label: '视频巡查',
        icon: '',
        expection: '',
        dispatch: '',
        online: ''
    },
    {
        label: '公交巡查',
        icon: '',
        expection: '',
        dispatch: '',
        online: ''
    },
    {
        label: '专业巡查',
        icon: '',
        expection: '',
        dispatch: '',
        online: ''
    }
])
</script>
<style scoped lang="scss">
.smart-inspection {
    display: flexx;
}

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

    .icon {}

    .number-label-text {}

    .label-text {}
}
</style>