<template>
  <div class="input-wrapper">
    <span class="input-prefix">
      <slot name="prefix"></slot>
    </span>
    <input type="text" :maxlength="maxlength" :readonly="readonly" class="input" :class="classes" :value="value" @input="onInput">
    <span class="input-suffix">
      <slot name="suffix"></slot>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classes: {}
    };
  },
  props: {
    value: [String, Number],
    maxlength: Number,
    readonly: Boolean
  },
  methods: {
    onInput(evt) {
      this.$emit('input', evt.target.value);
    }
  },
  mounted() {
    if (this.$slots.prefix) {
      this.classes['input-with-prefix'] = true;
    }
    if (this.$slots.suffix) {
      this.classes['input-with-suffix'] = true;
    }
  }
};
</script>

<style lang="scss">
.input-wrapper {
  position: relative;
  vertical-align: middle;
  line-height: normal;

  .input {
    width: 100%;
    height: 100px;
    background-color: #f5f5f5;
    border-radius: 10px;
    padding-left: 60px;
    padding-right: 60px;
    font-size: 40px;

    &.input-with-prefix {
      padding-left: 60px;
    }

    &.input-with-suffix {
      padding-right: 60px;
    }
  }

  .input-prefix {
    width: 60px;
    height: 100%;
    font-size: 40px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .input-suffix {
    width: 60px;
    height: 100%;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

</style>