import { defineComponent as D, ref as m, watch as A, onMounted as M, resolveComponent as c, openBlock as a, createElementBlock as d, createVNode as t, unref as s, withCtx as n, Fragment as O, renderList as S, createElementVNode as v, toDisplayString as T, createTextVNode as F, createCommentVNode as y } from "vue";
import { f as P, t as U, c as W, _ as $ } from "./index-feb2412c.mjs";
const j = { style: { width: "100%" } }, I = { key: 0 }, z = { class: "list-group-item-inside" }, G = { class: "content" }, H = { key: 1 }, J = /* @__PURE__ */ D({
  __name: "editableList",
  props: {
    modelValue: {
      type: Array,
      required: !0,
      default() {
        return [];
      }
    },
    labelColumn: {
      type: String,
      required: !0
    },
    editConfig: {
      type: [Object, Function],
      required: !0,
      default() {
        return {};
      }
    }
  },
  emits: ["update:modelValue"],
  setup(C, { emit: k }) {
    let e = C;
    const _ = k, l = m("list");
    A(
      () => e.editConfig,
      () => {
        l.value = "list";
      }
    );
    let r = m({}), h = m(null);
    M(() => {
      document.body.ondrop = function(o) {
        o.preventDefault(), o.stopPropagation();
      };
    });
    function V(o) {
      return typeof e.labelColumn == "function" ? e.labelColumn(o) : o[e.labelColumn];
    }
    const b = P(e.editConfig, r);
    function x() {
      r.value = { key: W() }, l.value = "add";
    }
    function w(o) {
      e.modelValue.splice(o, 1);
    }
    function L(o) {
      r.value = e.modelValue[o], l.value = "edit";
    }
    function E() {
      l.value == "add" && e.modelValue.push(r.value), _("update:modelValue", e.modelValue), l.value = "list";
    }
    return (o, f) => {
      const i = c("lc-icon"), p = c("el-button"), N = c("MttkWrapComp"), q = c("el-page-header");
      return a(), d("div", j, [
        l.value == "list" ? (a(), d("div", I, [
          t(s(U), {
            tag: "ul",
            modelValue: s(e).modelValue,
            "onUpdate:modelValue": f[0] || (f[0] = (u) => _("update:modelValue", u)),
            class: "list-group",
            handle: ".handle",
            "item-key": "key"
          }, {
            default: n(() => [
              (a(!0), d(O, null, S(s(e).modelValue, (u, g) => (a(), d("li", {
                class: "list-group-item",
                key: u.key
              }, [
                v("div", z, [
                  t(i, {
                    class: "handle",
                    icon: "mdiDialpad",
                    style: { height: "32px", "padding-top": "2px", "margin-right": "8px" }
                  }),
                  v("span", G, T(V(u)), 1),
                  t(p, {
                    onClick: (B) => L(g)
                  }, {
                    icon: n(() => [
                      t(i, {
                        class: "operation",
                        icon: "mdiNoteEditOutline"
                      })
                    ]),
                    _: 2
                  }, 1032, ["onClick"]),
                  t(p, {
                    text: "",
                    onClick: (B) => w(g)
                  }, {
                    icon: n(() => [
                      t(i, {
                        class: "operation",
                        icon: "mdiCloseCircleOutline"
                      })
                    ]),
                    _: 2
                  }, 1032, ["onClick"])
                ])
              ]))), 128))
            ]),
            _: 1
          }, 8, ["modelValue"]),
          t(p, {
            style: { "margin-left": "24px", "margin-top": "6px" },
            onClick: x
          }, {
            icon: n(() => [
              t(i, { icon: "mdiPlus" })
            ]),
            default: n(() => [
              F(" Add a new row")
            ]),
            _: 1
          })
        ])) : y("", !0),
        l.value != "list" ? (a(), d("div", H, [
          t(q, {
            title: "back",
            onBack: E,
            style: { padding: "10px", "background-color": "var(--el-fill-color-extra-light)" }
          }, {
            icon: n(() => [
              t(i, { icon: "mdiArrowLeft" })
            ]),
            default: n(() => [
              t(N, {
                config: s(b),
                style: { margin: "4px" },
                ref_key: "tableEditor",
                ref: h
              }, null, 8, ["config"])
            ]),
            _: 1
          })
        ])) : y("", !0)
      ]);
    };
  }
});
const R = /* @__PURE__ */ $(J, [["__scopeId", "data-v-3624e162"]]);
export {
  R as default
};
