<template>
    <div class="water_sink" :style="{
        width: `${slotWidth}px`,
        height: `${slotHeight}px`,
    }">
        <!-- 水槽  -->
        <div class="u_slot">
            <div class="u_slot_side u_slot_left" :style="sideStyle"></div>
            <div class="u_slot_bottom" :style="bottomStyle"></div>
            <div class="u_slot_side u_slot_right" :style="sideStyle"></div>
        </div>
        <!-- 水位图 -->
        <WaterLevelMap :waterLevelValue="waterLevelValue" :textSize="slotWidth * 0.2" class="water_level water_level_pos3" />
        <!-- temp值组件 -->
        <TempSlider :tempValue="tempValue" :sliderHeighth="slotHeight * 0.8" :sliderWidth="slotWidth * 0.08"
            class="temp_pos" v-if="tempValue" />
        <div class="title_pos" :style="{ fontSize: `${bottomHeight}px` }">
            {{ props.title }}
        </div>
    </div>
</template>

<script setup>
import TempSlider from '@/components/HnyzDcs/TempSliderComponent.vue'
import WaterLevelMap from '@/components/HnyzDcs/WaterLevelMapComponent.vue'
import { computed } from 'vue'

const props = defineProps({
    title: {
        type: String,
    },
    iconSize: {
        type: Number,
    },
    width: {
        type: Number,
    },
    height: {
        type: Number,
    },
    waterLevelValue: {
        type: Number,
    },
    tempValue: {
        type: Number,
    },
})

// 尺寸逻辑
const slotWidth = computed(() => props.width ?? props.iconSize ?? 100)
const slotHeight = computed(() => props.height ?? props.iconSize ?? 60)

// 水槽边的宽度（按比例）
const sideThickness = computed(() => Math.max(4, Math.round(slotWidth.value * 0.15)))
const bottomHeight = computed(() => Math.max(4, Math.round(slotHeight.value * 0.2)))

// 左右竖边的样式
const sideStyle = computed(() => ({
    width: `${sideThickness.value}px`,
    height: `${slotHeight.value}px`,
    backgroundColor: '#666',
}))
// 底部横边的样式
const bottomStyle = computed(() => ({
    height: `${bottomHeight.value}px`,
    width: `${slotWidth.value - sideThickness.value * 2}px`,
    backgroundColor: '#666',
}))

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

// 水位表样式
const getWaterLevelStyle = computed(() => ({
    '--water_level_text_size': `${slotWidth.value * 0.2}px`,
}))

</script>

<style scoped lang="scss">
.water_sink {
    position: relative;

    .u_slot {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: relative;

        /* 左右竖边 */
        .u_slot_side {
            z-index: 10;
            background-color: #666;
        }

        /* 底部横边 */
        .u_slot_bottom {
            z-index: 10;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .water_level {
        width: 100%;
        height: 90%;
    }

    :deep(.dv-water-pond-level text) {
        font-size: var(--water_level_text_size, 20px)
    }

    .water_level_pos3 {
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .temp_pos {
        position: absolute;
        top: 4%;
        right: -14%;
        z-index: 100;
    }

    .title_pos {
        position: absolute;
        top: 90%;
        left: 50%;
        z-index: 100;
        font-size: 14px;
        transform: translate(-50%, -50%);
        color: #fff;
    }
}
</style>
