<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"/>
      <span class="hive-tag hive-tag--closable f fc" v-for="(item,index) in curTags" :key="index">
        {{ item }}
        <Icon icon="clear" class="hive-tag__close" @click="onRemoveTagItem(index)"/>
      </span>
      <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"
        @keyup.delete="onDelete"
      >
      <Icon
        :icon="curSuffixIcon"
        v-if="curSuffixIcon&&!curDisabled"
        :class="_suffixIconClass"
        @click="onSuffixIconClick"
      />
    </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-tag',
    components: {
      Icon,
    },
    mixins: [FormSize, WatchCurValue],
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },
      focused: {
        type: Boolean,
        default: false,
      },
      icon: String,
      suffix: String,
      prefix: String,
      suffixIcon: String,
      value: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: 'text',
      },
      rows: {
        type: [Number, String],
        default: 3,
      },
      allowClear: Boolean,
      maxlength: Number,
      maxlengthHidden: Boolean,
      tags: Array,
      error: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        curValue: this.value,
        curFocused: this.focused,
        curDisabled: this.disabled,
        curTags: this.tags || [],
        curError: this.error || false,
      };
    },
    computed: {
      _class() {
        return [
          `${name}`,
          {
            [`${name}--size-${this.curSize}`]: this.curSize,
            [`${name}-tag`]: this.tags && this.tags.length > 0,
          },
        ];
      },
      _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--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;
      },
      tags(value) {
        this.curTags = 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);
      },
      onDelete(event) {
        if (this.disabled) return;
        if (
          event.keyCode === 8 &&
          this.curValue === '' &&
          this.curTags.length > 0
        ) {
          this.onRemoveTagItem(this.curTags.length - 1);
        }
      },
      // 图标点击
      onIconClick(event) {
        this.$emit('iconclick', event);
      },
      onSuffixIconClick(event) {
        // 清除内容
        if (this.allowClear) {
          event.stopPropagation();
          this.curValue = '';
        }
        this.$emit('suffixiconclick', event);
      },
      // 删除搜索项
      onRemoveTagItem(index) {
        this.curTags.splice(index, 1);
        this.$emit('tagdelete', this.curTags);
      },
    },
  };
</script>
