<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,
  sim_count: null,
  sim_types: null,
});

async function submit() {
  isLoading.value = true;
  const newRow = await $insertapi("SIM", 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-4">
        <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-4">
        <div class="field">
          <label class="label">Số lượng SIM</label>
          <div class="control">
            <InputNumber
              v-bind="{
                record: body,
                attr: 'sim_count',
                placeholder: 'Số lượng SIM',
              }"
              @number="(num) => (body.sim_count = num)"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Loại SIM</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.sim_types"
              placeholder="Loại SIM"
            />
          </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>
