/**
* @Author think
* @Date 2020-07-20 16:47
*/

<template>
  <section class="h-range">
    <Range
      :decimal="decimal" v-model.number="currentValue" :min="min" :max="max"
      :maxHTML="maxHTML" :minHTML="minHTML"
      :step="step" :disabled="disabled" :disabled-opacity="disabledOpacity" :range-bar-height="rangeBarHeight"
      :range-handle-height="rangeHandleHeight" @on-change="change" @on-touchstart="touchStart" @on-touchend="touchEnd"/>
  </section>
</template>
<script>
import {Range} from 'vux'
export default {
  name: 'HRange',
  components: {
    Range,
  },
  props: {
    decimal: {
      type: Boolean,
      default: false,
    },
    value: {
      default: 0,
      type: Number,
    },
    min: {
      type: Number,
      default: 0,
    },
    minHTML: {
      type: String,
      default: '',
    },
    maxHTML: {
      type: String,
      default: '',
    },
    max: {
      type: Number,
      default: 100,
    },
    step: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    disabledOpacity: {
      type: Number,
      default: 0.7,
    },
    rangeBarHeight: {
      type: Number,
      default: 1,
    },
    rangeHandleHeight: {
      type: Number,
      default: 20,
    },
  },
  data () {
    return {
      currentValue: 0,
    }
  },
  created () {
    this.currentValue = this.value
  },
  mounted () {
    let vm = this
    setTimeout(() => {
      vm.$el.querySelector('.range-handle').style.width = `${vm.rangeHandleHeight}px`
      vm.$el.querySelector('.range-handle').style.height = `${vm.rangeHandleHeight}px`
      vm.$el.querySelector('.vux-range-input-box').style.marginRight = '40px'
      vm.$el.querySelector('.vux-range-input-box').style.marginLeft = '40px'
    }, 10)
  },
  methods: {
    change (val) {
      this.$emit('input', val)
      this.$emit('change', val)
    },
    touchStart (e) {
      this.$emit('touchstart', e)
    },
    touchEnd (e) {
      this.$emit('touchend', e)
    },

  },
}
</script>

<style lang="less">
  .h-range{
   // height: 100%;
    .range-handle{
      height: 20px;
      width: 20px;
    }

  }
</style>
