<template>
  <div :class="_class" @click="onClick">
    <span v-if="prefix" :class="_prefixClass">{{ prefix }}</span>
    <div :class="_inputWrapClassName">
      <Icon v-if="icon" :icon="icon" :class="_iconClass" @click="onIconClick"/>
      <textarea
        class="hive-input__input-input"
        v-bind="$attrs"
        v-if="type === 'textarea'"
        ref="textarea"
        :rows="rows"
        :value="curValue"
        :disabled="disabled"
        @input="onInput"
        @change="onChange"
        @blur="onBlur"
        @focus="onFocus"
        @keyup.enter="onEnter"
      ></textarea>
      <input
        class="hive-input__input-input"
        v-bind="$attrs"
        v-else
        ref="input"
        :type="type"
        :value="curValue"
        :disabled="disabled"
        @input="onInput"
        @change="onChange"
        @blur="onBlur"
        @focus="onFocus"
        @keyup.enter="onEnter"
      >

      <span :class="_suffixIconClass" v-if="curSuffixIcon">
        <Icon :icon="curSuffixIcon"/>
      </span>
      <span class="hive-input__input-icon hive-input__input-icon--suffix" v-if="allowClear&&!disabled&&curValue">
        <Icon
          icon="circle_clear"
          class="hive-input__input-close"
          @click="onSuffixIconClick"
        />
      </span>

    </div>
    <div
      v-if="maxlength && !maxlengthHidden"
      :class="_lengthInfoClass"
    >{{ (curValue + '').length }}/{{ maxlength }}</div>
    <span v-if="suffix" :class="_suffixClass">{{ suffix }}</span>
  </div>
</template>

<script>
  import FormSize from '../scripts/mixins/form-size';
  import WatchCurValue from '../scripts/mixins/wacth-cur-value';
  import Icon from '../icon';

  const name = 'hive-input';

  export default {
    name: 'hive-input',
    components: {
      Icon,
    },
    mixins: [FormSize, WatchCurValue],
    inheritAttrs: false,
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },
      focused: {
        type: Boolean,
        default: false,
      },
      icon: String,
      suffix: String,
      prefix: String,
      suffixIcon: String,
      value: [String, Number, Array],
      type: {
        type: String,
        default: 'text',
      },
      rows: {
        type: [Number, String],
        default: 3,
      },
      allowClear: Boolean,
      maxlength: Number,
      maxlengthHidden: Boolean,
      error: {
        type: Boolean,
        default: false,
      },
      size: { type: String, default: 'default' },
    },
    data() {
      return {
        curValue: this.value,
        curFocused: this.focused,
        curDisabled: this.disabled,
        curError: this.error || false,
      };
    },
    computed: {
      _class() {
        return [
          `${name}`,
          {
            [`${name}--size-${this.curSize}`]: this.curSize,
          },
        ];
      },
      _inputWrapClassName() {
        return [
          `${name}__input`,
          {
            [`${name}__input--status-error`]: this.curError,
            [`${name}__input--focused`]: this.curFocused,
            [`${name}__input--disabled`]: this.curDisabled,
          },
        ];
      },
      _iconClass() {
        return [
          `${name}__input-icon`,
          {
            [`${name}__input-icon--prefix`]: this.icon,
          },
        ];
      },
      _suffixClass() {
        return [`${name}__suffix`];
      },
      _prefixClass() {
        return [`${name}__prefix`];
      },
      _suffixIconClass() {
        return [
          `${name}__input-icon`,
          `${name}__input-icon--suffix`,
          {
            [`${name}__input-close`]: this.allowClear,
            visible: this.curValue !== '' && this.curValue !== undefined,
          },
        ];
      },
      _lengthInfoClass() {
        return [`${name}-length-info`];
      },

      curSuffixIcon() {
        // if (this.allowClear) {
        //   return 'circle_clear';
        // }
        return this.suffixIcon;
      },
    },
    watch: {
      value(value) {
        this.curValue = value;
      },
      disabled(value) {
        this.curDisabled = value;
      },
    },

    created() {
      this.blurT = 0;
    },

    beforeMount() {
      clearTimeout(this.blurT);
    },

    methods: {
      focus() {
        (this.$refs.input || this.$refs.textarea).focus();
      },
      blur() {
        (this.$refs.input || this.$refs.textarea).blur();
      },

      onClick(event) {
        this.$emit('click', event);
      },

      onInput(event) {
        let { value } = event.target;
        // 转数字
        if (this.type === 'number') {
          if (value !== '') {
            value = isNaN(+value) ? value : +value;
          }
        }
        this.curValue = value;
      },
      onChange(event) {
        const { value } = event.target;
        this.$emit('change', value);
      },

      onFocus(event) {
        this.curFocused = true;
        clearTimeout(this.blurT);
        this.$emit('focus', event);
      },
      onEnter(event) {
        this.$emit('enter', event);
      },
      onBlur(event) {
        this.blurT = setTimeout(() => {
          if (this.curFocused) {
            this.curFocused = false;
            this.$emit('blur', event);
            this.dispatch('hive-form-item', 'form.blur', this.curValue);
          }
        }, 150);
      },

      // 图标点击
      onIconClick(event) {
        this.$emit('iconclick', event);
      },
      onSuffixIconClick(event) {
        // 清除内容
        if (this.allowClear) {
          event.stopPropagation();
          this.curValue = '';
        }
        this.$emit('suffixiconclick', event);
      },
    },
  };
</script>
