<template>
  <div class="columns is-multiline is-mobile mx-0">
    <div class="column is-1">
      <div class="field">
        <label class="label has-text-left">ID<span class="has-text-danger ml-1">*</span></label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.id"
            disabled
          />
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="field">
        <label class="label has-text-left">Category<span class="has-text-danger ml-1">*</span></label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.category"
          />
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="field">
        <label class="label has-text-left">Classify<span class="has-text-danger ml-1">*</span></label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.classify"
          />
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="field">
        <label class="label has-text-left">Code<span class="has-text-danger ml-1">*</span></label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.code"
          />
        </div>
      </div>
    </div>
    <div class="column is-2">
      <div class="field">
        <label class="label has-text-left">Index</label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.index"
          />
        </div>
      </div>
    </div>
    <div class="column is-12">
      <label class="label has-text-left">VI<span class="has-text-danger ml-1">*</span></label>
      <div class="field has-addons">
        <div class="control is-expanded">
          <textarea
            class="textarea"
            placeholder=""
            rows="3"
            v-model="record.vi"
          ></textarea>
        </div>
        <div class="control ml-5">
          <a @click="openEditor()">
            <Icon
              name="material-symbols:edit-outline-rounded"
              :size="20"
            />
          </a>
        </div>
      </div>
    </div>
    <!-- <div class="column is-12">
             <label class="label has-text-left">EN<span class="has-text-danger ml-1">*</span></label>
             <div class="field has-addons">
          <div class="control is-expanded">
          <textarea class="textarea" placeholder="" rows="3" v-model="record.en"></textarea>
          </div>
          <div class="control ml-5">
            <a @click="openEditor()">
              <Icon
                name="material-symbols:edit-outline-rounded"
                :size="20"
              />
            </a>
          </div>
        </div>
        </div>      -->
    <div class="column is-6">
      <div class="field">
        <label class="label has-text-left">Image</label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.image"
          />
        </div>
      </div>
    </div>
    <div class="column is-6">
      <div class="field">
        <label class="label has-text-left">Link</label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.link"
          />
        </div>
      </div>
    </div>
    <div class="column is-12">
      <label class="label has-text-left">Detail</label>
      <div class="field has-addons">
        <div class="control is-expanded">
          <input
            class="input"
            type="text"
            placeholder=""
            v-model="record.detail"
          />
        </div>
        <div class="control">
          <button
            class="button"
            @click="editDetail('detail')"
          >
            <span class="icon">
              <Icon
                name="material-symbols:edit-outline-rounded"
                :size="20"
              />
            </span>
          </button>
        </div>
        <div class="control">
          <button
            class="button"
            @click="copyDetail('detail')"
          >
            Copy
          </button>
        </div>
        <div class="control">
          <button
            class="button"
            @click="pasteDetail('detail')"
          >
            Paste
          </button>
        </div>
      </div>
    </div>
    <!-- <div class="column is-6">
          <label class="label has-text-left">Detail EN</label>
          <div class="field has-addons">
        <div class="control is-expanded">
          <input class="input" type="text" placeholder="" v-model="record.detail_en">
        </div>
        <div class="control">
          <button class="button" @click="editDetail('detail_en')">
            <span class="icon">
              <Icon
                name="material-symbols:edit-outline-rounded"
                :size="20"
              />
            </span>
          </button>
        </div>
        <div class="control">
          <button class="button" @click="copyDetail('detail_en')">
            Copy
          </button>
        </div>
        <div class="control">
          <button class="button" @click="pasteDetail('detail_en')">
            Paste
          </button>
        </div>
      </div>
        </div>   -->
    <div class="column is-12 pt-5">
      <a
        class="button is-primary has-text-white"
        @click="updateData()"
        >Save</a
      >
      <a
        class="button is-dark has-text-white ml-5"
        @click="updateData(true)"
        v-if="record.id"
        >Create new</a
      >
    </div>
  </div>
  <Modal
    @close="showmodal = undefined"
    v-bind="showmodal"
    @texteditor="updateText"
    @update="updateAttr"
    v-if="showmodal"
  ></Modal>
</template>
<script setup>
const emit = defineEmits([]);
var props = defineProps({
  pagename: String,
  row: Object,
  api: String,
});
const { $copy, $resetNull, $insertrow, $updaterow, $copyToClipboard, $empty } = useNuxtApp();
var record = ref(props.row ? $copy(props.row) : {});
var showmodal = ref();
var vapi = props.api;
var current;
var updateText = function (content) {
  record.value.vi = content;
};
var openEditor = function () {
  showmodal.value = {
    component: "common/TextEditor",
    vbind: { content: record.value.vi },
    title: "Text editor",
    width: "40%",
    height: "150px",
  };
};
var editDetail = function (attr) {
  current = attr;
  let detail = record.value[attr] ? record.value[attr] : {};
  showmodal.value = {
    component: "datatable/FieldAttribute",
    vbind: { field: detail, close: true },
    title: "Change attributes",
    width: "40%",
    height: "150px",
  };
};
var updateAttr = function (detail) {
  record.value[current] = detail;
};
function copyDetail(attr) {
  if ($empty(record.value[attr])) return;
  let val = typeof record.value[attr] == "string" ? record.value[attr] : JSON.stringify(record.value[attr]);
  $copyToClipboard(val);
}
async function pasteDetail(attr) {
  let text = await navigator.clipboard.readText();
  if ($empty(text)) return;
  record.value[attr] = JSON.parse(text);
}
var updateData = async function (isNew) {
  let ele = record.value;
  if (ele.create_time === null) ele.create_time = new Date();
  ele = $resetNull(ele);
  if (isNew) delete ele.id;
  let result = ele.id
    ? await $updaterow(vapi, ele, undefined, props.pagename)
    : await $insertrow(vapi, ele, undefined, props.pagename);
  if (isNew) emit("close");
};
</script>
