<template>
    <div class="slider-demo-block ph_pos" v-if="props.phValue !== null && props.phValue !== undefined">
        <el-slider :model-value="props.phValue" vertical disabled :max="14" :min="0" :marks="marks" class="ph_slider"
            :class="getPhClass" />
    </div>
</template>

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

const props = defineProps({
    phValue: Number
})

function getPhColor(val) {//color与class对应
    if (val >= 9) return { class: 'ph_purple', color: '#9C27B0' }//强碱 紫色
    if (val >= 7) return { class: 'ph_blue', color: '#2196F3' }//弱碱 蓝色
    if (val >= 6) return { class: 'ph_green', color: '#4CAF50' }// 中性 绿色
    if (val >= 4) return { class: 'ph_orange', color: '#FF9800' }// 弱酸 橙色
    return { class: 'ph_red', color: '#F44336' } // 强酸 红色
}
//ph管道
const getPhClass = computed(() => getPhColor(props.phValue).class)
//ph显示值
const marks = computed(() => {
    if (props.phValue == null || isNaN(props.phValue)) return {}

    const { color } = getPhColor(props.phValue)
    const valueNum = Number(props.phValue)
    const valueLabel = valueNum.toFixed(1)  //  保留一位小数

    return {
        [valueNum]: {
            style: {
                color,
                fontWeight: 'bold',
            },
            label: `pH: ${valueLabel}`,
        },
    }
})

</script>


<style scoped lang="scss">
.slider-demo-block {
    max-width: 600px;
    display: flex;
    align-items: center;
}

:deep(.ph_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%;
    }
}

:deep(.ph_green .el-slider__runway .el-slider__bar) {
    background-color: #4CAF50;
}

:deep(.ph_orange .el-slider__runway .el-slider__bar) {
    background-color: #FF9800;
}

:deep(.ph_red .el-slider__runway .el-slider__bar) {
    background-color: #F44336;
}

:deep(.ph_blue .el-slider__runway .el-slider__bar) {
    background-color: #2196F3;
}

:deep(.ph_purple .el-slider__runway .el-slider__bar) {
    background-color: #9C27B0;
}
</style>
