<template>
    <!-- 钠钾锂分离-单个罐体：水位、温度 -->
    <div class="tank_body" :style="getTankBodyStyle">
        <!-- 罐体 -->
        <i class="icon iconfont-hnyz-colour tank" :class="tankIconClass" :style="getTankStyle">
            <!-- 标题 200-30px-->
            <div class="tank_title" v-if="title" :style="{ fontSize: `${iconSize * 0.15}px` }">{{ title }}</div>
            <!-- 水位 -->
            <div v-if="waterLevelValue >= 0">
                <dv-water-level-pond :config="waterLevelConfig" class="water_level water_level_pos3" />
            </div>
        </i>
        <!-- temp值组件 -->
        <TempSlider :tempValue="tempValue" :sliderWidth="iconSize*0.05" class="temp_pos" />
    </div>
</template>

<script setup>
import TempSlider from '@/components/HnyzDcs/TempSliderComponent.vue'

import { computed } from 'vue'

const props = defineProps({
    tempValue: {//temp
        type: Number,
        default: null
    },
    waterLevelValue: {// 水位值
        type: Number,
        default: -1,// -1表示未传水位值
    },
    iconSize: {//图标大小
        type: Number,
        default: 200,
    },
    title: {//罐名
        type: String,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
})


//罐体样式
const getTankBodyStyle = computed(() => ({
    width: `${props.iconWidth ?? props.iconSize}px`,
    height: `${props.iconHeight ?? props.iconSize}px`,
    fontSize: `${props.iconSize}px`,
}))


// 罐子样式
const getTankStyle = computed(() => {
    const style = {
        fontSize: props.iconSize + 'px',
        display: 'inline-block'
    }
    //根据传进来的iconWidth和iconHeight来控制图标的大小
    const scaleX = props.iconWidth ? props.iconWidth / props.iconSize : 1
    const scaleY = props.iconHeight ? props.iconHeight / props.iconSize : 1

    if (scaleX !== 1 || scaleY !== 1) {
        style.transform = `scale(${scaleX}, ${scaleY})`
    }

    return style
})

// 罐型图标
const tankIconClass = computed(() => {
    return props.waterLevelValue >= 0 || props.fanStatus ? 'icon-hnyz-colourfloorTank_hollowedOut' : 'icon-hnyz-colourfloorTank'
});

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

//temp值
const tempValue = computed({
    get() {
        return props.tempValue
    },
})

</script>

<style scoped lang="scss">
//水位罐
.tank_body {
    text-align: center;
    position: relative;

    .tank {
        position: relative;
        z-index: 10;

        //罐子名称
        .tank_title {
            position: absolute;
            top: 75%;
            left: 49%;
            transform: translate(-50%, -50%);
            color: #e65100;
            font-weight: bold;
        }

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

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

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

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


    }

    .temp_pos {
        position: absolute;
        top: 22%;
        left: 60%;
        z-index: 100;
    }


}
</style>