<template>
  <div class="el-bio-input">
    <div class="bts-item__label">
      {{ form.fieldname }}
    </div>

    <i
      v-if="form.custom"
      class="bts-item__delete el-icon-error"
      @click="$emit('deleteSearchItem')"></i>

    <el-input
      v-if="form.fieldtype === 'string'"
      v-model="form.value"
      ref="bioInput"
      :maxlength="100"
      clearable
      :class="{'lang': form.value && form.value.length > 4}"
      @clear="$emit('clear')"
      @blur="$emit('blur')"
      @keyup.enter.native="enter">
    </el-input>

    <el-input
      v-else-if="form.fieldtype === 'num'"
      v-model="form.value"
      ref="bioInput"
      type="number"
      clearable
      @clear="$emit('clear')"
      @blur="$emit('blur')"
      @keyup.enter.native="enter">
    </el-input>
  </div>
</template>

<script>
export default {
  name: 'BioInput',
  props: {
    form: {
      type: Object,
      required: true
    }
  },

  methods: {
    enter() {
      this.$refs.bioInput.blur();
    }
  }
};
</script>
