<template>
  <div class = "q-pa-lg" style = "max-width: 900px; margin: auto;">

    <q-input
        filled
        v-model = "inputValue"
        label = ""
        readonly
    />


    <div class = "q-gutter-md">
        <div class = "row q-gutter-md">
            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(1)"
            >1</q-btn>

            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(2)"
            >2</q-btn>

            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(3)"
            >3</q-btn>
        </div>

        <div class = "row q-gutter-md">
            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(4)"
            >4</q-btn>

            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(5)"
            >5</q-btn>

            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(6)"
            >6</q-btn>
        </div>

        <div class = "row q-gutter-md">
            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(7)"
            >7</q-btn>

            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(8)"
            >8</q-btn>

            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(9)"
            >9</q-btn>
        </div>

        <div class = "row q-gutter-md">
            <q-btn
                color = "primary"
                unelevated
                class = "col numpadBtn"
                @click = "appendNumber(0)"
            >0</q-btn>
        </div>
    </div>


    <q-btn
        label = "Enter"
        color = "secondary"
        class = "q-mt-md full-width"
        @click = "onEnter"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const inputValue  =  ref('')

function appendNumber(num) {
    inputValue.value +=  num
}

function onEnter() {
    console.log(inputValue.value)
    inputValue.value  =  ''
}
</script>
