<template>
  <div class="el-bio-string"  @mouseenter="onMouseenter">
    <el-input
      ref="bioStringInput"
      :value="value"
      v-bind="$attrs"
      :maxlength="max"
      @input="onInput"
      @blur="onBlur"
      @change="onChange"
      @clear="onClear">
    </el-input>

    <p v-if="value && value.length === max" class="bio-string__warn">
      {{ t('bio.public.stringMax1') }}
      {{max}}
      {{ t('bio.public.stringMax2') }}
    </p>
  </div>
</template>

<script>
import Locale from 'bio-ui-vue2/src/mixins/locale';

export default {
  name: 'BioString',
  inheritAttrs: false,

  mixins: [Locale],

  props: {
    value: [String, Number],

    maxlength: {
      type: [String, Number],
      default: ''
    }
  },

  data() {
    return {
      max: ''
    };
  },

  created() {
    if (this.maxlength) {
      if (typeof this.maxlength === 'string') {
        // eslint-disable-next-line radix
        this.max = parseInt(this.maxlength);
      } else {
        this.max = this.maxlength;
      }
    } else {
      this.max = 100;
    }
  },

  methods: {
    onInput(e) {
      this.$emit('input', e);
    },

    onBlur(e) {
      this.$emit('blur', e);
    },

    onChange(e) {
      this.$emit('change', e);
    },

    onClear(e) {
      this.$emit('clear', e);
    },

    onMouseenter() {
      this.$emit('mouseenter', this.$refs.bioStringInput);
    }
  }
};
</script>
