<template>
  <table class="table is-fullwidth">
    <thead>
      <tr class="fs-14">
        <th class="is-narrow">#</th>
        <th>Tên</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>{{ i }}</td>
        <td
          @click="openField(v, i)"
          class="is-clickable"
        >
          <p>{{ $stripHtml(v.label, 50) }}</p>
          <p class="has-text-primary">{{ v.name }}</p>
        </td>
        <td style="vertical-align: middle">
          <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
    v-if="showmodal"
    v-bind="showmodal"
    @close="showmodal = undefined"
    @update="update"
    @confirm="remove"
  />
</template>
<script setup>
import { cloneDeep } from "es-toolkit";
const emit = defineEmits(["close"]);
const { $stripHtml, $arrayMove, $remove } = useNuxtApp();
const store = useStore();
const props = defineProps({
  pagename: String,
});
const showmodal = ref();
let current;
const pagedata = store[props.pagename];
const fields = ref(pagedata.fields);
function openField(v, i) {
  current = { v, i };
  showmodal.value = {
    component: "datatable/FieldAttribute",
    title: `${v.name} / ${$stripHtml(v.label)}`,
    width: "50%",
    height: "500px",
    vbind: { field: v },
  };
}
function update(data) {
  fields.value[current.i] = data;
  let copy = cloneDeep(pagedata);
  copy.fields = fields.value;
  copy.update = { fields: fields.value };
  store.commit(props.pagename, copy);
  showmodal.value = undefined;
  emit("close");
}
function updateField() {
  let copy = cloneDeep(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, i };
  showmodal.value = {
    component: "dialog/Confirm",
    vbind: { content: `Bạn có muốn xóa cột <span class="tag">${v.name}</span> không?` },
    title: "Xóa cột",
    width: "500px",
    height: "auto",
  };
}
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>

<style scoped>
td:nth-child(2):hover {
  background-color: hsl(from var(--bulma-primary) h s l / 0.05);
}
</style>
