import { defineComponent as w, reactive as y, shallowReactive as D, ref as E, watch as O, createVNode as l, resolveComponent as t, Fragment as R, isVNode as L } from "vue";
import { ElIcon as M, ElForm as z, ElFormItem as U, ElTooltip as N, ElColorPicker as T, ElInput as H, ElSelect as P, ElOption as j, ElButton as G, ElSwitch as $, ElDivider as K, ElPopover as W, ElCheckboxGroup as X, ElCheckbox as q } from "element-plus";
import { U as B, V as g, A as v, W as x, X as J } from "./main-DXvReGBc.js";
import { useResolveVnode as V } from "@klweb/compose-app-engine";
import { e as Q } from "./index-ClGUov3E.js";
var F = /* @__PURE__ */ function(e) {
  return e.light = "dark", e.dark = "light", e.prefix = "--el-color", e;
}(F || {}), I = document.documentElement, f = F.prefix;
function Y(e) {
  I.classList.remove(F[e]), I.classList.add(e);
}
function Z(e, a) {
  var c = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
  if (!c.test(a))
    throw new Error("无法识别的颜色值，请输入合法的十六进制颜色值，如: #ff2200 | #f20");
  for (var n = f + "-" + e + ": " + a + ";", d = f + "-" + e + ": " + a + ";", s = 1; s <= 9; s++)
    n += f + "-" + e + "-light-" + s + ": " + h(a, "#ffffff", s / 10) + ";", d += f + "-" + e + "-light-" + s + ": " + h(a, "#141414", s / 10) + ";", s === 2 && (n += f + "-" + e + "-dark-2: " + h(a, "#000000", s / 10) + ";", d += f + "-" + e + "-dark-2: " + h(a, "#ffffff", s / 10) + ";");
  n += f + "-" + e + "-rgb: " + A(a) + ";", d += f + "-" + e + "-rgb: " + A(a) + ";";
  var b = "theme-color-" + e, r = document.createElement("style");
  r.id = b;
  var m = document.getElementById(b), p = document.createTextNode(`
        :root { ` + n + ` }
        html.dark { ` + d + ` }
    `);
  r.appendChild(p), m && m.remove(), document.head.appendChild(r);
}
var h = function(a, c, n) {
  a = k(a), c = k(c), n = Math.max(Math.min(Number(n), 1), 0);
  var d = parseInt(a.substring(1, 3), 16), s = parseInt(a.substring(3, 5), 16), b = parseInt(a.substring(5, 7), 16), r = parseInt(c.substring(1, 3), 16), m = parseInt(c.substring(3, 5), 16), p = parseInt(c.substring(5, 7), 16), u = Math.round(d * (1 - n) + r * n), i = Math.round(s * (1 - n) + m * n), o = Math.round(b * (1 - n) + p * n);
  return u = ("0" + (u || 0).toString(16)).slice(-2), i = ("0" + (i || 0).toString(16)).slice(-2), o = ("0" + (o || 0).toString(16)).slice(-2), "#" + u + i + o;
};
function A(e) {
  e = k(e);
  var a = parseInt(e.substring(1, 3), 16), c = parseInt(e.substring(3, 5), 16), n = parseInt(e.substring(5, 7), 16);
  return a + "," + c + "," + n;
}
function k(e) {
  return e = e.replace("#", ""), e.length === 3 && (e = e[0] + e[0] + e[1] + e[1] + e[2] + e[2]), "#" + e;
}
const C = {
  "system-setter-container": "_system-setter-container_t61gs_1",
  "theme-color-container": "_theme-color-container_t61gs_20",
  "custom-select-opts-item": "_custom-select-opts-item_t61gs_56",
  "clear-action-btn": "_clear-action-btn_t61gs_65"
}, {
  IconSetColor: ee
} = Q;
function S(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !L(e);
}
const re = /* @__PURE__ */ w({
  name: "KlEditorSystemSetter",
  components: {
    ElIcon: M,
    ElForm: z,
    ElFormItem: U,
    ElTooltip: N,
    ElColorPicker: T,
    ElInput: H,
    ElSelect: P,
    ElOption: j,
    ElButton: G,
    ElSwitch: $,
    ElDivider: K,
    ElPopover: W,
    ElCheckboxGroup: X,
    ElCheckbox: q
  },
  setup() {
    const e = y({
      colorScheme: B.value,
      themeColor: g.value
    }), a = D([{
      label: v.COLOR_SCHEME_LIGHT,
      value: "light",
      icon: x,
      size: 16
    }, {
      label: v.COLOR_SCHEME_DARK,
      value: "dark",
      icon: J
    }]), c = (u) => {
      Y(u), B.value = u;
    }, n = E(["#ff4500", "#ff8c00", "#F5CF01", "#71E271", "#2CC22C", "#0B850B", "#00ced1", "#409EFF", "#1e90ff", "#003399", "#333366", "#F315A0", "#BB039D", "#7103BB"]), d = E(), s = () => {
      d.value.show();
    }, b = (u, i) => {
      if (!i) {
        e.themeColor = g.value;
        return;
      }
      g.value = i, Z(u, i);
    }, r = E(!0), m = E(!1), p = E([]);
    return O([B, g], ([u, i]) => {
      e.colorScheme = u, e.themeColor = i;
    }), () => {
      let u, i;
      return l("div", {
        class: C["system-setter-container"]
      }, [l("main", null, [l(t("el-form"), {
        model: e,
        "label-width": "auto",
        "label-position": "left"
      }, {
        default: () => [l(t("el-form-item"), {
          label: "配色方案"
        }, {
          default: () => [l(t("el-select"), {
            class: "width--full",
            modelValue: e.colorScheme,
            "onUpdate:modelValue": (o) => e.colorScheme = o,
            onChange: c
          }, S(u = a.map((o) => {
            let _;
            return l(t("el-option"), {
              label: o.label,
              value: o.value
            }, {
              default: () => [l("p", {
                class: C["custom-select-opts-item"]
              }, [l("span", null, [o.label]), l(t("el-icon"), {
                style: {
                  fontSize: `${o.size}px`
                }
              }, S(_ = V(o.icon)) ? _ : {
                default: () => [_]
              })])]
            });
          })) ? u : {
            default: () => [u]
          })]
        }), l(t("el-form-item"), {
          label: "主题色"
        }, {
          default: () => [l("dl", {
            class: C["theme-color-container"]
          }, [l("dt", {
            style: {
              background: e.themeColor
            }
          }, [l("span", null, [e.themeColor]), l("span", null, [l(t("el-color-picker"), {
            ref: d,
            size: "small",
            modelValue: e.themeColor,
            "onUpdate:modelValue": (o) => e.themeColor = o,
            predefine: n.value,
            onChange: (o) => b("primary", o)
          }, null), l(t("el-tooltip"), {
            effect: "dark",
            "hide-after": 0,
            placement: "top",
            content: v.SET_THEME_COLOR
          }, {
            default: () => [l(t("el-icon"), {
              onClick: s
            }, S(i = V(ee)) ? i : {
              default: () => [i]
            })]
          })])]), l("dd", null, [[3, 5, 7, 8, 9].map((o) => l("span", {
            style: {
              background: `var(--el-color-primary-light-${o})`
            }
          }, null))])])]
        }), l(t("el-divider"), null, null), l(t("el-form-item"), {
          label: "设备模拟器",
          class: "content-position--right"
        }, {
          default: () => [l(t("el-switch"), {
            modelValue: r.value,
            "onUpdate:modelValue": (o) => r.value = o
          }, null)]
        }), l(t("el-form-item"), {
          label: "默认设备"
        }, null), l(t("el-form-item"), {
          label: "设备适配"
        }, null), l(t("el-divider"), null, null), l(t("el-form-item"), {
          label: "设置器",
          class: "content-position--right"
        }, {
          default: () => [l(t("el-switch"), {
            modelValue: r.value,
            "onUpdate:modelValue": (o) => r.value = o
          }, null)]
        }), l(t("el-form-item"), {
          label: "左侧面板",
          class: "content-position--right"
        }, {
          default: () => [l(t("el-switch"), {
            modelValue: r.value,
            "onUpdate:modelValue": (o) => r.value = o
          }, null)]
        }), l(t("el-divider"), null, null), l(t("el-form-item"), {
          label: "自动保存",
          class: "content-position--right"
        }, {
          default: () => [l(t("el-switch"), {
            modelValue: r.value,
            "onUpdate:modelValue": (o) => r.value = o
          }, null)]
        })]
      })]), l("footer", null, [l(t("el-popover"), {
        width: 260,
        trigger: "click",
        placement: "top",
        "hide-after": 0,
        transition: "el-zoom-in-bottom",
        teleported: !1,
        visible: m.value
      }, {
        default: () => l(R, null, [l(t("el-checkbox-group"), {
          modelValue: p.value,
          "onUpdate:modelValue": (o) => p.value = o
        }, {
          default: () => [l(t("el-checkbox"), {
            label: "用户系统设置数据",
            value: "system"
          }, null), l(t("el-checkbox"), {
            label: "应用编排缓存数据",
            value: "schema"
          }, null)]
        }), l("p", {
          class: C["clear-action-btn"]
        }, [l(t("el-button"), {
          text: !0,
          size: "small",
          onClick: () => m.value = !1
        }, {
          default: () => [v.CANCEL]
        }), l(t("el-button"), {
          type: "primary",
          size: "small",
          disabled: !p.value.length,
          onClick: () => m.value = !1
        }, {
          default: () => [v.COMFIRM]
        })])]),
        reference: () => l(t("el-button"), {
          size: "large",
          plain: !0,
          onClick: () => m.value = !0
        }, {
          default: () => [v.CLEAR_CACHE_DATA]
        })
      }), l(t("el-button"), {
        type: "primary",
        size: "large",
        style: "margin: 10px 0 0 0"
      }, {
        default: () => [v.RESTORE_DEFAULT_SETTING]
      })])]);
    };
  }
});
export {
  re as default
};
