<template>
  <div :id="id">
    <template v-if="keys.length > 0">
      <div
        class="field is-horizontal"
        v-for="(v, i) in keys"
        :key="i"
      >
        <div class="field-body">
          <div class="field is-narrow">
            <div class="control">
              <input
                class="input fs-14"
                type="text"
                placeholder=""
                v-model="keys[i]"
              />
            </div>
          </div>
          <div class="field">
            <div class="control">
              <input
                class="input fs-14"
                type="text"
                placeholder=""
                v-model="values[i]"
              />
            </div>
          </div>
          <div class="field is-narrow has-addons">
            <p class="control">
              <button
                class="button is-primary is-light"
                @click="jsonData(v, i)"
              >
                <span class="icon">
                  <Icon
                    name="material-symbols:data-object-rounded"
                    :size="20"
                  />
                </span>
              </button>
            </p>
            <p class="control">
              <button
                class="button is-primary is-light"
                @click="remove(i)"
              >
                <span class="icon">
                  <Icon
                    name="material-symbols:delete-outline-rounded"
                    :size="20"
                  />
                </span>
              </button>
            </p>
          </div>
        </div>
      </div>
    </template>
    <Teleport
      defer
      :to="`.modal-card:has(#${id}) .modal-card-foot`"
    >
      <div class="buttons is-justify-content-space-between w-full">
        <button
          class="button is-success is-light"
          @click="addAttr()"
        >
          <span class="icon">
            <Icon
              name="material-symbols:add-rounded"
              :size="20"
            />
          </span>
          <span>Thêm thuộc tính</span>
        </button>
        <button
          class="button is-primary"
          @click="update()"
        >
          Cập nhật
        </button>
      </div>
    </Teleport>
    <Modal
      v-if="comp"
      v-bind="{ component: comp, width: '40%', height: '400px', vbind }"
      @close="comp = undefined"
      @update="doUpdate"
    />
  </div>
</template>
<script>
export default {
  props: ["field", "close"],
  setup() {
    const id = useId();
    return { id };
  },
  data() {
    return {
      keys: [],
      values: [],
      comp: undefined,
      vbind: undefined,
      current: undefined,
    };
  },
  created() {
    Object.keys(this.field).map((v) => {
      this.keys.push(v);
      this.values.push(this.field[v]);
    });
  },
  methods: {
    doUpdate(v) {
      this.values[this.current.i] = v;
    },
    jsonData(v, i) {
      this.current = { v: v, i: i };
      this.vbind = {
        field: this.$empty(this.values[i]) || typeof this.values[i] === "string" ? {} : this.values[i],
        close: true,
      };
      this.comp = "datatable/FieldAttribute";
    },
    addAttr() {
      this.keys.push(undefined);
      this.values.push(undefined);
    },
    remove(i) {
      this.$remove(this.keys, i);
      this.$remove(this.values, i);
    },
    update() {
      let obj = {};
      this.keys.map((v, i) => {
        if (!this.$empty(v)) obj[v] = v.indexOf("__in") > 0 ? this.values[i].split(",") : this.values[i];
      });
      this.$emit("update", obj);
      this.$emit("modalevent", { name: "update", data: obj });
      if (this.close) this.$emit("close");
    },
  },
};
</script>
