<template>
  <div>
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field is-narrow">
          <label class="label">Mã quà tặng <span class="has-text-danger"> * </span> </label>
          <p class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.code"
              id="code"
              autocomplete="off"
            />
          </p>
        </div>
        <div class="field">
          <label class="label">Tên quà tặng<span class="has-text-danger"> * </span> </label>
          <p class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.name"
              autocomplete="off"
            />
          </p>
        </div>
      </div>
    </div>
    <div class="mt-5 columns">
      <div class="column">
        <label class="label">Chi tiết quà tặng<span class="has-text-danger"> * </span> </label>
        <p class="control">
          <input
            class="input"
            type="text"
            placeholder=""
            v-model="record.detail"
            autocomplete="off"
          />
        </p>
      </div>
    </div>

    <div class="mt-5">
      <button
        class="button is-primary has-text-white"
        @click="update()"
      >
        {{ record.id ? "Cập nhật" : "Tạo mới" }}
      </button>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
const { $copy, $resetNull, $insertrow, $updaterow, $snackbar, $getdata } = useNuxtApp();
var props = defineProps({
  api: String,
  pagename: String,
  row: Object,
  prefix: String,
});
const emit = defineEmits(["close", "modalevent"]);

var record = $copy(props.row || {});

async function update() {
  let data = $resetNull(record);
  let rs = data.id
    ? await $updaterow(props.api, data, undefined, props.pagename)
    : await $insertrow(props.api, data, undefined, props.pagename);
  if (rs === "error") return $snackbar(rs);
  emit("modalevent", { name: "dataevent", data: rs });
  emit("close");
}
onMounted(() => {
  document.getElementById("code").focus();
});
</script>
