import { defineComponent as f, toRefs as h, ref as c, createVNode as o, resolveComponent as l } from "vue";
import { ElButton as b } from "element-plus";
import { j as _, o as y, B as v, Y as C } from "./main-DXvReGBc.js";
import { E } from "./index-BjLglEQs.js";
import { e as x } from "./index-ClGUov3E.js";
const d = {
  "code-editor-container": "_code-editor-container_1kbp8_1",
  "editor-action-btn-container": "_editor-action-btn-container_1kbp8_11",
  "editor-action-btn-global": "_editor-action-btn-global_1kbp8_15",
  "editor-action-btn": "_editor-action-btn_1kbp8_11"
}, {
  IconRename: w
} = x, R = /* @__PURE__ */ f({
  name: "KlCommonCodeEditor",
  components: {
    CompLoading: _,
    EditorMonacoEditor: E,
    ElButton: b
  },
  emits: ["update:modelValue", "change"],
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "150px"
    },
    title: {
      type: String,
      default: ""
    },
    language: {
      type: String,
      default: "json"
    },
    options: {
      type: Object,
      default: () => ({})
    },
    dialogEditor: {
      type: Boolean,
      default: !0
    },
    showDialogBtnText: {
      type: String,
      default: "编辑脚本"
    }
  },
  setup(t, {
    emit: n,
    expose: s
  }) {
    const {
      modelValue: a
    } = h(t), g = new y(), r = c(!0), u = c(), m = () => {
      g.service({
        width: "720px",
        top: "20vh",
        targetFlag: "codeEditor",
        title: t.title,
        isResize: !0,
        contentModule: C,
        contentAttrs: {
          modelValue: a.value,
          language: t.language
        },
        style: {
          height: "500px"
        }
      }, (e) => {
        const {
          event: p,
          emitParams: i
        } = e;
        p !== "close" || !i || (n("update:modelValue", i), n("change", i));
      });
    };
    return s({
      editorRef: u
    }), () => o("section", {
      class: d["code-editor-container"],
      style: {
        width: t.width,
        height: t.height
      }
    }, [r.value && o(l("comp-loading"), null, null), o(l("editor-monaco-editor"), {
      ref: u,
      modelValue: a.value,
      "onUpdate:modelValue": (e) => a.value = e,
      language: t.language,
      options: t.options,
      onChange: (e) => {
        r.value = !1, !v(e, a.value) && (n("update:modelValue", e), n("change", e));
      }
    }, null), t.dialogEditor && o("section", {
      class: d["editor-action-btn-container"]
    }, [o(l("el-button"), {
      type: "primary",
      icon: w,
      class: d["editor-action-btn"],
      onClick: m
    }, {
      default: () => [t.showDialogBtnText]
    })])]);
  }
});
export {
  R as default
};
