<template>
  <table class="table is-fullwidth">
    <thead>
      <tr class="fs-14">
        <th class="is-narrow">#</th>
        <th>Tên trường</th>
        <th>Tên cột</th>
        <th class="is-narrow has-text-right">Thao tác</th>
      </tr>
    </thead>
    <tbody>
      <tr
        class="fs-14"
        v-for="(v, i) in fields"
      >
        <td style="vertical-align: middle">{{ i }}</td>
        <td style="vertical-align: middle">
          <a
            class="has-text-primary"
            @click="openField(v, i)"
            >{{ v.name }}</a
          >
        </td>
        <td style="vertical-align: middle">{{ $stripHtml(v.label, 50) }}</td>
        <td>
          <div class="field has-addons">
            <p class="control">
              <button
                class="button is-primary is-light px-3.5 py-1.5"
                @click="moveDown(v, i)"
              >
                <span class="icon">
                  <Icon
                    name="material-symbols:arrow-downward-rounded"
                    :size="18"
                  />
                </span>
              </button>
            </p>
            <p class="control">
              <button
                class="button is-primary is-light px-3.5 py-1.5"
                @click="moveUp(v, i)"
              >
                <span class="icon">
                  <Icon
                    name="material-symbols:arrow-upward-rounded"
                    :size="18"
                  />
                </span>
              </button>
            </p>
            <p class="control">
              <button
                class="button is-primary is-light px-3.5 py-1.5"
                @click="askConfirm(v, i)"
              >
                <span class="icon">
                  <Icon
                    name="material-symbols:delete-outline-rounded"
                    :size="18"
                  />
                </span>
              </button>
            </p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <Modal
    @close="showmodal = undefined"
    @update="update"
    @confirm="remove"
    v-bind="showmodal"
    v-if="showmodal"
  ></Modal>
</template>
<script setup>
import { useStore } from "@/stores/index";
const emit = defineEmits(["close"]);
const { $stripHtml, $clone, $arrayMove, $remove } = useNuxtApp();
const store = useStore();
var props = defineProps({
  pagename: String,
});
var showmodal = ref();
var current;
var pagedata = store[props.pagename];
var fields = ref(pagedata.fields);
function openField(v, i) {
  current = { v: v, i: i };
  showmodal.value = {
    component: "datatable/FieldAttribute",
    title: `${v.name} / ${$stripHtml(v.label)}`,
    width: "50%",
    height: "400px",
    vbind: { field: v },
  };
}
function update(data) {
  fields.value[current.i] = data;
  let copy = $clone(pagedata);
  copy.fields = fields.value;
  copy.update = { fields: fields.value };
  store.commit(props.pagename, copy);
  showmodal.value = undefined;
  emit("close");
}
function updateField() {
  let copy = $clone(pagedata);
  copy.fields = fields.value;
  copy.update = { fields: fields.value };
  store.commit(props.pagename, copy);
}
function moveDown(v, i) {
  let idx = i === fields.value.length - 1 ? 0 : i + 1;
  fields.value = $arrayMove(fields.value, i, idx);
  updateField();
}
function moveUp(v, i) {
  let idx = i === 0 ? fields.value.length - 1 : i - 1;
  fields.value = $arrayMove(fields.value, i, idx);
  updateField();
}
function askConfirm(v, i) {
  current = { v: v, i: i };
  showmodal.value = {
    component: `dialog/Confirm`,
    vbind: { content: "Bạn có muốn xóa cột này không?", duration: 10 },
    title: "Xóa cột",
    width: "500px",
    height: "100px",
  };
}
function remove() {
  let arr = [current.v];
  arr.map((v) => {
    let idx = fields.value.findIndex((x) => x.name === v.name);
    $remove(fields.value, idx);
  });
  updateField();
}
</script>
