<template>
    <dv-water-level-pond :config="waterLevelConfig" v-if="waterLevelValue > 0"
        :style="getWaterLevelStyle" />
</template>

<script setup>

import { computed } from 'vue'

const props = defineProps({
    waterLevelValue: {
        type: Number,
    },
    textSize: {// 水位图文字大小
        type: Number,
        default: 20,
    }
})

// 仅传 waterLevelValue，内部组装 config
const waterLevelConfig = computed(() => ({
    data: [props.waterLevelValue],
    waveHeight: 3,// 波浪高度
}))

//水位表字体样式
const getWaterLevelStyle = computed(() => ({
    '--water_level_text_size': `${props.textSize}px`,
}))

</script>

<style scoped lang="scss">

:deep(svg text) {
  font-size: var(--water_level_text_size, 20px) !important;
}

</style>
