<template>
  <div>
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field is-narrow">
          <label class="label">Mã chiết khấu <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 chiết khấu<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">Giá trị chiết khấu <span class="has-text-danger"> * </span> </label>
        <p class="control">
          <input class="input" type="text" placeholder="" v-model="record.value" autocomplete="off" />
        </p>
      </div>
      <div class="column">
        <label class="label">Loại chiết khấu <span class="has-text-danger"> * </span> </label>
        <SearchBox
          v-bind="{ api: 'valuetype', field: 'name', column: ['name'], first: true, optionid: record.type }"
          :disabled="record.type"
          @option="documentSelected('type', $event)"
        ></SearchBox>
      </div>
      <div class="column">
        <label class="label">Phương thức chiết khấu<span class="has-text-danger"> * </span> </label>
        <SearchBox
          v-bind="{ api: 'discountmethod', field: 'name', column: ['name'], first: true, optionid: record.method }"
          :disabled="record.method"
          @option="documentSelected('method', $event)"
        ></SearchBox>
      </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 || {});
console.log("record", record);
function documentSelected(attr, obj, v) {
  record[attr] = obj.id;
}

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>
