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

const { $insertapi } = useNuxtApp();

const isPending = ref(false);
const body = ref({
  product: null,
  price: null,
  internal_storage: null,
  ram: null,
  color: null,
  note: null,
});

function selected(field, data) {
  if (field === "price") {
    body.value[field] = data;
  } else {
    body.value[field] = data.id;
  }
}

async function createProductVariant() {
  isPending.value = true;
  const res = await $insertapi("Product_Variant", body.value);
  isPending.value = false;
}
</script>

<template>
  <h1 class="subtitle is-4">AddProductVariantForm</h1>
  <form class="fixed-grid has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-8">
        <div class="field">
          <label class="label">Sản phẩm</label>
          <SearchBox
            v-bind="{
              api: 'product',
              field: 'name',
              column: ['name'],
              first: true,
              placeholder: 'Sản phẩm',
            }"
            @option="selected('product', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Đơn giá</label>
          <div class="control">
            <InputNumber
              v-bind="{
                record: body,
                attr: 'price',
                placeholder: 'Đơn giá',
              }"
              @number="selected('price', $event)"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Màu sắc</label>
          <SearchBox
            v-bind="{
              api: 'color',
              field: 'name',
              column: ['name'],
              first: true,
              placeholder: 'Màu sắc',
            }"
            @option="selected('color', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">RAM</label>
          <SearchBox
            v-bind="{
              api: 'RAM',
              field: 'code',
              column: ['code'],
              first: true,
              placeholder: 'RAM',
            }"
            @option="selected('ram', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Bộ nhớ trong</label>
          <SearchBox
            v-bind="{
              api: 'internalstorage',
              field: 'code',
              column: ['code'],
              first: true,
              placeholder: 'Bộ nhớ trong',
            }"
            @option="selected('internal_storage', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-12">
        <div class="field">
          <label class="label">Ghi chú</label>
          <textarea
            v-model.trim="body.note"
            class="textarea"
            name="note"
            placeholder="Ghi chú"
            rows="2"
          ></textarea>
        </div>
      </div>

      <div class="cell is-col-span-12">
        <button
          :class="['button is-primary', { 'is-loading': isPending }]"
          :disabled="Object.values(body).every((v) => v === null)"
          @click.prevent="createProductVariant"
        >
          Thêm phiên bản
        </button>
      </div>
    </div>
  </form>
</template>
