<template>
    <div id="ranking-board">
        <div class="ranking-board-title">
            {{ props.rankingMzjc.reportName }}
            {{ props.rankingMzjc.overview }}
            {{ props.rankingMzjc.unit }}
        </div>
        <dv-scroll-ranking-board :config="config" />
    </div>
</template>
  
<script setup name='rankingBoard' lang="ts">
import { watch, nextTick, Ref, ref } from 'vue'

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

interface dataInfo {
    x: string,
    y: number
}

interface configType {
    name: string,
    value: number
}

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

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

    if (props.rankingMzjc.dataList) {
        let dd: Array<configType> = []
        nextTick(() => {
            props.rankingMzjc.dataList.forEach((e: dataInfo) => {
                let de: configType = {} as any
                de.name = e.x
                de.value = e.y
                dd.push(de)
            })

            let d = {
                data: dd,
                rowNum: 9
            }

            config.value = d
        })

    }

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

</script>
  
<style lang="scss">
#ranking-board {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-grow: 0;
    flex-direction: column;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;
    padding: 0px 10px;

    .ranking-board-title {
        font-weight: bold;
        height: 50px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-size: 20px;
    }

    .dv-scroll-ranking-board {
        flex: 2;
        overflow: hidden;
        height: calc(100% - 50px);
    }
}
</style>