import { defineComponent as Oe, useAttrs as Be, useSlots as De, ref as S, reactive as ie, computed as g, watch as oe, onMounted as Le, nextTick as _, onUnmounted as Fe, resolveComponent as k, openBlock as o, createBlock as E, withCtx as H, createElementVNode as I, createVNode as j, createElementBlock as f, renderSlot as ue, mergeProps as U, Fragment as O, normalizeStyle as K, toDisplayString as re, createCommentVNode as Me, normalizeClass as L } from "vue";
import { C as s } from "../Shared/base-PQGakkrl.js";
import { C as F } from "../Shared/index-BnerInzC.js";
import { R as ce } from "../Shared/resize-kOWxHVSP.js";
import { u as Pe } from "../Shared/language-DxTlvFs2.js";
import { _ as Ne } from "../Shared/Popup.vue_vue_type_script_setup_true_lang-CbaTn8Yz.js";
const ze = { class: "xeditable-content" }, He = { class: "xeditable-body" }, je = { class: "xeditable-form" }, Ae = {
  key: 1,
  class: "xeditable-element"
}, Je = ["id"], Re = {
  key: 0,
  class: "xeditable-errmsg"
}, Ye = /* @__PURE__ */ Oe({
  name: "ClXeditable",
  __name: "Index",
  props: {
    type: {
      type: String,
      required: !0
      // input | select | textarea | radio | checkbox | selectTag | inputTag | dateTime | customHtml
    },
    className: {
      type: String,
      default: ""
    },
    classNameLabel: {
      type: String,
      default: ""
    },
    value: [String, Number],
    label: String,
    subUnitOptions: {
      type: Object,
      default: () => ({})
    },
    subUnitList: {
      type: Array,
      default: () => []
    },
    submitCallback: Function,
    isUseOnSubmitCheck: {
      type: Boolean,
      default: !1
    },
    appendContainer: {
      type: String,
      default: ""
    },
    isCheckValidate: {
      type: Boolean,
      default: !1
    },
    validateRules: {
      type: Array,
      default: () => [{ r: "required" }]
    },
    checkValidateCallback: Function,
    isUseEllipsis: {
      type: Boolean,
      default: !1
    },
    classNameEllipsis: {
      type: String,
      default: ""
    },
    isAutoTooltip: {
      type: Boolean,
      default: !0
    },
    clickEditPoint: {
      type: String,
      default: "value"
      // value icon
    },
    isShowEditValue: {
      type: Boolean,
      default: !0
    },
    isShowEditIcon: {
      type: Boolean,
      default: !1
    },
    editIcon: {
      type: String,
      default: "clIconFont clIcon-edit"
    },
    isSubmitCleanValue: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["onSubmit", "onChangeOpen"],
  setup(c, { expose: de, emit: me }) {
    const a = c, X = me, M = Be(), pe = De(), { optPageLanguage: G, getPageLanguage: fe } = Pe();
    fe("xEditable");
    const b = S(null), V = S(null), v = S(null), B = S(null), Q = S(null), W = S(null), l = ie({
      keyIndex: `xeditable-${s.getRandom(8)}`,
      showText: "",
      subUnitValue: "",
      subUnitValueType: "",
      showMsg: "",
      isShowEmpty: !1,
      isBtnOperateCenter: !1
    }), u = S({}), w = S([]), x = ie({
      status: 0,
      // 1:初始，2:过渡中 0:结束
      startColor: "#FFFF80",
      endColor: "rgba(0, 0, 0, 0)"
    }), p = {
      lastValue: "",
      runStep: "",
      resizeEventCustomHtml: null,
      resizeEventErrMsg: null
    }, Y = g(() => {
      const { type: e } = a;
      return e === "input" || e === "select";
    }), A = g(() => !s.isUndefined(pe.iconLabel)), be = g(() => {
      let t = ["panel-xeditable"].join(" ");
      return s.isEmpty(a.className) || (t += " " + a.className), t;
    }), ve = g(() => {
      const e = ["xeditable-value"];
      return l.isShowEmpty && e.push("xeditable-empty"), (a.isShowEditIcon || A.value) && e.push("xeditable-edit-icon"), e.join(" ");
    }), ye = g(() => {
      const e = ["xeditable-value-label"], { clickEditPoint: t } = a;
      return t === "value" || l.isShowEmpty ? e.push("dropdownLayer-arrow-anchorPoint") : e.push("xeditable-click-invalid"), e.join(" ");
    }), ke = g(() => {
      const e = ["xeditable-value-editIcon", "dropdownLayer-arrow-anchorPoint"];
      return A.value && e.push("xeditable-value-editIcon-slot"), e.join(" ");
    }), ge = g(() => {
      const e = ["xeditable-ellipsis"];
      return e.push(a.classNameEllipsis), x.status === 2 && e.push("xeditable-value-hlight"), e.join(" ");
    }), Ee = g(() => {
      const e = ["xeditable-dropdown"];
      return e.push(`xeditable-dropdown-${a.type}`), e.join(" ");
    }), he = g(() => {
      const e = {};
      return l.isBtnOperateCenter && (e["text-align"] = "center"), e;
    }), Z = g(() => {
      const e = {};
      switch (x.status) {
        case 1:
          e["background-color"] = x.startColor;
          break;
        case 2:
          e["background-color"] = x.endColor;
          break;
      }
      return e;
    }), Ce = (e) => {
      const t = F.getElementData(M);
      X("onSubmit", e, t);
    }, xe = (e) => {
      _(() => {
        const t = F.getElementData(M);
        X("onChangeOpen", e, t);
      });
    }, J = () => {
      b.value && b.value.setOpen(!1), B.value && B.value.loadStop();
    }, ee = (e) => {
      l.showMsg = s.isEmpty(e) ? "" : e, _(() => {
        b.value && b.value.calculationPosition();
      });
    }, te = () => {
      let e = !1;
      switch (a.type) {
        case "select":
          s.isBoolean(u.value.multiple) && (e = u.value.multiple);
          break;
        case "radio":
          e = !1;
          break;
        case "checkbox":
          e = !0;
          break;
        case "selectTag":
          e = !0;
          break;
        case "inputTag":
          s.isBoolean(u.value.multiple) && (e = u.value.multiple);
          break;
      }
      return e;
    }, le = () => {
      const e = s.getJsonClone(a.subUnitOptions);
      switch (a.type) {
        case "input": {
          let t = "", i = !1, n = 0, r = { isClean: !0 };
          if (r = s.getJsonMerge(r, e), s.isBoolean(r.isNumber) && (i = r.isNumber), i && (t = "int", s.isNumber(r.decimal) && (n = parseInt(r.decimal), n > 0)))
            switch (n.toString()) {
              case "2":
                t = "float2";
                break;
              case "3":
                t = "float3";
                break;
              default:
                t = "float";
            }
          l.subUnitValueType = t, u.value = r;
          break;
        }
        case "select": {
          let t = { multiple: !1, placeholder: G.value.common.pleaseSelect };
          t = s.getJsonMerge(t, e), u.value = t;
          break;
        }
        case "textarea": {
          let t = { isClean: !0 };
          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = !0;
          break;
        }
        case "radio": {
          let t = { isInline: !0, name: `${l.keyIndex}-radio` };
          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = t.isInline;
          break;
        }
        case "checkbox": {
          let t = { isInline: !1, name: `${l.keyIndex}-checkbox` };
          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = t.isInline;
          break;
        }
        case "selectTag": {
          let t = { type: "radio" };
          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = !0;
          break;
        }
        case "inputTag": {
          let t = { multiple: !0, isAutofill: !0 };
          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = !0;
          break;
        }
        case "dateTime": {
          let t = { isDropdown: !1 };
          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = !0;
          break;
        }
        case "customHtml": {
          l.isBtnOperateCenter = !0;
          break;
        }
      }
    }, R = (e, t) => {
      let i = !1, n = !1;
      t && (s.isUndefined(t.label) || (i = !0), s.isUndefined(t.list) || (n = !0));
      let r = "", y = "", d = "";
      switch (s.isEmpty(e) || (d = e?.toString()), a.type) {
        case "input":
        case "textarea": {
          if (!i && d && !s.isEmpty(d))
            if (a.type === "input" && s.isBoolean(u.value.isNumber) && s.isNumber(d)) {
              const C = l.subUnitValueType === "float" ? u.value.decimal : "";
              r = s.getValueByFormat(d, l.subUnitValueType, {
                decimalNum: C
              });
            } else
              r = d;
          y = d;
          break;
        }
        case "select":
        case "radio":
        case "checkbox":
        case "selectTag":
        case "inputTag": {
          const C = n ? t.list : w.value;
          if (!i && d && !s.isEmpty(d))
            if (a.type === "inputTag")
              r = d;
            else {
              const T = te(), P = [], q = T ? d.split(",") : [d.toString()], N = s.getJsonByList(C);
              q.forEach((z) => {
                s.isExistJsonKey(N, z) && P.push(N[z].name);
              }), r = P.join(",");
            }
          y = d;
          break;
        }
        case "dateTime": {
          i || (r = d), y = d;
          break;
        }
      }
      a.isSubmitCleanValue && (y = "", V.value && V.value.reset()), l.showText = i ? t.label.toString() : r, l.subUnitValue = y, l.isShowEmpty = s.isEmpty(l.showText), p.lastValue = l.subUnitValue, n && (w.value = t.list);
    }, Se = () => {
      x.status = 1, _(() => {
        setTimeout(() => {
          x.status = 2;
        }, 10), setTimeout(() => {
          x.status = 0;
        }, 1500);
      });
    }, D = (e) => {
      if (e.success) {
        ee(""), V.value && V.value.reset();
        const t = v.value ? v.value.getValueData() : {};
        let i = "";
        const n = {}, r = s.isEmpty(e.data) ? {} : e.data, y = s.isUndefined(r.label);
        switch (n.label = y ? null : r.label, a.type) {
          case "input":
          case "textarea":
          case "dateTime":
            i = t.value;
            break;
          case "select":
          case "radio":
          case "checkbox":
          case "selectTag":
          case "inputTag": {
            if (te() && s.isArray(t)) {
              const d = [], C = [];
              t.forEach((T) => {
                d.push(T.id), C.push(T.name);
              }), y && (n.label = C.join(",")), i = a.type === "inputTag" ? C.join(",") : d.join(",");
            } else
              y && (n.label = t.name || ""), i = a.type === "inputTag" ? t.name || "" : t.id ? t.id.toString() : "";
            s.isUndefined(r.list) || (n.list = r.list);
            break;
          }
        }
        n.isResult = !0, p.runStep !== "updateProps" && R(i, n), Se(), J();
      } else
        ee(e.msg), _(() => {
          B.value && B.value.loadStop();
        });
    }, Ue = () => {
      le(), R(a.value, { label: a.label, list: a.subUnitList });
    };
    oe(
      [() => a.value, () => a.label, () => a.subUnitList],
      ([e, t, i], [n, r, y]) => {
        e !== n && (p.runStep = "updateProps", R(e, { label: t, list: i }));
      }
    ), oe(
      () => a.subUnitOptions,
      () => {
        le();
      }
    ), Le(() => {
      _(() => {
        Ue();
      });
    }), Fe(() => {
    });
    const we = async () => {
      let e = !1;
      if (a.isCheckValidate) {
        if (e = await V.value.validate(), a.checkValidateCallback && s.isFunction(a.checkValidateCallback)) {
          const t = F.getElementData(M), i = $();
          let n = await a.checkValidateCallback(i, t);
          n = s.isBoolean(n) ? n : !0, n || (e = !1);
        }
      } else
        e = !0;
      return e;
    }, se = () => {
      let e = !1;
      return a.submitCallback && s.isFunction(a.submitCallback) && (e = !0), e;
    }, $ = () => {
      let e = "";
      return a.type !== "customHtml" && (e = v.value ? v.value.getValue() : ""), e;
    }, ae = () => {
      if (a.submitCallback && se()) {
        const e = $(), t = F.getElementData(M), i = a.submitCallback(e, t);
        if (i.then && s.isFunction(i.then))
          i.then((n) => {
            D(s.isBoolean(n) ? { success: n } : n);
          });
        else {
          let n = {};
          s.isUndefined(i) ? n = { success: !0 } : s.isBoolean(i) ? n = { success: i } : s.isObject(i) && s.isBoolean(i.success) ? n = i : n = { success: !1, msg: G.value.submitCallback }, D(n);
        }
      }
    }, Ve = () => {
      we().then((e) => {
        if (e)
          if (a.type === "customHtml")
            p.runStep = "first", ae();
          else {
            const t = $(), i = s.isEmpty(t);
            t !== p.lastValue || i && l.showText.length > 0 ? (p.runStep = "first", se() ? ae() : (a.isUseOnSubmitCheck || D({ success: !0 }), Ce(t))) : J();
          }
        else
          D({ success: !1 });
      });
    }, Te = () => {
      J();
    }, h = () => {
      b.value && (b.value.checkCurrentIsOpen() || b.value.initCompleteOpen());
    }, _e = (e) => {
      e ? (p.lastValue = l.subUnitValue, _(() => {
        a.type === "customHtml" ? (h(), p.resizeEventCustomHtml = new ce({
          element: Q.value,
          callback: () => {
            b.value && b.value.calculationPosition();
          }
        })) : p.resizeEventErrMsg = new ce({
          element: W.value,
          callback: () => {
            b.value && b.value.calculationPosition();
          }
        });
      })) : (l.subUnitValue = p.lastValue, p.resizeEventCustomHtml && (p.resizeEventCustomHtml.destroy(), p.resizeEventCustomHtml = null), p.resizeEventErrMsg && (p.resizeEventErrMsg.destroy(), p.resizeEventErrMsg = null)), xe(e);
    }, Ie = (e) => {
      const t = F.getParent(e.target, ".xeditable-click-invalid", e.currentTarget, !1);
      s.isUndefined(t) || (e.preventDefault(), e.stopPropagation());
    };
    return de({
      setOnSubmitResult: (e) => {
        a.isUseOnSubmitCheck && s.isUndefined(a.submitCallback) && D(e);
      }
    }), (e, t) => {
      const i = k("cl-ellipsis"), n = k("cl-input"), r = k("cl-textarea"), y = k("cl-select"), d = k("cl-radio"), C = k("cl-checkbox"), T = k("cl-select-tag"), P = k("cl-input-tag"), q = k("cl-datetime"), N = k("cl-form-validate"), z = k("cl-form"), ne = k("cl-button");
      return o(), E(Ne, {
        ref_key: "refElDropdownLayer",
        ref: b,
        classParent: be.value,
        classText: c.classNameLabel,
        classDropDown: Ee.value,
        dropdownArrowPos: "center",
        dropDownPos: "up",
        isUseDropdownArrow: !0,
        isCloseDestroy: !0,
        isInitDelayComplete: !0,
        appendContainer: c.appendContainer,
        onOnChangeOpen: _e,
        transitionEnter: "animated fadeIn",
        transitionLeave: "animated fadeOut"
      }, {
        label: H(() => [
          I("div", {
            class: L(ve.value)
          }, [
            c.isShowEditValue ? (o(), f("div", {
              key: 0,
              class: L(ye.value),
              onClick: t[0] || (t[0] = (m) => Ie(m))
            }, [
              c.isUseEllipsis && l.showText.length > 0 ? (o(), E(i, {
                key: 0,
                className: ge.value,
                isAutoTooltip: c.isAutoTooltip,
                text: l.showText,
                style: K(Z.value)
              }, null, 8, ["className", "isAutoTooltip", "text", "style"])) : (o(), f("span", {
                key: 1,
                class: L({ "xeditable-value-hlight": x.status === 2 }),
                style: K(Z.value)
              }, re(l.showText), 7))
            ], 2)) : (o(), f(O, { key: 1 }, [], 64)),
            c.isShowEditIcon || A.value ? (o(), f("div", {
              key: 2,
              class: L(ke.value)
            }, [
              ue(e.$slots, "iconLabel", {}, () => [
                I("i", {
                  class: L(c.editIcon)
                }, null, 2)
              ])
            ], 2)) : (o(), f(O, { key: 3 }, [], 64))
          ], 2)
        ]),
        dropdown: H(() => [
          I("div", ze, [
            I("div", He, [
              I("div", je, [
                j(z, {
                  ref_key: "refElForm",
                  ref: V,
                  isScrollToErr: !1
                }, {
                  default: H(() => [
                    c.type === "customHtml" ? (o(), f("div", {
                      key: 0,
                      ref_key: "refElCustom",
                      ref: Q,
                      class: "xeditable-custom"
                    }, [
                      ue(e.$slots, "customForm")
                    ], 512)) : (o(), f("div", Ae, [
                      j(N, {
                        isCheck: c.isCheckValidate,
                        checkValue: l.subUnitValue,
                        rules: c.validateRules,
                        msgElementId: Y.value ? `#${l.keyIndex}_errmsg` : ""
                      }, {
                        default: H(() => [
                          c.type === "input" ? (o(), E(n, U({
                            key: 0,
                            ref_key: "refElFormEdit",
                            ref: v,
                            value: l.subUnitValue,
                            "onUpdate:value": t[1] || (t[1] = (m) => l.subUnitValue = m)
                          }, u.value, { onOnInit: h }), null, 16, ["value"])) : c.type === "textarea" ? (o(), E(r, U({
                            key: 1,
                            ref_key: "refElFormEdit",
                            ref: v,
                            value: l.subUnitValue,
                            "onUpdate:value": t[2] || (t[2] = (m) => l.subUnitValue = m)
                          }, u.value, { onOnInit: h }), null, 16, ["value"])) : c.type === "select" ? (o(), E(y, U({
                            key: 2,
                            ref_key: "refElFormEdit",
                            ref: v,
                            value: l.subUnitValue,
                            "onUpdate:value": t[3] || (t[3] = (m) => l.subUnitValue = m),
                            list: w.value
                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "radio" ? (o(), E(d, U({
                            key: 3,
                            ref_key: "refElFormEdit",
                            ref: v,
                            value: l.subUnitValue,
                            "onUpdate:value": t[4] || (t[4] = (m) => l.subUnitValue = m),
                            list: w.value
                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "checkbox" ? (o(), E(C, U({
                            key: 4,
                            ref_key: "refElFormEdit",
                            ref: v,
                            value: l.subUnitValue,
                            "onUpdate:value": t[5] || (t[5] = (m) => l.subUnitValue = m),
                            list: w.value
                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "selectTag" ? (o(), E(T, U({
                            key: 5,
                            ref_key: "refElFormEdit",
                            ref: v,
                            value: l.subUnitValue,
                            "onUpdate:value": t[6] || (t[6] = (m) => l.subUnitValue = m),
                            list: w.value
                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "inputTag" ? (o(), E(P, U({
                            key: 6,
                            ref_key: "refElFormEdit",
                            ref: v,
                            value: l.subUnitValue,
                            "onUpdate:value": t[7] || (t[7] = (m) => l.subUnitValue = m),
                            list: w.value
                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "dateTime" ? (o(), E(q, U({
                            key: 7,
                            ref_key: "refElFormEdit",
                            ref: v,
                            value: l.subUnitValue,
                            "onUpdate:value": t[8] || (t[8] = (m) => l.subUnitValue = m)
                          }, u.value, { onOnInit: h }), null, 16, ["value"])) : (o(), f(O, { key: 8 }, [], 64))
                        ]),
                        _: 1
                      }, 8, ["isCheck", "checkValue", "rules", "msgElementId"])
                    ]))
                  ]),
                  _: 3
                }, 512)
              ]),
              I("div", {
                class: "xeditable-operate",
                style: K(he.value)
              }, [
                j(ne, {
                  ref_key: "refElSubmit",
                  ref: B,
                  icon: "clIconFont clIcon-check1",
                  isShowLoad: !0,
                  size: "small",
                  loadPos: "zoom-out",
                  loadTheme: "rotaryLine",
                  isShowBackDrop: !0,
                  onOnClick: Ve
                }, null, 512),
                j(ne, {
                  icon: "clIconFont clIcon-close",
                  size: "small",
                  color: "grayLight",
                  onOnClick: Te
                })
              ], 4)
            ]),
            Y.value ? (o(), f(O, { key: 0 }, [
              c.isCheckValidate ? (o(), f("div", {
                key: 0,
                ref_key: "refElErrMsg",
                ref: W,
                id: `${l.keyIndex}_errmsg`,
                class: "xeditable-errmsg"
              }, null, 8, Je)) : (o(), f(O, { key: 1 }, [
                l.showMsg.length > 0 ? (o(), f("div", Re, re(l.showMsg), 1)) : (o(), f(O, { key: 1 }, [], 64))
              ], 64))
            ], 64)) : Me("", !0)
          ])
        ]),
        _: 3
      }, 8, ["classParent", "classText", "classDropDown", "appendContainer"]);
    };
  }
});
export {
  Ye as default
};
//# sourceMappingURL=ClXeditable.js.map
