<template>
  <div class="my-slider">
    <div class="my-slider__tooltip" :style="style">
      <div class="my-slider__tooltip-wrapper">
        {{ slider }}
      </div>
    </div>
    <el-slider
      v-model="slider"
      :format-tooltip="(value) => `${value}`"
      :show-tooltip="false"
      :min="min"
      :max="max"
      @input="input"
    ></el-slider>
  </div>
</template>

<script>
export default {
  name: "MySlider",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: Number,
      default: 100,
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      slider: this.value,
    };
  },
  watch: {
    value(newValue) {
      this.slider = newValue;
    },
  },
  computed: {
    style() {
      const length = this.max - this.min,
        progress = this.slider - this.min,
        left = (progress / length) * 100;
      return {
        paddingLeft: `${left}%`,
      };
    },
  },
  methods: {
    input(value) {
      this.$emit("change", value);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-slider {
  position: relative;
  .my-slider__tooltip {
    position: absolute;
    top: 6px;
    z-index: 999;
    text-align: left;
    .my-slider__tooltip-wrapper {
      width: 7.5vw;
      height: 3.6vw;
      font-size: 0.6rem;
      color: #2bcced;
      text-align: center;
      background: url("../../../assets/market/filter-left/tips.png") no-repeat;
      background-size: 100% 100%;
      transform: translateX(-50%);
      top: -50%;
    }
  }
}
</style>
