<template>
    <div style="width: 100%;height: 100%;">
        <div class="confer_top_hy">
            <div class="confer_item" style="width: 25%;">
                <span>{{ data[0].title }}</span>
                <span class="confer_num_feed" :style="{ color: data[0].color, marginTop: data[0].top }">
                    <span :style="{ fontSize: data[0].fontsize }">{{ data[0].value || 0 }}</span>
                    {{ data[0].unit }}
                </span>
            </div>
            <div class="confer_right_hy">
                <div class="confer_item" style="margin-bottom: 10px;flex-direction: row;">
                    <span>{{ data[1].title }}</span>
                    <span class="confer_num_feed" :style="{ color: data[1].color, marginTop: data[1].top }">
                        <span :style="{ fontSize: data[1].fontsize }">{{ data[1].value || 0 }}</span>
                    </span>
                </div>
                <div class="confer_bottom_hy">
                    <div class="confer_item" style="margin-right: 10px;flex-direction: row;">
                        <span>{{ data[2].title }}</span>
                        <span class="confer_num_feed" :style="{ color: data[2].color, marginTop: data[2].top }">
                            <span :style="{ fontSize: data[2].fontsize }">{{ data[2].value || 0 }}</span>
                            {{ data[2].unit }}
                        </span>
                    </div>
                    <div class="confer_item" style="flex-direction: row;">
                        <span>{{ data[3].title }}</span>
                        <span class="confer_num_feed" :style="{ color: data[3].color, marginTop: data[3].top }">
                            <span :style="{ fontSize: data[3].fontsize }">{{ data[3].value || 0 }}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="confer_person_box">
            <div class="confer_item" :style="{ flexDirection: item.align, }" v-for="(item, index) in configList" :key="index">
                <span>{{ item.title }}</span>
                <span class="confer_num_feed" :style="{ color: item.color, marginTop: item.top }">
                    <span :style="{ fontSize: item.fontsize }">{{ item.value || 0 }}</span>
                    {{ item.unit }}
                </span>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    arrData: {
        type: Object,
        default: {}
    }
})
const data = ref([{
    title: '会议总场次',
    value: null,
    color: 'rgb(67, 246, 223)',
    fontsize: '24px',
    top: '15px',
    unit: '场',
}, {
    title: '本月会议总时长',
    value: null,
    align: 'row',
}, {
    title: '本月会议总场次',
    value: null,
    align: 'row',
    unit: '场',
}, {
    title: '本月会议总人次',
    value: null,
    align: 'row',
},])
const configList = ref([{
    title: '会议总人次',
    value: null,
    color: 'rgb(67, 246, 223)',
    fontsize: '16px',
    top: '10px',
}, {
    title: '平均每日会议场次',
    value: null,
    color: 'rgb(67, 246, 223)',
    fontsize: '16px',
    top: '10px',
    unit: '场',
}, {
    title: '平均会议时长',
    value: null,
    color: 'rgb(67, 246, 223)',
    fontsize: '16px',
    top: '10px',
}, {
    title: '会议延时场次',
    value: null,
    color: 'rgb(67, 246, 223)',
    fontsize: '16px',
    top: '10px',
    unit: '场',
}, {
    title: '会议提前结束场次',
    value: null,
    color: 'rgb(67, 246, 223)',
    fontsize: '16px',
    top: '10px',
    unit: '场',
}, {
    title: '会议总时长',
    value: null,
    color: 'rgb(67, 246, 223)',
    fontsize: '16px',
    top: '10px',
}])

watch(() => props.arrData, (newVal) => {
    data.value[0].value = newVal.meetingYearSum
    data.value[1].value = newVal.meetingMonthHM
    data.value[2].value = newVal.meetingMonthSum
    data.value[3].value = newVal.meetingMonthManCount
    configList.value[0].value = newVal.meetingYearManCount
    configList.value[1].value = newVal.meetingAvgDayCount
    configList.value[2].value = newVal.meetingAvgTimes
    configList.value[3].value = newVal.meetingProlongYearCount
    configList.value[4].value = newVal.meetingStopYearCount
    configList.value[4].value = newVal.meetingYearHM
}, { deep: true, immediate: true } // 开启深度监听
)
</script>

<style scoped lang="scss">
.confer_person_box {
    width: 100%;
    height: 66%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    padding: 10px;

}

.confer_item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(21, 147, 214);
    font-size: 14px;
}

.confer_top_hy {
    display: flex;
    width: 100%;
    height: 33%;
    padding: 10px 10px 0px 10px;
}

.confer_right_hy {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    width: calc(75% - 10px);
}

.confer_bottom_hy {
    display: flex;
    align-items: center;
    flex: 1;
}

.confer_num_feed {
    font-size: 14px;
}
</style>
