<template>
    <!-- 水解罐：水位、温度 -->
    <div class="water_level_tank">
        <!-- 罐体 -->
        <i class="icon iconfont-colour tank" :class="tankIconClass">
            <!-- 水位 -->
            <div v-if="waterLevelValue >= 0">
                <dv-water-level-pond :config="waterLevelConfig" class="water_level" :class="waterLevelPosClass" />
            </div>
            <!-- 温度计 -->
            <div class="slider-demo-block" v-if="temperatureValue >= 0" :class="tempPosClass">
                <el-slider v-model="temperatureValue" vertical disabled max="150" min="0" :marks="marks"
                    class="temperature_slider" :class="{ 'high_temp': temperatureValue > 70 }" />
            </div>
        </i>
    </div>
</template>

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

const props = defineProps({
    temperatureValue: {//温度
        type: Number,
        default: -1
    },
    waterLevelValue: {// 水位值
        type: Number,
        default: -1,// -1表示未传水位值
        // required: true
    },
    tankType: {// 罐型
        type: Number,
        default: 1,// 1表示默认罐型水解罐
    }
})
//温度值
const temperatureValue = computed({
    get() {
        return props.temperatureValue
    },
})
// 罐型图标
const tankIconClass = computed(() => {
    return props.waterLevelValue >= 0 ? 'icon-tank'+ props.tankType : 'icon-initialTank'+ props.tankType;
});

// 水位图标位置
const waterLevelPosClass = computed(() =>
    'water_level_pos' + props.tankType
)
// 温度计图标位置
const tempPosClass = computed(() =>
    'temp_pos' + props.tankType
)


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

const marks = computed(() => ({
    [temperatureValue.value]: `${temperatureValue.value}°C`
}))
</script>

<style scoped lang="scss">
//水位罐
.water_level_tank {
    .tank {
        position: relative;
        font-size: 200px; //罐子大小可调节

        // 水位
        .water_level {
            width: 0.4em;
            height: 0.5em;
        }

        //水位图位置
        .water_level_pos1 {
            position: absolute;
            top: 11%;
            left: 30%;
        }

        .water_level_pos2 {
            position: absolute;
            top: 38%;
            left: 30%;
        }

        .water_level_pos3 {
            position: absolute;
            top: 18%;
            left: 30%;
        }

        .water_level_pos4 {
            position: absolute;
            top: 17%;
            left: 31%;
        }

        .dv-water-pond-level :deep(canvas) {
            position: absolute;
        }

        .dv-water-pond-level :deep(rect) {
            // fill:unset;//去掉默认的颜色
            width: 99%;
            height: 99%;
            stroke-width: 0 !important;
        }

        // 温度计
        .slider-demo-block {
            max-width: 600px;
            display: flex;
            align-items: center;

            .temperature_slider {
                height: 0.5em;
                margin-left: 8% !important;

                :deep(.el-slider__runway .el-slider__button-wrapper .el-slider__button) {
                    position: absolute;
                    left: 22%;
                    bottom: 22%;
                    display: none;//隐藏进度条上的圆形按键
                }

                :deep(.el-slider__runway .el-slider__bar) {
                    background-color: lightgreen; //绿色
                }
            }

            .high_temp {
                :deep(.el-slider__runway .el-slider__bar) {
                    background-color: crimson; //红色
                }
            }
        }

        //温度计位置
        .temp_pos1 {
            position: absolute;
            top: 10%;
            left: 63%;
        }

        .temp_pos2 {
            position: absolute;
            top: 37%;
            left: 63%;
        }

        .temp_pos3 {
            position: absolute;
            top: 20%;
            left: 63%;
        }

        .temp_pos4 {
            position: absolute;
            top: 20%;
            left: 64%;
        }

        .slider-demo-block .el-slider {
            margin-top: 0;
            margin-left: 12px;
        }

    }
}
</style>