<template>
    <!-- 水解罐：水位、温度 -->
    <div class="water_level_tank" :style="{ width: iconSize + 'px', height: iconSize + 'px' }">
        <!-- 罐体 -->
        <!-- font-size大小可调节 ，根据传进来的值来控制图标的大小 -->
        <i class="icon iconfont-colour tank" :class="tankIconClass" :style="{ fontSize: iconSize + 'px' }">
            <!-- 标题 -->
            <div class="tank_title" v-if="title">{{ title }}</div>
            <!-- 水位 -->
            <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" :class="tempPosClass">
                <el-slider v-model="temperatureValue" vertical disabled max="140" min="-10" :marks="marks"
                    class="temperature_slider" :class="getTempClass" />
            </div>
        </i>
        <!-- 压力  -->
        <div class="pressure_block" v-if="pressureValueRef"
            :style="{ width: iconSize * 0.375 + 'px', height: iconSize * 0.375 + 'px' }">
            <div ref="chartRef" :style="{ width: iconSize * 0.5 + 'px', height: iconSize * 0.5 + 'px' }"
                class="pressure_chart"></div>
        </div>
        <!-- 重量 -->
        <div class="weight_block" v-if="weightValue >= 0" :style="{ width: iconSize * 0.3 + 'px' }">
            <div class="weight_value">{{ weightValue }}kg</div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, computed, toRef } from 'vue'
import * as echarts from 'echarts'
//图表

const chartRef = ref(null)
let myChart = null
onBeforeUnmount(() => {
    if (myChart) {
        window.removeEventListener('resize', myChart.resize)
        myChart.dispose()
    }
})

const props = defineProps({
    temperatureValue: {//温度
        type: Number,
        default: null
    },
    waterLevelValue: {// 水位值
        type: Number,
        default: -1,// -1表示未传水位值
        // required: true
    },
    pressureValue: {// 压力值
        type: Number,
        // default: -1,// -1表示未传压力值
    },
    weightValue: {// 重量值
        type: Number,
        default: -1,// -1表示未传重量值
    },
    tankType: {// 罐型1下锥2上锥3平4上圆
        type: Number,
        default: 1,// 1表示默认罐型水解罐
    },
    iconSize: {
        type: Number,
        default: 200,
    },
    title: {//罐名
        type: String,
    },
})

function initChart() {
    if (chartRef.value) {
        if (myChart) {
            myChart.dispose()
        }
        myChart = echarts.init(chartRef.value, null, {
            renderer: 'svg'
        });
        myChart.setOption(option.value);
        window.addEventListener('resize', myChart.resize);
    }
}

watch(
    () => props.iconSize,
    (val) => {
        if (val && val > 0) {
            nextTick(() => {
                initChart();
            });
        }
    },
    { immediate: true } // 立即执行一次
);
//图表配置项
const option = ref({
    series: [
        {
            max: 1,// 最大值
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            axisLine: {//仪表盘刻度
                lineStyle: {
                    width: props.iconSize * 0.05,
                    color: [
                        [0.4, '#4CAF50'],//绿色：正常
                        [0.7, '#fb8a1c'],//橙色：警告
                        [1, '#F44336']//红色：危险
                    ],
                }
            },
            pointer: {
                itemStyle: {
                    color: 'auto'
                }
            },
            axisTick: {//细刻度
                distance: -(props.iconSize * 0.05),
                length: 8,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            splitLine: {//粗刻度
                distance: -(props.iconSize * 0.05),
                length: (props.iconSize * 0.05) + 5,
                lineStyle: {
                    color: '#fff',
                    width: 4
                }
            },
            axisLabel: {
                show: false,//不显示
                color: 'inherit',
                distance: (props.iconSize * 0.05) + 5,
                fontSize: 8,// 刻度字体大小 
            },
            detail: {// 数值显示
                valueAnimation: true,// 数值变化动画
                // formatter: '{value} Mpa',
                formatter: function (value) {
                    return '{value|' + value.toFixed(3) + '}{unit|MPa}';
                },
                rich: {
                    value: {
                        fontSize: props.iconSize * 0.06,
                        fontWeight: 'bolder',
                        color: 'inherit',
                        padding: [0, 0, -10, 0]
                    },
                    unit: {
                        fontSize: props.iconSize * 0.04,
                        color: 'inherit',
                        padding: [0, 0, -10, 4]
                    }
                },
                // color: 'inherit',
                // fontSize: props.iconSize * 0.05,// 数值字体大小
                offsetCenter: [0, '45%'],
                // backgroundColor: '#999',
                // width: '100%',
            },
            data: [
                {
                    value: props.pressureValue?.toFixed(3),
                }
            ],
        }
    ]
})



//温度值
const temperatureValue = computed({
    get() {
        return props.temperatureValue
    },
})

const getTempClass = computed(() => {
    if (temperatureValue.value > 120) {
        return 'temp_red'
    } else if (temperatureValue.value > 75) {
        return 'temp_orange'
    } else {
        return 'temp_green'
    }
})
// 取出 pressureValue 的响应式引用
const pressureValueRef = toRef(props, 'pressureValue')

// 正确 watch 用法
watch(pressureValueRef, (newVal) => {
    if (myChart && typeof newVal === 'number' && newVal >= 0) {
        myChart.setOption({
            series: [
                {
                    type: 'gauge',
                    data: [{ name: '', value: newVal.toFixed(3) }]
                }
            ]
        })
    }
})
// 罐型图标
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
)
//温度
const marks = computed(() => {
    const val = parseFloat(temperatureValue.value);
    const displayVal = val % 1 === 0 ? val.toFixed(0) : val.toFixed(1);
    return {
        [temperatureValue.value]: {
            style: {
                color: val < 75 ? '#4CAF50' : (val < 120 ? '#FFC107' : '#ff0000'),
                fontWeight: 'bold',
            },
            label: `${displayVal}°C`
        }
    };
});



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



</script>

<style scoped lang="scss">
//水位罐
.water_level_tank {
    .tank {
        position: relative;
        z-index: 10;

        //罐子名称
        .tank_title {
            position: absolute;
            top: -7%;
            left: 44%;
            font-size: 30px;
            color: #FFA500;
            font-weight: bold;
        }

        // 水位
        .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: 29.5%;
        }

        .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;

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

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

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

                .el-slider__marks-text {
                    color: #fff; //字体颜色 
                    font-size: large;
                }

                .el-slider__runway {
                    width: 10px; //进度条宽度
                }

                .el-slider__runway .el-slider__bar {
                    width: 100%;
                }

                .el-slider__marks-stop {
                    width: 100%;
                }
            }

            .temp_green {
                :deep(.el-slider__runway .el-slider__bar) {
                    background-color: #4CAF50; //绿色
                }
            }

            .temp_red {
                :deep(.el-slider__runway .el-slider__bar) {
                    background-color: #F44336; //红色
                }
            }

            .temp_orange {
                :deep(.el-slider__runway .el-slider__bar) {
                    background-color: #fb8a1c; //橙色
                }
            }
        }

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

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

        .temp_pos3 {
            position: absolute;
            top: 15%;
            left: 64%;
        }

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

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



    }

    // 压力
    .pressure_block {
        background-color: #e4e4e4;
        position: absolute;
        top: 52%;
        left: 31%;
        z-index: 10;
        border-radius: 50%;

        .pressure_chart {
            position: absolute;
            top: -16%;
            left: -16%;
        }
    }

    .weight_block {
        position: absolute;
        z-index: 11;
        top: 6%;
        left: 35%;
        text-align: center;

        .weight_value {
            font-size: 16px;
            // color: #333;
            background-color: #e4e4e4;
            border: #333 1px solid;
        }
    }
}
</style>