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