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

const isLoading = ref(false);
const body = ref({
  code: null,
  technology: null,
  standard: null,
  size: null,
  resolution: null,
  max_brightness: null,
  refresh_rate: null,
  screen_type: null,
});

async function submit() {
  isLoading.value = true;
  const newRow = await $insertapi("Screen", { 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-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">Công nghệ màn hình</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.technology"
              placeholder="Công nghệ màn hình"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Tiêu chuẩn</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.standard"
              placeholder="Tiêu chuẩn"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Kích thước</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.size"
              placeholder="Kích thước"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Độ phân giải</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.resolution"
              placeholder="Độ phân giải"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Độ sáng tối đa</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.max_brightness"
              placeholder="Độ sáng tối đa"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Tần số quét</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.refresh_rate"
              placeholder="Tần số quét"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Loại màn hình</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model.trim="body.screen_type"
              placeholder="Loại màn hình"
            />
          </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>
