<template>
    <div id="leftChart2">
        <div class="lc2-header" style="font-size: larger;">
            {{ props.dataInfo.reportName }}
        </div>
        <div class="lc2-details">
            <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}{{ props.dataInfo.unit
            }}</span>
        </div>
        <dv-scroll-board ref="scrollBoard" :config="config" class="lc2-chart" @click="clickHandler" />
        <dv-decoration2 style="height:10px;" />
    </div>
</template>
  
<script setup name="LeftChart2" lang="ts">
import { ref, Ref, onUpdated } from 'vue'

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

interface dataType {
    x: string,
    y: string
}

interface figType {
    header: Array<string>,
    data: Array<Array<any>>,
    index: boolean,
    columnWidth: Array<any>,
    align: Array<any>,
    indexHeader: string,
    rowNum: number,
    carousel: string,
}

const dataArr: Ref<Array<any>> = ref([])
const config = ref({} as figType)

onUpdated(async () => {
    dataArr.value = []
    let unit = props.dataInfo.unit
    let str = props.dataInfo.reportName
    if (props.dataInfo.dataList) {
        await props.dataInfo.dataList.forEach((e: dataType) => {
            let d: Array<string> = []
            d[0] = e.x
            d[1] = e.y + unit
            dataArr.value.push(d)
        })
    }
    config.value.header = ['科室', str]
    config.value.data = dataArr.value
    config.value.index = true
    config.value.columnWidth = [50, 120]
    config.value.align = ['center', 'left', 'center']
    config.value.indexHeader = '序号'
    config.value.rowNum = 6
    config.value.carousel = 'page'
})

const clickHandler = (e: any) => {
    console.log(e)
}

</script>
  
<style lang="scss" scoped>
#leftChart2 {
    width: 50%;
    margin: 10px 5px;
    text-align: center;
    display: flex;
    flex-direction: column;

    .lc2-header {
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        text-indent: 20px;
        margin-top: 10px;
    }

    .lc2-details {
        height: 40px;
        font-size: 16px;
        margin-top: 2px;
        // display: flex;
        // align-items: center;
        // text-indent: 20px;

        span {
            color: #096dd9;
            font-weight: bold;
            font-size: 35px;
            margin-left: 20px;
        }
    }

    .lc2-chart {
        margin-top: 4px;
        height: calc(100% - 80px);
    }
}
</style>