<template>
    <div id="scroll-board">
        <dv-scroll-board :config="config" />
    </div>
</template>
  
<script setup name='scrollBoard' lang="ts">
import { watch, ref, Ref, nextTick } from 'vue'

const props = defineProps({
    scrollCyCT: {
        type: Object,
        default: {}
    }
})

interface dataInfo {
    x: string,
    y: string
}

let config: Ref<object> = ref({})

watch(() => props.scrollCyCT, () => {

    if (props.scrollCyCT.dataList) {
        let dd: Array<Array<string>> = []
        nextTick(() => {
            props.scrollCyCT.dataList.forEach((e: dataInfo) => {
                let de: Array<string> = []
                de[0] = e.x
                de[1] = e.y
                dd.push(de)
            })
            let d = {
                header: ['科室', props.scrollCyCT.reportName],
                indexHeader: '序号',
                data: dd,
                index: true,
                columnWidth: [80, 150],
                align: ['center', 'left', 'center'],
                rowNum: 7,
                headerBGC: '#1981f6',
                headerHeight: 45,
                oddRowBGC: 'rgba(0, 44, 81, 0.8)',
                evenRowBGC: 'rgba(10, 29, 50, 0.8)'
            }

            config.value = d
        })
    }

}, { deep: true, immediate: true })

</script>
  
<style lang="scss">
#scroll-board {
    width: 23%;
    box-sizing: border-box;
    margin-left: 20px;
    height: 100%;
    overflow: hidden;
}
</style>