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

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

async function submit() {
  isLoading.value = true;
  const newRow = await $insertapi("Design", 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">Khung</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.frame_material"
              placeholder="Khung"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Lưng</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.back_material"
              placeholder="Lưng"
            />
          </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>
