<template>
  <view :class="className" :style="style" class="cu-form-group">
    <view class="title">
      <text v-if="required" class="lr-required">*</text>
      <slot name="title">{{ title }}</slot>
    </view>
    <input
      @input="input"
      @change="input"
      :value="value"
      :type="type"
      :disabled="disabled"
      :password="password"
      :maxlength="maxlength"
      :placeholder="displayPlaceholder"
      :style="{ textAlign: left ? 'left' : 'right' }"
    />
    <slot name="suffix"></slot>
  </view>
</template>

<script>
export default {
  name: 'l-input',

  props: {
    type: { default: 'text' },
    title: {},
    placeholder: {},
    maxlength: { default: -1 },
    disabled: {},
    password: {},
    left: {},
    required: {},
    value: {}
  },

  methods: {
    input(e) {
      this.$emit('input', e.detail.value)
      this.$emit('change', e.detail.value)
    }
  },

  computed: {
    displayPlaceholder() {
      if (this.disabled) {
        return ''
      }

      if (this.placeholder) {
        return this.placeholder
      }

      return this.title ? `请输入${this.title}` : `请输入…`
    }
  }
}
</script>
