<template>
    <div class="bottom-right-table-3">
        <dv-border-box-6>
            <div class="table-name">
                <img src="../img/icon2.png" />
                {{ props.dataInfo.reportName }}: &nbsp;
                <span style="color: #c12c1f; font-size: larger;">{{ props.dataInfo.overview }}</span>
                {{ props.dataInfo.unit }}
            </div>

            <dv-scroll-board :config="config" />
        </dv-border-box-6>
    </div>
</template>
  
<script setup name='BottomRightTable3' lang="ts">
import { ref, Ref, onUpdated } from 'vue'

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

interface dataType {
    x: string,
    y: string
}

interface figType {
    data: Array<any>,
    index: boolean,
    columnWidth: Array<any>,
    align: Array<any>,
    oddRowBGC: string,
    evenRowBGC: string,
}

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

onUpdated(async () => {
    dataArr.value = []
    let unit = props.dataInfo.unit
    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.data = dataArr.value
    config.value.index = true
    config.value.columnWidth = [45, 100]
    config.value.align = ['center', 'left', 'left']
    config.value.oddRowBGC = 'rgba(9, 37, 50, 0.4)'
    config.value.evenRowBGC = 'rgba(10, 32, 50, 0.3)'
})
</script>
  
<style lang="scss">
.bottom-right-table-3 {
    width: calc(25% + 10px);
    height: 100%;
    margin: 0 -5px;

    .border-box-content {
        padding: 20px;
        box-sizing: border-box;
    }

    .table-name {
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;

        img {
            width: 40px;
            height: 40px;
            margin-right: 5px;
        }
    }

    .dv-scroll-board {
        height: calc(100% - 60px);
    }
}
</style>