<template>
  <div class="slider-demo-block">
    <span class="demonstration">温度</span>
    <el-slider v-model="temperatureVal" :format-tooltip="temperatureValConst" disabled />
  </div>
  <div class="slider-demo-block">
    <span class="demonstration">湿度</span>
    <el-slider v-model="humidityVal" :format-tooltip="humidityValConst" disabled />
  </div>
  <div class="slider-demo-block">
    <span class="demonstration">风力</span>
    <el-slider v-model="windVal" :format-tooltip="windValConst" disabled />
  </div>
  <div class="slider-demo-block">
    <span class="demonstration">雨量</span>
    <el-slider v-model="rainVal" :format-tooltip="rainValConst" disabled />
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue';

// let props = defineProps({
//   temperatureVal: Number,
//   humidityVal: Number,
//   windVal: Number,
//   rainVal: Number,
//   draggable: Boolea
// })

const props = defineProps({
  temperatureVal: {
    type: Number,
    default: 12
  },
  humidityVal: {
    type: Number,
    default: 12
  },
  windVal: {
    type: Number,
    default: 12
  },
  rainVal: {
    type: Number,
    default: 12
  }
});

let { temperatureVal, humidityVal, windVal, rainVal } = toRefs(props);

// let value2 = ref<number>(props.humidityVal ?? 0);
// let value3 = ref<number>(props.windVal ?? 0);
// let value4 = ref<number>(props.rainVal ?? 0);

const formatTooltip = (val: number) => {
  return val / 100;
};

// 温度
const temperatureValConst = (val: number) => {
  return val + ' ℃';
};

// 湿度
const humidityValConst = (val: number) => {
  return val + ' %RH';
};

//风力 wind
const windValConst = (val: number) => {
  return val / 10 + ' m/s';
};

// 雨 rainVal
const rainValConst = (val: number) => {
  return val + ' mm';
};
</script>

<style scoped>
.slider-demo-block {
  max-width: 300px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 35px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
}

/* 添加以下样式来缩小滑块圆圈 */
:deep(.el-slider__button) {
  width: 14px !important; /* 默认是 20px */
  height: 14px !important; /* 默认是 20px */
  border-radius: 50%; /* 确保是圆形 */
}

/* 如果你也想缩小激活状态下的圆圈 */
:deep(.el-slider__button-wrapper:hover .el-slider__button) {
  width: 20px !important; /* 悬停时稍微大一点 */
  height: 20px !important;
}
</style>
