<template>
    <div class="person_box">
        <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
    </div>
</template>

<script setup>
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const config = ref({
    headerBGC: '#10285c',
    oddRowBGC: '#10285c7f',
    evenRowBGC: '#10285c00',
    header: ['告警内容', '地点', '状态', '时间'],
    data: [
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
        ['行1列1', '行1列2', '行1列3', '行1列3'],
    ]
})

watch(() => props.resultData, (newVal) => {
    if (newVal) {
        let arrData = []
        let arrData1 = newVal.AlarmList
        if (arrData1 && arrData1.length > 0) {
            arrData1.forEach(item => {
                let arrData2 = []
                arrData2.push(item.AlarmContent)
                arrData2.push(item.Location)
                let title = ''
                if (item.State == 0) {
                    title = '正常'
                } else {
                    title = '异常'
                }
                arrData2.push(title)
                arrData2.push(item.Date)
                arrData.push(arrData2)
            })
        }
        config.value.data = arrData
    }
}, { deep: true, immediate: true } // 开启深度监听
)
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
</style>