Untitled

<template>
  <div
    class="form__control form__input--slider"
    :class="{ 'form__input--slider__electricity': type === 'electricity' }"
  >
    <div class="gas-label" v-if="type === 'gas'">
      <i
        v-if="showHouseIcons"
        class="icon vf-icon  icon vf-icon vf-icon-nb_private_end_user_rgb vf-icon-nb_private_end_user_rgb--left"
      ></i>
      <span class="gas-value" :class="{ 'gas-value__left': !showHouseIcons }">{{
        gasLabelValue
      }}</span>
      <i
        v-if="showHouseIcons"
        class="icon vf-icon  icon vf-icon vf-icon-nb_private_end_user_rgb vf-icon-nb_private_end_user_rgb--right"
      ></i>
    </div>
    <div :class="{ 'vue-slider__spacer': showHouseIcons }"></div>
    <vue-slider
      v-bind="options"
      ref="slider"
      v-model="value"
      @change="sendConsumption"
      :hide-label="type === 'gas' ? true : false"
      :height="4"
      :width="type === 'gas' ? 'auto' : '95%'"
    ></vue-slider>
  </div>
</template>

<script>
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';

const GAS_MARKS = {
  0: 4500,
  14: 7500,
  28: 10500,
  42: 15000,
  56: 18750,
  70: 27000,
  84: 36000,
  100: 45000
};

const ENERGY_MARKS = {
  0: 1500,
  20: 2500,
  40: 3000,
  60: 4000,
  80: 5000,
  100: 7000
};

// migrate to vue3


// export default {
//   components: {
//     VueSlider
//   },
//   props: {
//     consumption: {
//       type: [Number, String],
//       required: true
//     },
//     defaultValue: {
//       type: Number
//     },
//     fieldName: {
//       type: String
//     },
//     type: {
//       type: String
//     },
//     gasFactor: {
//       type: Number
//     },
//     showHouseIcons: {
//       type: Boolean,
//       default: true
//     }
//   },
//   data() {
//     return {
//       value: this.defaultValue || 20,
//       options: {
//         dotSize: 20,
//         dotStyle: {
//           border: 'none',
//           background: 'black'
//         },
//         processStyle: {
//           background: 'black'
//         },

//         width: 'auto',
//         height: 8,
//         contained: false,
//         direction: 'ltr',
//         stepStyle: {
//           opacity: 0
//         },
//         min: 0,
//         max: 100,
//         included: true,
//         hideLabel: false,
//         disabled: false,
//         clickable: true,
//         duration: 0.4,
//         adsorb: true,
//         tooltip: 'none',
//         labelActiveStyle: {
//           opacity: '1'
//         },
//         marks: this.type === 'gas' ? { ...GAS_MARKS } : { ...ENERGY_MARKS }
//       },
//       factor: this.gasFactor || 150,
//       gasLabelValue: '0m²'
//     };
//   },

//   watch: {
//     consumption: function(newVal, oldVal) {
//       if (this.$refs.slider.marks[this.value] !== newVal) {
//         this.setSlider(newVal);
//       }

//       if (this.type === 'gas') {
//         this.setGasLabel(newVal);
//       }
//     },

//     type(newVal) {
//       this.getSliderMarks(newVal);
//       this.$nextTick(() => {
//         this.initSlider(newVal);
//       });
//     }
//   },

//   mounted() {
//     this.initSlider(this.type);
//   },

//   methods: {
//     initSlider(type) {
//       Array.from(document.getElementsByClassName('vue-slider-mark-label')).forEach(
//         element => {
//           element.innerHTML = '';
//         }
//       );
//       this.setSlider(this.consumption);
//       if (type === 'gas') {
//         this.setGasLabel(this.consumption);
//       }
//     },

//     getSliderMarks(type) {
//       const marks = type === 'gas' ? { ...GAS_MARKS } : { ...ENERGY_MARKS };

//       this.$set(this.options, 'marks', marks);
//     },

//     sendConsumption: function(val) {
//       if (this.consumption !== this.$refs.slider.marks[val]) {
//         this.$emit('callback', this.$refs.slider.marks[val].toString(), this.fieldName);
//       }
//     },

//     setSlider: function(newVal) {
//       let val = 0;
//       const slider = this.$refs.slider;
//       const marks = slider.marks;

//       Object.keys(marks).forEach(key => {
//         if (marks[key] <= newVal) {
//           val = key;
//         }
//       });
//       if (val !== slider.getValue()) {
//         slider.setValue(val);

//         if (marks[val] !== newVal) {
//           this.$emit('callback', newVal, this.fieldName);
//         }
//       }
//     },

//     setGasLabel: function(val) {
//       const calculatedValue = Math.floor(parseInt(val) / this.factor);
//       this.gasLabelValue = `${isNaN(calculatedValue) ? 0 : calculatedValue}m²`;
//     }
//   }
// };
</script>
<style src="./style/consumptionSlider.less" lang="less"></style>