import { defineComponent as S, ref as C, watch as k, unref as e, openBlock as D, createBlock as L, withCtx as r, createVNode as t, normalizeClass as o, createElementVNode as n, toDisplayString as m, createTextVNode as b } from "vue";
import { Popover as P, Tooltip as V, Button as g, Flex as _, Divider as j } from "@aplus-frontend/antdv";
import { IconApLayoutOutlined as z } from "@aplus-frontend/icon";
import A from "vuedraggable";
import "../../../../config-provider/index.mjs";
import I from "../../../style/search-form-sorter.mjs";
import "./sortable-item.vue.mjs";
import { useNamespace as F } from "../../../../config-provider/hooks/use-namespace.mjs";
import { useLocale as R } from "../../../../config-provider/hooks/use-locale.mjs";
import E from "./sortable-item.vue2.mjs";
const X = /* @__PURE__ */ S({
  name: "ApFormSearchFormPopoverSorter",
  __name: "index",
  props: {
    items: {},
    onClickConfirm: { type: Function },
    sorted: { type: Boolean }
  },
  setup(x, { expose: w }) {
    const l = x, i = C(l.items);
    let v = [...l.items], h = [...l.items];
    k(
      () => l.items,
      (s) => {
        i.value = s, v = s, l.sorted || (h = s);
      }
    );
    const B = I("search-form-sorter"), { e: f, b: y } = F("ap-form-search-form"), { b: a } = F("search-form-sorter"), { t: c } = R(), p = C(!1);
    function T(s) {
      return s.closest(".ant-form") || document.body;
    }
    function $() {
      p.value = !1, v = [...e(i)], l.onClickConfirm(e(i));
    }
    function N() {
      i.value = [...h];
    }
    return k(
      () => p.value,
      (s) => {
        s && (i.value = [...v]);
      }
    ), w({
      getCachedList: () => h
    }), (s, u) => (D(), L(e(P), {
      open: p.value,
      "onUpdate:open": u[1] || (u[1] = (d) => p.value = d),
      "overlay-class-name": `${e(a)()} ${e(f)("popover")} ${e(B)}`,
      trigger: "click",
      placement: "bottom",
      mask: "",
      "mask-style": { backgroundColor: "transparent" },
      "get-popup-container": T
    }, {
      content: r(() => [
        n("div", {
          class: o(e(a)("header"))
        }, [
          n("span", {
            class: o(e(a)("header-title"))
          }, m(e(c)("ap.apForm.search.sorterTitle")), 3),
          t(e(_), {
            justify: "space-between",
            align: "center"
          }, {
            default: r(() => [
              n("span", {
                class: o(e(a)("header-desc"))
              }, m(e(c)("ap.apForm.search.sorterDesc")), 3),
              n("div", {
                class: o(e(a)("header-action-wrapper")),
                onClick: N
              }, [
                n("span", {
                  class: o(e(a)("header-reset-btn"))
                }, m(e(c)("ap.apForm.search.sorterReset")), 3)
              ], 2)
            ]),
            _: 1
          })
        ], 2),
        n("div", {
          class: o([e(f)("popover-content"), e(a)("content")])
        }, [
          t(e(A), {
            list: i.value,
            class: o(e(a)("sorter-wrapper")),
            "item-key": "name"
          }, {
            item: r(({ element: d }) => [
              t(E, { item: d }, null, 8, ["item"])
            ]),
            _: 1
          }, 8, ["list", "class"])
        ], 2),
        t(e(j), { style: { margin: "0" } }),
        n("div", {
          class: o(e(f)("popover-footer"))
        }, [
          t(e(_), {
            justify: "end",
            gap: 8
          }, {
            default: r(() => [
              t(e(g), {
                onClick: u[0] || (u[0] = (d) => p.value = !1)
              }, {
                default: r(() => [
                  b(m(e(c)("ap.common.cancelText")), 1)
                ]),
                _: 1
              }),
              t(e(g), {
                class: o(e(f)("popover-footer-confirm-btn")),
                type: "primary",
                onClick: $
              }, {
                default: r(() => [
                  b(m(e(c)("ap.apForm.search.sorterConfirmBtn")), 1)
                ]),
                _: 1
              }, 8, ["class"])
            ]),
            _: 1
          })
        ], 2)
      ]),
      default: r(() => [
        t(e(V), {
          title: e(c)("ap.apForm.search.sorterTitle"),
          placement: "top"
        }, {
          default: r(() => [
            t(e(g), {
              class: o([e(y)("trigger-btn"), { [e(y)("trigger-btn-active")]: p.value }])
            }, {
              icon: r(() => [
                t(e(z), { size: 14 })
              ]),
              _: 1
            }, 8, ["class"])
          ]),
          _: 1
        }, 8, ["title"])
      ]),
      _: 1
    }, 8, ["open", "overlay-class-name"]));
  }
});
export {
  X as default
};
