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

<script setup>
import { computed } from 'vue'

const props = defineProps({
    sensorValue: {
        type: Array,
        default: () => [66],
    },
    sensorWidth: {
        type: Number,
        default: 100,
    },
    sensorHeight: {
        type: Number,
        default: 100,
    },
})

// 显示用的 sensorValue，保证有默认值
const displaySensorValue = computed(() => {
    if (!props.sensorValue || props.sensorValue.length === 0) {
        return [66];
    }
    return props.sensorValue;
})

// 内部缓存的 sensor 值
const currentSensorValue = ref(displaySensorValue.value[0]);

// 监听传入值，只有变了才更新 
watch(
    () => displaySensorValue.value[0],
    (newVal) => {
        if (newVal !== currentSensorValue.value) {
            currentSensorValue.value = newVal;
        }
    }
);

// 组装 config，只在值变时更新
const waterLevelConfig = computed(() => ({
    data: [currentSensorValue.value],
    waveHeight: 3,
}));

// 样式
const getWaterLevelStyle = computed(() => ({
    '--water_level_text_size': `${props.sensorWidth * 0.2}px`,
    width: props.sensorWidth + 'px',
    height: props.sensorHeight + 'px',
}))
</script>

<style scoped lang="scss">
:deep(svg text) {
    font-size: var(--water_level_text_size, 20px) !important;
}
</style>
