import Vue from 'vue';
import "../../../src/scss/input.scss";
import WVIcon from "../WIcon";
export default Vue.extend().extend({
  name: 'w-input',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    label: String,
    labelWidth: {
      type: Number,
      default: 105
    },
    placeholder: String,
    value: String,
    name: String,
    autoComplete: {
      type: String,
      default: 'off'
    },
    maxlength: Number,
    minlength: Number,
    autofocus: Boolean,
    readonly: Boolean,
    disabled: Boolean,
    required: {
      type: Boolean,
      default: false
    },
    pattern: String,
    validateMode: {
      type: Object,
      default: function _default() {
        return {
          onFocus: true,
          onBlur: true,
          onChange: true,
          onInput: true
        };
      }
    }
  },
  data: function data() {
    return {
      active: false,
      valid: true,
      currentValue: this.value
    };
  },
  methods: {
    handleInput: function handleInput(event) {
      // 当有最大长度属性时，限制过长的输入
      if (this.maxlength && event.target.value.length >= this.maxlength) {
        this.currentValue = '';
        this.currentValue = event.target.value.substr(0, this.maxlength);
      } else {
        this.currentValue = event.target.value;
      }

      if (typeof this.validateMode === 'undefined' || this.validateMode.onInput) {
        this.validate();
      }
    },
    focus: function focus() {
      this.$refs.input.focus();
    },
    onFocus: function onFocus() {
      this.active = true;
      this.$emit('focus');

      if (typeof this.validateMode === 'undefined' || this.validateMode.onFocus !== false) {
        this.validate();
      }
    },
    onBlur: function onBlur() {
      this.active = false;
      this.$emit('blur');

      if (typeof this.validateMode === 'undefined' || this.validateMode.onBlur !== false) {
        this.validate();
      }
    },
    onChange: function onChange() {
      this.$emit('change', this.currentValue);

      if (typeof this.validateMode === 'undefined' || this.validateMode.onChange !== false) {
        this.validate();
      }
    },
    validate: function validate() {
      if (this.pattern) {
        var reg = new RegExp(this.pattern);

        if (!reg.test(this.currentValue)) {
          this.valid = false;
          return;
        }
      }

      if (this.required && this.currentValue === '') {
        this.valid = false;
        return;
      }

      if (this.minlength && this.currentValue.length < this.minlength) {
        this.valid = false;
        return;
      }

      this.valid = true;
    }
  },
  watch: {
    currentValue: function currentValue(val) {
      this.$emit('input', val);
    },
    value: function value(val) {
      this.currentValue = val;
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "class": {
        'weui-cell': true,
        'weui-cell_warn': !this.valid
      }
    }, [h("div", {
      "class": "weui-cell__hd"
    }, [this.label && h("label", {
      "class": "weui-label",
      "domProps": {
        "innerHTML": this.label
      },
      "style": {
        width: this.labelWidth + 'px'
      }
    })]), h("div", {
      "class": "weui-cell__bd"
    }, [h("input", {
      "class": "weui-input",
      "ref": "input",
      "attrs": {
        "type": this.type,
        "auto-complete": this.autoComplete,
        "autofocus": this.autofocus,
        "placeholder": this.placeholder,
        "readonly": this.readonly,
        "number": this.type === 'number',
        "maxlength": this.maxlength,
        "minlength": this.minlength
      },
      "domProps": {
        "value": this.currentValue
      },
      "on": {
        "focus": this.onFocus,
        "blur": this.onBlur,
        "change": this.onChange,
        "input": this.handleInput
      }
    })]), h("div", {
      "class": "weui-cell__ft"
    }, [!this.valid && h(WVIcon, {
      "attrs": {
        "type": "warn"
      }
    }), this.$slots.ft])]);
  }
});
//# sourceMappingURL=WInput.js.map