<template>
  <div class="lyf-ui-field" :class="{
    'lyf-ui-field-focus': isFocus,
    'lyf-ui-textarea-field': isTextarea
  }">
    <form action="" class="lyf-ui-field-form">
      <template v-if="isTextarea">
        <textarea ref="lyfUi_fieldInputRef" class="lyf-ui-field-input lyf-ui-field-textarea"
          :placeholder="$attrs.placeholder" :maxlength="maxlength" :rows="rows" :value="value" @input="onInput"
          @focus="onFocus" @blur="onBlur" @change="onChange"></textarea>
      </template>
      <template v-else>
        <input ref="lyfUi_fieldInputRef" class="lyf-ui-field-input" :type="$attrs.type" :placeholder="$attrs.placeholder"
          :value="value" @input="onInput" @focus="onFocus" @blur="onBlur" @change="onChange" v-bind="$attrs" />
      </template>
    </form>
    <div class="lyf-ui-field-clear" v-show="isFocus && value.length > 0" @click="clearClick">
      <template v-if="isTextarea">
        <div class="lyf-ui-field-word-count">{{ value.length }}/{{ maxlength }}</div>
      </template>
      <lyf-icon icon="close2" :color="placeholderColor"></lyf-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LyfField',
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ''
    },
    // 仅对 textarea 有效
    rows: {
      type: Number,
      default: 4
    },
    maxlength: {
      type: Number,
      default: 100
    },
  },
  data() {
    return {
      isFocus: false,
      placeholderColor: 'var(--placeholder-color)'
    }
  },
  computed: {
    isTextarea() {
      return this.$attrs.type === 'textarea'
    }
  },
  emits: ['input', 'clear', 'change', 'action-event'],
  methods: {
    onFocus() {
      this.isFocus = true
    },
    onBlur() {
      setTimeout(() => {
        this.isFocus = false
      }, 50)
    },
    onInput(e) {
      this.$emit('input', e.target.value)
    },
    onChange(e) {
      this.$emit('change', e.target.value)
    },
    clearClick() {
      this.$emit('input', '')
      this.$emit('clear')
      this.$refs.lyfUi_fieldInputRef.focus()
    },
    actionClick() {
      this.$emit('action-event')
    }
  },
}
</script>

<style scoped>
.lyf-ui-field {
  position: relative;
  overflow: hidden;
  padding: var(--field-padding);
  box-sizing: border-box;
  border-style: solid;
  border-radius: var(--field-border-radius);
  border-width: var(--field-border-width);
  border-color: var(--field-border-color);
  background-color: var(--field-background);
}

.lyf-ui-field .lyf-ui-field-form {
  flex: 1;
  display: flex;
  align-items: center;
}

.lyf-ui-field .lyf-ui-field-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  outline: none;
  background-color: transparent;
  color: var(--font-color_1);
  font-size: 14px;
  line-height: 24px;
  caret-color: var(--caret-color);
}

.lyf-ui-field .lyf-ui-field-textarea {
  resize: none;
}

.lyf-ui-field .lyf-ui-field-clear {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-right: var(--field-clear-right);
  background-color: var(--field-background);
}

.lyf-ui-field .lyf-ui-field-clear img {
  width: 22px;
  height: 22px;
}

.lyf-ui-field .lyf-ui-field-clear .lyf-ui-field-word-count {
  margin-right: var(--space_12);
  color: var(--font-color_3);
  font-size: 14px;
}

.lyf-ui-field.lyf-ui-field-focus {
  border-width: var(--field-border-active-width);
  border-color: var(--field-border-active-color);
}

.lyf-ui-field.lyf-ui-textarea-field .lyf-ui-field-clear {
  top: auto;
  bottom: var(--field-clear-bottom);
}
</style>