<template>
  <div :class="b()">


    <div class="eye-flex-center" :class="b('wrap')">

      <div :class="b('left')">
        <slot name="left">
            <div>{{leftLabel}}</div>
        </slot>
      </div>

      <div :class="b('min')">
        <input  v-bind="$attrs"
                v-on="listenersMin"
                placeholder="最低价"
                type="number"
                :style="{ textAlign : textAlign }"
                :disabled="currentDisabled"
                :value="minValue"
        >
      </div>


      <span :class="b('split')"> {{splitChar}} </span>

      <div :class="b('max')">
        <input  v-bind="$attrs"
                v-on="listenersMax"

                placeholder="最高价"
                type="number"
                :style="{ textAlign : textAlign }"
                :disabled="currentDisabled"
                :value="maxValue"
        >
      </div>


      <div :class="b('right')">
        <slot name="right">
          <div>{{rightLabel}}</div>
        </slot>
      </div>
    </div>


  </div>
</template>

<script>


import { Component,Field,Core } from 'eye-core';

export default Component({

  name: 'value-range',

  mixins: [ Field ],

  props: {
      splitChar:{
          type:String,
          default:'~'
      },
      textAlign:{
          type: String,
          default: 'center'
      },
      maxLength: {
          type: [Number,String],
          default: 0
      },
      leftLabel:String,
      rightLabel:String
  },

  data() {
    return {
        currentValue:null,
        minValue:'',
        maxValue:'',
        selectValue:'',
        slotInited: false
    };
  },

  computed: {
      listenersMin() {
          return {
              ...this.$listeners,
              input: this.onMinInput,
              blur:this.onMinBlur,
              keypress: this.onKeypress
          };
      },

      listenersMax() {
          return {
              ...this.$listeners,
              input: this.onMaxInput,
              blur:this.onMaxBlur,
              keypress: this.onKeypress
          };
      }
  },


  methods: {

      currentValueChange(value) {
          if(Core._.isObject(value)) {
              this.minValue = value.min;
              this.maxValue = value.max;
          }
      },

      onMinInput(event) {

          if(this.checkInput(event)) {
              this.minValue = event.target.value;
              this.doInput(event)
          }

      },

      onMaxInput(event) {

          if(this.checkInput(event)) {
              this.maxValue = event.target.value;
              this.doInput(event)
          }
      },

      onKeypress(event) {

          const value = event.target.value;
          const { keyCode } = event;
          if(value) {
              const allowPoint = value.indexOf('.') === -1;
              const isValidKey = (keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint);
              if (!isValidKey) {
                  event.preventDefault();
              }
          }

          this.$emit('keypress', event);
      },

      onMinBlur(event) {
          let value = this.isRange(true);
          value && (this.minValue = value,
                    this.doInput(event))
      },

      onMaxBlur(event) {
          let value = this.isRange();
          value && (this.maxValue = value,
                    this.doInput(event))
      },

      /**
       * 重置选中值
       */
      resetCurrentValue() {
          this.minValue = '';
          this.maxValue = '';
      },

      /**
       * 暂时不验证
       * @param isMin
       */
      isRange(isMin) {
          // let { minValue, maxValue } = this;
          // if(minValue && maxValue) {
          //     minValue = Number(minValue);
          //     maxValue = Number(maxValue);
          //     if(minValue > maxValue) {
          //         return isMin ? maxValue : minValue;
          //     }
          // }
          // return isMin ? maxValue : minValue
      },

      checkInput(event) {
          let value = event.target.value;
          let maxLength = Number(this.maxLength);
          if(maxLength && value && value.length > maxLength) {
              event.target.value = value.substr(0,maxLength);
              event.target.returnValue = false;
              return false;
          }
          return true;
      },

      doInput(event) {

          this.currentValue = {
              min : this.minValue,
              max: this.maxValue
          }
      }
  }


});
</script>
