<template>
  <div class="input">
    <span class="title">{{ title }}</span>
    <input
      v-model="inputNumber"
      :style="{'width':width}"
      type="text"
      class="inputbox"
      @keyup.enter="inputComplete"
    >
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String
    },
    width: {
      type: String,
      default: '50%'
    }
  },
  data: function() {
    return {
      inputNumber: null
    }
  },
  methods: {
    inputComplete: function() {
      const data = this.inputNumber
      this.$emit('inputComplete', data)
      this.inputNumber = null
    }
  }
}
</script>
<style lang="scss" scoped>
.input {
  display: flex;
  align-items: center;
  font-size: 30px;

  .inputbox {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    color: gray;
    height: 60px;
  }
  .inputbox:focus {
    outline: none;
    border-color: #84baec;
  }
  .title {
    color: grey;
    margin-right: 1em;
  }
}
</style>
