<!-- 国省通风险管控 -->
<template>
    <div class="state-road">
        <div class="top-bar">
            <div class="top-item-box">
                <img class="icon" />
                <div class="right-side">
                    <div class="number-label-text">{{ data }}</div>
                    <div class="label-text">国道巡检总人数</div>
                </div>
            </div>
            <div class="top-item-box">
                <img class="icon" />
                <div class="right-side">
                    <div class="number-label-text">{{ data }}%</div>
                    <div class="label-text">履职率</div>
                </div>
            </div>
        </div>

        <div class="bottom-bar">
            <template v-for="(item, index) in columnConfig" :key="index">
                <div class="item-box">
                    <div class="top-side">{{ item['title'] }}</div>
                    <div class="bottom-side">
                        <div>
                            <div class="person-block">{{ data[item.person] }} <span class="person-text">人</span></div>
                        </div>
                        <div class="flex">
                            <img />
                            <div class="">巡查履职完成率</div>
                            <div>
                                <span class="percent-text">{{ data[item.percent] }}%</span>{{ item.percentSubfix }}
                            </div>
                        </div>
                    </div>

                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})
const columnConfig = ref([
    {
        title: '交通主管部门责任人',
        icon: '',
        person: '',
        percent: '',
        percentSubfix: '1次/半年',
    },
    {
        title: '公路机构责任人',
        icon: '',
        person: '',
        percent: '',
        percentSubfix: '1次/1月',
    },
    {
        title: '养护站（道班）责任人',
        icon: '',
        person: '',
        percent: '',
        percentSubfix: '1次/半年',
    },
    {
        title: '路段护路员',
        icon: '',
        person: '',
        percent: '',
        percentSubfix: '1次/2周',
    }
])
</script>
<style scoped lang="scss"></style>