/**
 * 数字段
 * @author niewei
 */
import ElInput from 'element-ui/packages/input';
export default {
  name: 'ProInputNumberRange',

  componentName: 'ProInputNumberRange',

  components: {
      ElInput
  },
  
  props: {
    value: { required: true},
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
 
    // 精度参数
    precision: {
      type: Number,
      default: 0,
      validator(val) {
        return val >= 0 && val === parseInt(val, 10);
      },
    },
     /**
     * 输入框提示语
    */
    placeholder: {
      type: String,
      default: '请输入,请输入'
    }
  },
  data() {
    return {
      userInputForm: null, // 最小值
      userInputTo: null, // 最大值
    }
  },
  computed: {},
  methods: {
    // 根据精度保留数字
    toPrecision(num, precision) {
      if (precision === undefined) precision = 0;
      return parseFloat(
        Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
      );
    },
    // 设置成精度数字
    setPrecisionValue(value) {
      if (!value) return null;
      const newVal = Number(value);
      // 如果是非数字空返回null
      if (isNaN(value)) return null;
      if (typeof newVal === "number" && this.precision !== undefined) {
        const val = this.toPrecision(value, this.precision);
        return val;
      }
      return null;
    }
  },
  render() {
    const {
      $listeners,
      disabled,
      userInputForm,
      userInputTo,
      placeholder
    } = this
    const formData = {
      prop:{
        disabled,
        value:userInputForm,
        placeholder:placeholder.split(',')[0],
        ...this.$attrs
      },
      on:{
        blur:(event) => {
          this.$emit("blurfrom", event);
        },
        input: (v) => {
          if ($listeners.input){
            this.userInputForm  = v
          }
        },
        focus:(event)=>{
          this.$emit("focusfrom", event);
        },
        change:(value)=>{
          const newVal = this.setPrecisionValue(value);
          this.userInputForm = newVal;
          // 如果初始化数字的精度不符合代码设置时重置数字
          this.userInputTo = this.setPrecisionValue(this.userInputTo);
          if (!this.userInputForm && !this.userInputTo) {
            this.$emit("input", '');
            this.$emit("changefrom", newVal);
            return;
          }
     
          if (!this.userInputTo) {
            this.userInputForm = newVal;
          } else {
            // 最小值大于最大值时逻辑判断
            this.userInputForm =
              !newVal || parseFloat(newVal) <= parseFloat(this.userInputTo)
                ? newVal
                : this.userInputTo;
          }
          this.$emit("input", `[${'' + this.userInputForm},${'' + this.userInputTo}]`);
          this.$emit("changefrom", newVal);
        }
      }
    }

    const toData = {
      prop:{
        disabled,
        value:userInputTo,
        placeholder:placeholder.split(',')[1] || '请输入',
        ...this.$attrs
      },
      on:{
        blur:(event) => {
          this.$emit("blurto", event);
        },
        input: (v) => {
          if ($listeners.input){
            this.userInputTo  = v
            // $listeners.input.apply(this, [v])
          }
        },
        focus:(event)=>{
          this.$emit("focusto", event);
        },
        change:(value)=>{
          const newVal = this.setPrecisionValue(value);
          this.userInputTo = newVal;
          this.userInputForm = this.setPrecisionValue(this.userInputForm);
          if (!this.userInputTo && !this.userInputForm) {
            this.$emit("input", '');
            this.$emit("changefrom", newVal);
            return;
          }
          if (!this.userInputForm) {
            this.userInputTo = newVal;
          } else {
            // 最大值小于最小值时逻辑判断
            this.userInputTo =
              !newVal || parseFloat(newVal) >= parseFloat(this.userInputForm)
                ? newVal
                : this.userInputForm;
          }
          this.$emit("input", `[${'' + this.userInputForm},${'' + this.userInputTo}]`);
          this.$emit("changeto", newVal);
        }
      }
    }
    return (
      <div class={disabled?'input-number-range is-disabled' : 'input-number-range'}>
        <div class="flex">
          <div class="from">
            {/* blur:最小值失焦事件
            focus:最小值聚焦事件
            input:最小值输入事件
            change:最小值change事件 */}
            <ElInput {...formData}
              ref="input_from"
              value={userInputForm}
              disabled={disabled}
              placeholder={placeholder.split(',')[0] || '请输入'}
            ></ElInput>
          </div>
          <div class="center">
            <span>至</span>
          </div>
          <div class="to">
            {/* blur:最大值失焦事件
            focus:最大值聚焦事件
            input:最大值输入事件
            change:最大值change事件 */}
            <ElInput {...toData}
              ref="input_to"
              value={userInputTo}
              disabled={disabled}
              placeholder={placeholder.split(',')[1] || '请输入'}
            ></ElInput>
          </div>
        </div>
      </div>
    )
  }
}