<template>
  <div v-if="record">
    <div class="columns is-multiline mx-0">
      <div :class="`column is-3 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">{{ findLang("code") }}<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input
              class="input has-text-black"
              disabled
              type="text"
              placeholder=""
              v-model="record.code"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.code"
          >
            {{ errors.code }}
          </p>
        </div>
      </div>

      <div :class="`column is-6 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">Tên công ty<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.fullname"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.fullname"
          >
            {{ errors.fullname }}
          </p>
        </div>
      </div>
      <div :class="`column is-3 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">{{ findLang("shortname") }}</label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.shortname"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.shortname"
          >
            {{ errors.shortname }}
          </p>
        </div>
      </div>
      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">{{ findLang("taxcode") }}</label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.legal_code"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.legal_code"
          >
            {{ errors.legal_code }}
          </p>
        </div>
      </div>
      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">Điện thoại</label>
          <div class="control">
            <InputPhone
              v-bind="{ record: record, attr: 'phone', placeholder: '' }"
              @phone="selected('phone', $event)"
            ></InputPhone>
          </div>
          <p
            class="help is-danger"
            v-if="errors.phone"
          >
            {{ errors.phone }}
            <a
              v-if="existedCustomer"
              @click="showCustomer()"
              >Chi tiết</a
            >
          </p>
        </div>
      </div>
      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">Email</label>
          <div class="control">
            <InputEmail
              v-bind="{ record: record, attr: 'email', placeholder: '' }"
              @email="selected('email', $event)"
            ></InputEmail>
          </div>
          <p
            class="help is-danger"
            v-if="errors.email"
          >
            {{ errors.email }}
          </p>
        </div>
      </div>
      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">Website</label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.website"
            />
          </div>
        </div>
      </div>
      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">{{ findLang("country") }}</label>
          <div class="control">
            <SearchBox
              v-bind="{
                vdata: store.country,
                field: 'name',
                column: ['name'],
                first: true,
                optionid: record.country,
                position: 'is-top-left',
              }"
              @option="selected('_country', $event)"
            ></SearchBox>
          </div>
        </div>
      </div>
      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">{{ findLang("province") }}</label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.province"
            />
          </div>
        </div>
      </div>
      <div :class="`column is-12 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
        <div class="field">
          <label class="label">{{ findLang("address") }}</label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.address"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.address"
          ></p>
        </div>
      </div>
    </div>
    <div class="mt-2">
      <button
        class="button is-primary has-text-white"
        @click="update()"
      >
        {{ findLang("save") }}
      </button>
    </div>
    <Modal
      @close="showmodal = undefined"
      v-bind="showmodal"
      v-if="showmodal"
    ></Modal>
  </div>
</template>
<script setup>
import InputPhone from "~/components/common/InputPhone";
import InputEmail from "~/components/common/InputEmail";
import SearchBox from "~/components/SearchBox";
import { useStore } from "@/stores/index";
var props = defineProps({
  pagename: String,
  row: Object,
});
const store = useStore();
const { $find, $getdata, $updateapi, $insertapi, $findapi, $getapi, $empty, $errPhone, $resetNull, $snackbar } =
  useNuxtApp();
const emit = defineEmits(["update", "dataevent"]);
var viewport = store.viewport;
var errors = ref({});
var record = ref();
var showmodal = undefined;
var existedCustomer = undefined;
async function initData() {
  if (props.row) {
    let conn = $findapi("company");
    conn.params.filter = {
      id: props.row.company || props.row.customer__company || props.row.id,
    };
    let rs = await $getapi([conn]);
    let found = $find(rs, { name: "company" });
    if (found.data.rows.length > 0) record.value = found.data.rows[0];
  } else {
    record.value = {};
  }
}
function findLang(code) {
  let found = $find(store.common, { code: code });
  return found ? found[store.lang] : "";
}
function showCustomer() {
  showmodal.value = {
    component: "customer/CustomerView",
    width: "60%",
    height: "600px",
    title: "Khách hàng",
    vbind: { row: existedCustomer },
  };
}
function selected(attr, obj) {
  record.value[attr] = obj;
}
function checkError() {
  existedCustomer = undefined;
  errors.value = {};
  if ($empty(record.value.fullname)) errors.value.fullname = "Họ tên không được bỏ trống";
  if (record.value.phone) {
    let text = $errPhone(record.value.phone);
    if (text) errors.value.phone = text;
  }
  return Object.keys(errors.value).length > 0;
}
async function update() {
  if (checkError()) return;
  if (!record.value.id) {
    if (record.value.phone) record.value.phone = record.value.phone.trim();
    let obj = await $getdata("company", { phone: record.value.phone }, undefined, true);
    if (obj) {
      existedCustomer = obj;
      errors.phone = "Số điện thoại đã tồn tại trong hệ thống.";
    }
  }
  record.value = $resetNull(record.value);
  if (record.value._country) record.value.country = record.value._country.id;
  if (!record.value.creator) record.value.creator = store.login.id;
  record.value.updater = store.login.id;
  record.update_time = new Date();
  let rs = record.value.id ? await $updateapi("company", record.value) : await $insertapi("company", record.value);
  if (rs === "error") return;
  if (!record.value.id) $snackbar(`Khách hàng đã được khởi tạo với mã <b>${rs.code}</b>`, "Success");
  record.value.id = rs.id;
  let ele = await $getdata("company", { id: rs.id }, null, true);
  emit("update", ele);
  emit("modalevent", { name: "dataevent", data: ele });
}
initData();
</script>
