<template>
    <div class="input-box">
        <!-- 前置元素 -->
        <slot name="appendFront" v-if="$slots.appendFront"></slot>
        <input
            v-model="question"
            type="text"
            :class="className"
            :name="name"
            :placeholder="placeholder"
            :autocomplete="autoComplete"
            :readonly="readonly"
            :autofocus="autofocus"
            :disabled="disabled"
            @focus="handleFocus"
            @blur="handleBlur"
            @keyup.enter="keyupFunc"
        >
        <!-- 后置元素 -->
        <slot name="appendBack" v-if="$slots.appendBack"></slot>
    </div>
</template>
<script>
export default {
    name: 'VGlobalInput',
    data() {
      return {
        question:''
      };
    },
    props: {
      value: [String, Number],
      className: String,     
      placeholder: String,
      readonly: Boolean,
      autofocus: Boolean,
      icon: String,
      disabled: Boolean,
      name: String,     
      autoComplete: {
        type: String,
        default: 'off'
      },
      validateEvent: {
        type: Boolean,
        default: true
      },
      onIconClick: Function
    },
    computed: {
      validating() {
        return this.$parent.validateState === 'validating';
      }
    },
    watch: {
      value: function(val) {
        this.question = val;
      },
      // 如果 question 发生改变，这个函数就会运行
      question: function (newQuestion) {
        this.$emit('change', newQuestion);
      }
    },
    methods: {
      handleBlur(event) {
        this.$emit('blur', event);
        if (this.validateEvent) {
          this.$emit('ElFormItem', 'el.form.blur', [this.question]);
        }
      },
      keyupFunc(){
          this.$emit('change', this.question);
      },
      inputSelect() {
        this.$refs.input.select();
      },
      handleFocus(event) {
        this.$emit('focus', event);
      }
    },
    created() {
        this.$on('inputSelect', this.inputSelect);
    }
}
</script>