<script setup>
import InputNumber from "@/components/common/InputNumber.vue";

const { $empty, $insertapi } = useNuxtApp();
const emit = defineEmits(["modalevent"]);

const isLoading = ref(false);
const body = ref({
  code: null,
  capacity: null,
});

async function submit() {
  isLoading.value = true;
  const newRow = await $insertapi("RAM", { data: body.value });
  emit("modalevent", { name: "dataevent", data: newRow });
  isLoading.value = false;
}
</script>

<template>
  <form class="fixed-grid has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-6">
        <div class="field">
          <label class="label">Mã</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.code"
              placeholder="Mã"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-6">
        <div class="field">
          <label class="label">Dung lượng</label>
          <div class="control">
            <InputNumber
              v-bind="{
                record: body,
                attr: 'capacity',
                placeholder: 'Dung lượng',
                unit: 'GB',
              }"
              @number="(num) => (body.capacity = num)"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-12">
        <button
          @click.prevent="submit"
          :disabled="Object.values(body).every($empty)"
          :class="['button is-primary', { 'is-loading': isLoading }]"
        >
          Thêm
        </button>
      </div>
    </div>
  </form>
</template>
