<template>
  <div>
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field is-narrow">
          <label class="label">Mã <span class="has-text-danger"> * </span> </label>
          <p class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.code"
              id="code"
            />
          </p>
        </div>
        <div class="field">
          <label class="label">Tên <span class="has-text-danger"> * </span> </label>
          <p class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.name"
            />
          </p>
        </div>
      </div>
    </div>
    <div class="field is-horizontal mt-5">
      <div class="field-body">
        <div class="field is-narrow">
          <label class="label">Điện thoại <span class="has-text-danger"> * </span> </label>
          <p class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.phone"
              id="code"
            />
          </p>
        </div>
        <div class="field">
          <label class="label">Email <span class="has-text-danger"> * </span> </label>
          <p class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.email"
            />
          </p>
        </div>
      </div>
    </div>
    <div class="field is-horizontal mt-5">
      <div class="field-body">
        <div class="field">
          <label class="label">Địa chỉ <span class="has-text-danger"> * </span> </label>
          <p class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.address"
              id="code"
            />
          </p>
        </div>
      </div>
    </div>
    <div class="mt-5">
      <button
        class="button is-primary has-text-white"
        @click="update()"
      >
        Lưu lại
      </button>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
const { $copy, $resetNull, $insertrow, $updaterow, $snackbar, $updatepage } = 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);
  $updatepage(props.pagename, rs);
  if (rs === "error") return $snackbar(rs);
  emit("modalevent", { name: "dataevent", data: rs });
  emit("close");
}
onMounted(() => {
  document.getElementById("code").focus();
});
</script>
