<template>
  <div>
    <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:app-registration-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>
    <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>
    <div class="mt-2">
      <button
        class="button is-primary"
        @click="update()"
      >
        Cập nhật
      </button>
    </div>
    <Modal
      @close="comp = undefined"
      @update="doUpdate"
      v-bind="{ component: comp, width: '40%', height: '300px', vbind: vbind }"
      v-if="comp"
    ></Modal>
  </div>
</template>
<script>
export default {
  props: ["field", "close"],
  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>
