<template>
    <div class="slider_demo_block" v-if="props.tempValue !== null && props.tempValue !== undefined">
        <el-slider :model-value="props.tempValue" vertical disabled :max="140" :min="-10" :marks="marks"
            class="temp_slider" :class="getTempClass" :style="sliderStyle" />
    </div>
</template>

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

const props = defineProps({
    tempValue: {
        type: Number, // 传入的温度
    },
    sliderWidth: {// 进度条宽度
        type: Number,
        default: 10,
    },
    sliderHeighth: {// 进度条高度
        type: Number,
    },
})

/** 颜色 & 进度条 class */
function getTempColor(val) {
    if (val >= 120) return { class: 'temp_red', color: '#F44336' } // 红
    if (val >= 75) return { class: 'temp_orange', color: '#FF9800' } // 橙
    return { class: 'temp_green', color: '#4CAF50' }      // 绿
}

/** 进度条主体颜色 class */
const getTempClass = computed(() => getTempColor(props.tempValue).class)

/** slider 上的刻度 marks */
const marks = computed(() => {
    if (props.tempValue == null || isNaN(props.tempValue)) return {}

    const { color } = getTempColor(props.tempValue)
    const valueNum = Number(props.tempValue)    // 数值型 key
    const valueLabel = Math.round(valueNum)

    return {
        [valueNum]: {
            style: { color, fontWeight: 'bold' },
            label: `${valueLabel}°C`,
        },
    }
})
// slider 动态样式
const sliderStyle = computed(() => ({
    '--marks-font-size': `${props.sliderWidth * 1.8}px`,// 刻度字体大小
    '--runway-width': `${props.sliderWidth}px`, // 进度条宽度
    '--slider-height': props.sliderHeighth
        ? `${props.sliderHeighth}px`
        : '0.5em',                   // 进度条高度
}))

</script>

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

:deep(.temp_slider) {
    height: var(--slider-height, 0.5em);// 进度条高度

    .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; //绿色
    }

    --marks-font-size: 18px;
    --runway-width: 10px;

    .el-slider__marks-text {
        font-size: var(--marks-font-size);// 刻度字体大小
        left:130%;// 刻度字体位置
    }

    .el-slider__runway {
        width: var(--runway-width);// 进度条宽度
    }

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

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

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

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

:deep(.temp_red .el-slider__runway .el-slider__bar) {
    background-color: #F44336;
}
</style>
