<script setup>
const { $empty, $insertapi } = useNuxtApp();

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

async function submit() {
  isLoading.value = true;
  await $insertapi("Camera_System", body.value);
  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">Camera sau</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.rear_camera_specs"
              placeholder="Camera sau"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-6">
        <div class="field">
          <label class="label">Camera trước</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.front_camera_specs"
              placeholder="Camera trước"
            />
          </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>
