<template>
    <div id="water-level-chart">
        <div class="water-level-chart-title">病危病重在院人数占比</div>

        <div class="water-level-chart-details">
            危重病人数: <span>
                {{
                    Number.isNaN(Number(props.waterChart[1]?.overview)) ? 0 : Number(props.waterChart[1]?.overview) +
                        Number(props.waterChart[2]?.overview)
                }}
            </span>
            {{
                props.waterChart[0]?.unit
            }}
        </div>

        <div class="chart-container">
            <dv-water-level-pond :config="config" />
        </div>
    </div>
</template>
  
<script setup name='waterLevelChart' lang="ts">
import { watch, Ref, ref, nextTick } from 'vue'

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

interface dataInfo {
    data: Array<number>,
    shape: string,
    waveHeight: number,
    waveNum: number,
}

let config: Ref<dataInfo> = ref({}) as any

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

    nextTick(() => {
        let m = Number(props.waterChart[1]?.overview) + Number(props.waterChart[2]?.overview)
        if (!Number.isNaN(m)) {
            let n = Number((m / props.waterChart[0]?.overview * 100).toFixed(2))
            let l = {
                data: [n],
                shape: 'round',
                waveHeight: 25,
                waveNum: 2
            }
            config.value = l
        } else {
            let l = {
                data: [0],
                shape: 'round',
                waveHeight: 25,
                waveNum: 2
            }
            config.value = l
        }

    })

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

</script>
  
<style lang="scss">
#water-level-chart {
    width: 25%;
    box-sizing: border-box;
    margin-left: 20px;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    display: flex;
    flex-direction: column;

    .water-level-chart-title {
        font-weight: bold;
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 20px;
        justify-content: center;
    }

    .water-level-chart-details {
        height: 15%;
        display: flex;
        justify-content: center;
        font-size: 17px;
        align-items: flex-end;

        span {
            font-size: 35px;
            font-weight: bold;
            color: #58a1ff;
            margin: 0 5px;
            margin-bottom: -5px;
        }
    }

    .chart-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dv-water-pond-level {
        max-width: 90%;
        width: 200px;
        height: 200px;
        border: 10px solid #19c3eb;
        border-radius: 50%;

        ellipse {
            stroke: transparent !important;
        }

        text {
            font-size: 40px;
        }
    }
}
</style>