<template>

<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>
Calculadora Simple
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
<ion-item>
<ion-label>
Operaci&oacute;n Matem&aacute;tica
</ion-label>
<br><br><hr>

<ion-select v-model="selectedOperation">
<ion-select-option value="suma">Suma</ion-select-option>
<ion-select-option value="resta">Resta</ion-select-option>
<ion-select-option
value="multiplicacion">Multiplicaci&oacute;n</ion-select-option>
<ion-select-option value="division">Divisi&oacute;n</ion-
select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-label position="stacked">N&uacute;mero 1</ion-label>
<ion-input v-model="number1" type="number" :counter="true" :clear-
input="true" fill="outline" color="primary"></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">N&uacute;mero 2</ion-label>
<ion-input v-model="number2" type="number" :counter="true" :clear-
input="true" fill="outline" color="primary"></ion-input>
</ion-item>

<ion-button @click="calcularResultado" expand="block"

shape="round">Calcular</ion-button>

<ion-row>
<ion-col>
<div class="resultado" v-if="result !== null">
<p>Resultado:</p>
<br>
<p>{{ result }}</p>
</div>
</ion-col>
</ion-row>
</ion-content>
</ion-page>
</template>

<script>
import {
IonPage,
IonHeader,
 IonToolbar,
IonTitle,
IonContent,
IonItem,
IonLabel,
IonSelect,
IonSelectOption,
IonInput,
IonButton
} from '@ionic/vue';
export default {
name : 'Calculadora',
components : {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonItem,
IonLabel,
IonSelect,
IonSelectOption,
IonInput,
IonButton
},
data () {
return {
selectedOperation : 'suma',
number1 : 0,
number2 : 0,
result : null,
};
},
methods : {
calcularResultado () {
const num1 = parseFloat (this.number1);
const num2 = parseFloat (this.number2);

switch (this.selectedOperation) {
case 'suma' :
this.result = num1 + num2;
break;
case 'resta' :
this.result = num1 - num2;
break;
case 'multiplicacion' :
this.result = num1 * num2;
break;
case 'division' :
if (num2 !== 0) {
this.result = num1 / num2;
} else {
this.result = 'No se puede dividir por cero';
}
break;
default :
this.result = null;
break;
}
 },
},
};
</script>

<style scoped>
.resultado {
text-align: center;
margin-top: 20px;
font-size: 20px;
padding: 10px;
border: 1px solid blue;
border-radius: 5px;
}
</style>