'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
var customSorter = require('./custom-sorter.js');
var draggable = require('vuedraggable');
var createNamespace = require('../../../utils/create-namespace.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlCustomSorter" },
  __name: "custom-sorter",
  props: customSorter.customSorterProps,
  emits: ["update:open", "field-select"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace.createNamespace("custom-sorter");
    const attrs = vue.useAttrs();
    const sortList = vue.ref([]);
    const localList = vue.computed(() => [...props.fieldList]);
    const steps = vue.computed(() => [
      {
        title: props.ascText || "\u5347\u5E8F",
        key: "asc",
        value: "asc"
      },
      {
        title: props.descText || "\u964D\u5E8F",
        key: "desc",
        value: "desc"
      }
    ]);
    const newOpen = vue.computed({
      get() {
        return props.open;
      },
      set(o) {
        emits("update:open", o);
      }
    });
    const disabledAdd = vue.computed(() => {
      return localList.value.length === sortList.value.length || props.maxSearchCount > 0 && props.maxSearchCount <= sortList.value.length;
    });
    const handleAdd = () => {
      sortList.value.push({ key: null, orderBy: "asc" });
    };
    const handleRemove = (idx) => {
      sortList.value.splice(idx, 1);
    };
    const handleField = (value, option) => {
      emits("field-select", value, option);
    };
    const getValue = () => {
      return sortList.value;
    };
    const clearValue = (range, fields) => {
      if (range === "field") {
        if (fields && fields?.length > 0) {
          for (let i = sortList.value.length - 1; i >= 0; i--) {
            if (fields.includes(sortList.value[i].key)) {
              sortList.value.splice(i, 1);
            }
          }
        }
      } else {
        sortList.value.length = 0;
      }
    };
    vue.watch(
      () => props.fieldList,
      () => {
        clearValue("all");
      },
      { deep: true }
    );
    __expose({ getValue, clearValue });
    return (_ctx, _cache) => {
      const _component_ll_icon_base_pro = vue.resolveComponent("ll-icon-base-pro");
      const _component_a_badge = vue.resolveComponent("a-badge");
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_ll_select = vue.resolveComponent("ll-select");
      const _component_ll_segmented = vue.resolveComponent("ll-segmented");
      const _component_ll_empty = vue.resolveComponent("ll-empty");
      const _component_ll_button = vue.resolveComponent("ll-button");
      const _component_a_form_item_rest = vue.resolveComponent("a-form-item-rest");
      const _component_a_popover = vue.resolveComponent("a-popover");
      return vue.openBlock(), vue.createBlock(_component_a_popover, vue.mergeProps(vue.unref(attrs), {
        open: newOpen.value,
        "onUpdate:open": _cache[1] || (_cache[1] = ($event) => newOpen.value = $event),
        arrow: false,
        trigger: "click",
        placement: _ctx.placement,
        "overlay-class-name": `${vue.unref(bem).b()}`
      }), {
        title: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
          vue.createTextVNode(
            "\u8BBE\u7F6E\u6392\u5E8F\u6761\u4EF6",
            -1
            /* CACHED */
          )
        ])]),
        content: vue.withCtx(() => [
          vue.createVNode(_component_a_form_item_rest, null, {
            default: vue.withCtx(() => [
              vue.createVNode(vue.unref(draggable), {
                modelValue: sortList.value,
                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sortList.value = $event),
                animation: 200,
                class: vue.normalizeClass(vue.unref(bem).e("content")),
                style: { "min-width": "350px" },
                "item-key": "key",
                handle: ".handle"
              }, {
                item: vue.withCtx(({ element, index }) => [
                  vue.createElementVNode(
                    "div",
                    {
                      class: vue.normalizeClass(vue.unref(bem).e("list-item"))
                    },
                    [
                      vue.createCommentVNode(" \u62D6\u62FD\u56FE\u6807 "),
                      vue.createElementVNode(
                        "div",
                        {
                          class: vue.normalizeClass(["handle", vue.unref(bem).e("drag-icon")])
                        },
                        [
                          vue.createVNode(_component_ll_icon, { "icon-name": "icon-drag" })
                        ],
                        2
                        /* CLASS */
                      ),
                      vue.createCommentVNode(" \u5B57\u6BB5\u540D "),
                      vue.createVNode(_component_ll_select, {
                        value: element.key,
                        "onUpdate:value": ($event) => element.key = $event,
                        style: { "width": "180px" },
                        placeholder: "\u8BF7\u9009\u62E9\u5B57\u6BB5",
                        size: "small",
                        "field-names": {
                          label: "title",
                          value: "key",
                          options: "options"
                        },
                        options: localList.value.map((i) => ({
                          ...i,
                          disabled: sortList.value.some((y) => y.key === i.key)
                        })),
                        onSelect: handleField
                      }, null, 8, ["value", "onUpdate:value", "options"]),
                      vue.createCommentVNode(" \u6392\u5E8F "),
                      vue.createVNode(_component_ll_segmented, {
                        value: element.orderBy,
                        "onUpdate:value": ($event) => element.orderBy = $event,
                        class: vue.normalizeClass(vue.unref(bem).e("segmented")),
                        size: "small",
                        options: steps.value
                      }, null, 8, ["value", "onUpdate:value", "class", "options"]),
                      vue.createCommentVNode(" \u79FB\u9664\u56FE\u6807 "),
                      vue.createVNode(_component_ll_icon, {
                        "icon-name": "icon-remove",
                        class: vue.normalizeClass(vue.unref(bem).e("remove-icon")),
                        size: 14,
                        onClick: ($event) => handleRemove(index)
                      }, null, 8, ["class", "onClick"])
                    ],
                    2
                    /* CLASS */
                  )
                ]),
                _: 1
                /* STABLE */
              }, 8, ["modelValue", "class"]),
              sortList.value.length === 0 ? (vue.openBlock(), vue.createBlock(_component_ll_empty, {
                key: 0,
                style: { margin: "12px 0" },
                "image-width": "120px"
              })) : vue.createCommentVNode("v-if", true),
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(vue.unref(bem).e("operate"))
                },
                [
                  vue.createVNode(_component_ll_button, {
                    class: vue.normalizeClass(vue.unref(bem).e("operate-btn")),
                    disabled: disabledAdd.value,
                    type: "text",
                    size: "small",
                    "icon-space": 8,
                    onClick: handleAdd
                  }, {
                    default: vue.withCtx(() => [
                      vue.createVNode(_component_ll_icon, { "icon-name": "icon-list-add" }),
                      vue.createTextVNode(
                        " " + vue.toDisplayString(_ctx.addSortText || "\u6DFB\u52A0\u6392\u5E8F\u6761\u4EF6 "),
                        1
                        /* TEXT */
                      )
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["class", "disabled"]),
                  vue.createCommentVNode(" \u64CD\u4F5C\u533A\u63D2\u69FD "),
                  vue.createElementVNode(
                    "div",
                    {
                      class: vue.normalizeClass(vue.unref(bem).e("operate-slot"))
                    },
                    [
                      vue.renderSlot(_ctx.$slots, "operate")
                    ],
                    2
                    /* CLASS */
                  )
                ],
                2
                /* CLASS */
              )
            ]),
            _: 3
            /* FORWARDED */
          })
        ]),
        default: vue.withCtx(() => [
          vue.createVNode(_component_a_badge, {
            dot: _ctx.useBadge && _ctx.activeState,
            offset: [-2, 2]
          }, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_ll_icon_base_pro, {
                class: vue.normalizeClass(`${vue.unref(bem).e("icon")} ${vue.unref(bem).is(
                  newOpen.value || _ctx.activeState ? "active" : ""
                )}`),
                "show-tip": false,
                "icon-name": _ctx.sortIcon || "icon-sort",
                "bg-color": "var(--color-fill-tertiary)",
                "hover-bg-color": "var(--color-fill-secondary)",
                size: _ctx.size,
                label: _ctx.label,
                "icon-size": 16
              }, null, 8, ["class", "icon-name", "size", "label"])
            ]),
            _: 1
            /* STABLE */
          }, 8, ["dot"])
        ]),
        _: 3
        /* FORWARDED */
      }, 16, ["open", "placement", "overlay-class-name"]);
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=custom-sorter.vue2.js.map
