import { defineComponent as fe, ref as g, computed as E, watch as x, toRef as de, useSlots as ve, createVNode as l, cloneVNode as ge, unref as e, openBlock as T, createElementBlock as j, Fragment as ye, createBlock as B, resolveDynamicComponent as N, createCommentVNode as F, withCtx as s, withDirectives as Se, createElementVNode as m, normalizeClass as r, toDisplayString as y, createTextVNode as z, isRef as he, vShow as Te } from "vue";
import { SettingOutlined as Ce, SaveOutlined as be } from "@ant-design/icons-vue";
import { Button as M, Modal as ke, Divider as $, RadioGroup as _e, RadioButton as q, Flex as xe, Space as G, Popover as ze } from "@aplus-frontend/antdv";
import "../../../../ap-button/index.mjs";
import { randomStr as Ae } from "../../../../utils/index.mjs";
import "../../../../config-provider/index.mjs";
import { getSingleVNode as we } from "../../../../utils/slot.mjs";
import { useInjectApTable as Ke } from "../../../context.mjs";
import { useTableColumnState as Be } from "../../../hooks/use-table-column-state.mjs";
import { useTableTemplateStorage as Ne } from "../../../hooks/use-table-template-storage.mjs";
import $e from "../../../style/setting.mjs";
import { useProvideApColumnSetting as Ie } from "../context.mjs";
import "../sorter/index.vue.mjs";
import "../template/edit-form.vue.mjs";
import "../template/index.vue.mjs";
import "../tree-select/index.vue.mjs";
import Re, { customCloneColumnStates as I, isEqualColumnStateIgnoreLabel as Ve } from "../utils.mjs";
import { useLocale as De } from "../../../../config-provider/hooks/use-locale.mjs";
import { useNamespace as H } from "../../../../config-provider/hooks/use-namespace.mjs";
import Le from "../template/index.vue2.mjs";
import Oe from "../tree-select/index.vue2.mjs";
import Pe from "../sorter/index.vue2.mjs";
import Ue from "../../../../ap-button/ap-button.vue.mjs";
import Ee from "../template/edit-form.vue2.mjs";
const je = {
  style: {
    "padding-inline": "8px"
  }
}, ft = /* @__PURE__ */ fe({
  name: "ApTableSetting",
  __name: "index",
  props: {
    config: {
      default: () => ({
        persistenceKey: ""
      })
    }
  },
  setup(R) {
    const c = R, {
      columnsBackup: J,
      updateSize: Q,
      updateColumns: W
    } = Ke(), f = g(), C = E(() => c.config.persistenceKey), b = g(!1), {
      basicTemplate: X,
      customizeTemplateList: S,
      addTemplate: Y,
      deleteTemplate: V,
      updateTemplate: Z
    } = Ne(c.config, C, pe), {
      columnState: p,
      setColumnState: D,
      isAllSelected: ee,
      toggleSelectAll: te
    } = Be([]), k = E(() => C.value && `${C.value}__active_key`);
    function L(a) {
      k.value && localStorage.setItem(k.value, a);
    }
    function A() {
      if (k.value)
        return localStorage.getItem(k.value);
    }
    const o = g(c.config.defaultActiveKey ?? A());
    x(() => S.value, (a) => {
      a.length && !o.value && (o.value = a[0]?.key);
    }, {
      immediate: !0
    }), Ie({
      activeKey: o,
      cacheConfig: de(c, "config"),
      deleteTemplate: re
    });
    const {
      t: u
    } = De(), {
      b: v,
      be: _
    } = H("ap-column-setting"), {
      b: ae
    } = H("ap-table"), ne = $e("ap-column-setting"), h = g(!1), O = g(!1), le = ve(), P = we(le.trigger) || l(M, {
      icon: l(Ce, null, null),
      class: ae("setting-trigger-button")
    }, null), U = P ? ge(P, {
      onClick: () => {
        h.value = !0;
      }
    }) : null;
    function oe() {
      D(I(e(X).columnState));
    }
    function w(a, t) {
      W?.(Re(e(J), a)), Q?.(t);
    }
    function ie() {
      w(e(p), e(f)), h.value = !1;
      const a = I(p.value), t = Z(o.value, {
        columnState: a,
        size: f.value
      });
      L(o.value), c.config?.onChange?.(a, t);
    }
    function se(a) {
      const t = c.config.getActiveKey?.(a) ?? Ae(), n = {
        key: t,
        label: a,
        columnState: p.value,
        size: f.value
      };
      Y(n), b.value = !1, o.value = t, c.config.onChange?.(n.columnState, n);
    }
    function ue(a, t) {
      const n = [...t].find((i) => i?.key === a);
      n && (D(I(n.columnState)), f.value = n.size);
    }
    function re(a) {
      if (a !== o.value) {
        V(a);
        return;
      }
      const t = S.value, n = t.findIndex((d) => d.key === a), i = t[n + 1]?.key ?? t[n - 1]?.key;
      V(a), o.value = i, L(i);
    }
    function ce(a) {
      if (O.value = a, !a) {
        const t = A();
        t && t !== o.value && (o.value = t);
      }
    }
    function pe(a) {
      const t = A() ?? a[0].key;
      o.value = t;
      const n = [...a].find((i) => i?.key === t);
      n && w(n.columnState, n.size);
    }
    x([o, S], ([a, t], [n, i]) => {
      if (t.length && !i?.length && a) {
        const d = [...t].find((me) => me.key === a);
        if (!d)
          return;
        w(d.columnState, d.size);
      }
      ue(a, t);
    }, {
      immediate: !0
    });
    const K = g(!1);
    return x([f, p, h], ([a, t, n]) => {
      if (!n)
        return;
      const i = S.value.find((d) => d.key === o.value);
      i && (i.size !== a || !Ve(t, i.columnState)) ? K.value = !0 : K.value = !1;
    }, {
      deep: !0
    }), x(() => o.value, (a) => {
      c.config.onActiveChange?.(a);
    }, {
      immediate: !0
    }), (a, t) => (T(), j(ye, null, [e(U) ? (T(), B(N(e(U)), {
      key: 0
    })) : F("", !0), l(e(ke), {
      open: h.value,
      "onUpdate:open": t[4] || (t[4] = (n) => h.value = n),
      title: e(u)("ap.apTable.setting.title"),
      width: 1e3,
      centered: !0,
      "body-style": {
        padding: "0px !important",
        height: "516px"
      },
      "after-open-change": ce,
      "wrap-class-name": `${e(v)()} ${e(ne)}`,
      "ok-text": e(u)("ap.apTable.setting.saveAndApply"),
      "mask-closable": !1,
      onOk: ie
    }, {
      footer: s(({
        extra: n
      }) => [l(e(xe), {
        justify: "space-between"
      }, {
        default: s(() => [l(e(G), {
          size: 12
        }, {
          default: s(() => [l(e(ze), {
            open: b.value,
            "onUpdate:open": t[3] || (t[3] = (i) => b.value = i),
            trigger: "click",
            arrow: !1,
            placement: "topLeft",
            "destroy-tooltip-on-hide": ""
          }, {
            content: s(() => [l(Ee, {
              onConfirm: se,
              onCancel: t[2] || (t[2] = () => b.value = !1)
            })]),
            default: s(() => [l(e(Ue), {
              type: "borderLink",
              disabled: !R.config.persistenceKey
            }, {
              icon: s(() => [l(e(be))]),
              default: s(() => [z(y(e(u)("ap.apTable.setting.saveAsTemplate")) + " ", 1)]),
              _: 1
            }, 8, ["disabled"])]),
            _: 1
          }, 8, ["open"]), K.value ? (T(), j("span", {
            key: 0,
            class: r(e(v)("modify-tip"))
          }, y(e(u)("ap.apTable.setting.modifyNotification")), 3)) : F("", !0)]),
          _: 1
        }), l(e(G), {
          size: 10
        }, {
          default: s(() => [(T(), B(N(n.cancelBtn))), (T(), B(N(n.okBtn)))]),
          _: 2
        }, 1024)]),
        _: 2
      }, 1024)]),
      default: s(() => [Se(m("div", {
        class: r(e(v)("wrapper"))
      }, [m("div", {
        class: r(e(v)("left"))
      }, [l(Le, {
        "customize-template-list": e(S),
        "persistence-key": C.value
      }, null, 8, ["customize-template-list", "persistence-key"])], 2), l(e($), {
        type: "vertical",
        style: {
          height: "100%",
          margin: "0px"
        }
      }), m("div", {
        class: r(e(v)("center"))
      }, [m("div", {
        class: r(e(_)("center", "header"))
      }, [m("div", {
        class: r(e(_)("center", "tip-wrapper"))
      }, [m("span", {
        class: r(e(_)("center", "header-tips"))
      }, y(e(u)("ap.apTable.setting.selectAllTip")), 3), l(e(M), {
        type: "link",
        size: "small",
        onClick: e(te)
      }, {
        default: s(() => [z(y(e(ee) ? e(u)("ap.apTable.setting.unSelectAll") : e(u)("ap.apTable.setting.selectAll")), 1)]),
        _: 1
      }, 8, ["onClick"])], 2), l(e(_e), {
        value: f.value,
        "onUpdate:value": t[0] || (t[0] = (n) => f.value = n)
      }, {
        default: s(() => [l(e(q), {
          value: "small"
        }, {
          default: s(() => [z(y(e(u)("ap.apTable.setting.sizeSmall")), 1)]),
          _: 1
        }), l(e(q), {
          value: "middle"
        }, {
          default: s(() => [z(y(e(u)("ap.apTable.setting.sizeNormal")), 1)]),
          _: 1
        })]),
        _: 1
      }, 8, ["value"])], 2), m("div", je, [l(e($), {
        dashed: "",
        style: {
          margin: "0px"
        }
      })]), l(Oe, {
        class: r(e(_)("center", "content")),
        value: e(p)
      }, null, 8, ["class", "value"])], 2), l(e($), {
        type: "vertical",
        style: {
          height: "100%",
          margin: "0px"
        }
      }), m("div", {
        class: r(e(v)("right"))
      }, [l(Pe, {
        value: e(p),
        "onUpdate:value": t[1] || (t[1] = (n) => he(p) ? p.value = n : null),
        onReset: oe
      }, null, 8, ["value"])], 2)], 2), [[Te, O.value]])]),
      _: 1
    }, 8, ["open", "title", "wrap-class-name", "ok-text"])], 64));
  }
});
export {
  ft as default
};
