<!-- 每日巡检 -->
<template>
    <div class="key-inspection">
        <div class="title-block">
            <div class="title-text">关键点经常性检查</div>
            <div class="date-text">巡查月份: {{ date }}</div>
        </div>
        <div class="content-block">
            <div class="item-box-list">
                <template v-for="(item, index) in columnConfig" :key="index">
                    <div class="item-box">
                        <div class="left-side">
                            <div class="main-field-item-box">
                                <img />
                                <div class="right-side">
                                    <div class="number-label-text">{{ data[item.name] }}</div>
                                    <div class="label-text">{{ item['label'] }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="right-side">
                            <div class="sub-field-item-box">
                                <img />
                                <div class="right-side">
                                    <div class="number-label-text">{{ data[item.name] }}</div>
                                    <div class="label-text">{{ item['label'] }}</div>
                                </div>
                            </div>

                            <div class="sub-field-item-box">
                                <img />
                                <div class="right-side">
                                    <div class="number-label-text">{{ data[item.name] }}</div>
                                    <div class="label-text">{{ item['label'] }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})

const date = ref('2025/10/10')

const columnConfig = ref([
    {
        label: '边坡总数',
        name: '',
        icon: '',
        completeLabel: '完成率',
        completeIcon: '',
        completeValue: '',
        countLabel: '派单数',
        countIcon: '',
        countValue: ''
    },
    {
        label: '边坡总数',
        name: '',
        icon: '',
        completeLabel: '完成率',
        completeIcon: '',
        completeValue: '',
        countLabel: '派单数',
        countIcon: '',
        countValue: ''
    },
])

</script>
<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;

.key-inspection {}

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

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

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

    .number-label-text {}

    .label-text {}
}
</style>