import { defineComponent, useAttrs, computed, ref, watch, onMounted, resolveComponent, createBlock, openBlock, mergeProps, unref, withCtx, createVNode, normalizeClass, createElementVNode, normalizeStyle, createCommentVNode, createElementBlock, toDisplayString, Fragment, createTextVNode, renderList } from 'vue';
import '../../../utils/index.mjs';
import { columnManagerProps } from './column-manager.mjs';
import draggable from 'vuedraggable';
import { createNamespace } from '../../../utils/create-namespace.mjs';
import { addUnit } from '../../../utils/add-unit.mjs';

"use strict";
const _hoisted_1 = ["onClick"];
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlColumnManager" },
  __name: "column-manager",
  props: columnManagerProps,
  emits: [
    "update:open",
    "change",
    "init",
    "start",
    "update",
    "end"
  ],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace("column-manager");
    const subBem = createNamespace("column-manager-sub");
    const attrs = useAttrs();
    const localList = computed(() => [...props.fieldList]);
    const columnList = ref([]);
    const searchVal = ref("");
    const newOpen = computed({
      get() {
        return props.open;
      },
      set(open) {
        emits("update:open", open);
      }
    });
    const filterField = computed(() => {
      return localList.value.filter(
        (field) => !field.isHidden && // 查询匹配title 和 key
        (field.title.includes(searchVal.value.toLowerCase()) || field.key.includes(searchVal.value.toLowerCase()))
      );
    });
    const startDrag = (e) => {
      emits("start", e, columnList.value);
    };
    const updateDrag = (e) => {
      emits("update", e, columnList.value);
    };
    const endDrag = (e) => {
      emits("end", e, columnList.value);
    };
    const handleClick = (item) => {
      if (columnList.value.some((i) => i.key === item.key)) return;
      if (!!props.maxCount && props.maxCount <= columnList.value.length) return;
      columnList.value.push(item);
      emits("change", columnList.value);
    };
    const handleRemove = (idx) => {
      columnList.value.splice(idx, 1);
      emits("change", columnList.value);
    };
    watch(
      () => columnList.value,
      (list) => {
        if (props.useLocalStorage && props.localKey) {
          localStorage.setItem(props.localKey, JSON.stringify(list));
          if (list.length === 0) {
            localStorage.removeItem(props.localKey);
          }
        }
      },
      {
        deep: true
      }
    );
    watch(
      () => props.useLocalStorage,
      (v) => {
        if (v && props.localKey && columnList.value.length > 0) {
          localStorage.setItem(props.localKey, JSON.stringify(columnList.value));
        } else if (!v && props.localKey) {
          localStorage.removeItem(props.localKey);
        }
      }
    );
    watch(
      () => props.fieldList,
      () => {
        columnList.value = localList.value.filter(
          (i) => !i.isHidden && (i.isFixed || i.initialDisplay)
        );
        emits("init", columnList.value);
      },
      { deep: true }
    );
    onMounted(() => {
      const alternative = localList.value.filter(
        (i) => !i.isHidden && (i.isFixed || i.initialDisplay)
      );
      if (props.useLocalStorage && props.localKey) {
        const data = localStorage.getItem(props.localKey);
        if (data) {
          try {
            const result = JSON.parse(data);
            columnList.value = Array.isArray(result) ? result : alternative;
          } catch {
            columnList.value = alternative;
          }
        } else {
          columnList.value = alternative;
        }
      } else {
        columnList.value = alternative;
      }
      emits("init", columnList.value);
    });
    return (_ctx, _cache) => {
      const _component_ll_icon_base_pro = resolveComponent("ll-icon-base-pro");
      const _component_ll_icon = resolveComponent("ll-icon");
      const _component_ll_empty = resolveComponent("ll-empty");
      const _component_ll_button = resolveComponent("ll-button");
      const _component_ll_input = resolveComponent("ll-input");
      const _component_a_popover = resolveComponent("a-popover");
      const _component_a_form_item_rest = resolveComponent("a-form-item-rest");
      return openBlock(), createBlock(_component_a_popover, mergeProps(unref(attrs), {
        open: newOpen.value,
        "onUpdate:open": _cache[2] || (_cache[2] = ($event) => newOpen.value = $event),
        arrow: false,
        trigger: "click",
        placement: _ctx.placement,
        "overlay-class-name": `${unref(bem).b()}`
      }), {
        content: withCtx(() => [
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(bem).e("content")),
              style: normalizeStyle({
                minWidth: _ctx.minWidth ? unref(addUnit)(_ctx.minWidth) : "180px"
              })
            },
            [
              createVNode(_component_a_form_item_rest, null, {
                default: withCtx(() => [
                  createVNode(unref(draggable), {
                    modelValue: columnList.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => columnList.value = $event),
                    animation: 200,
                    class: normalizeClass(unref(bem).e("list")),
                    style: normalizeStyle({
                      maxHeight: _ctx.maxHeight ? unref(addUnit)(_ctx.maxHeight) : "300px"
                    }),
                    "item-key": "key",
                    handle: ".handle",
                    onStart: startDrag,
                    onUpdate: updateDrag,
                    onEnd: endDrag
                  }, {
                    item: withCtx(({ element, index }) => [
                      createElementVNode(
                        "div",
                        {
                          class: normalizeClass(unref(bem).e("item"))
                        },
                        [
                          createElementVNode(
                            "div",
                            {
                              class: normalizeClass(unref(bem).e("left-info"))
                            },
                            [
                              createCommentVNode(" \u62D6\u62FD\u56FE\u6807 "),
                              createElementVNode(
                                "div",
                                {
                                  class: normalizeClass(["handle", unref(bem).e("drag-icon")])
                                },
                                [
                                  createVNode(_component_ll_icon, { "icon-name": "icon-drag" })
                                ],
                                2
                                /* CLASS */
                              ),
                              createElementVNode(
                                "div",
                                {
                                  class: normalizeClass(unref(bem).e("text"))
                                },
                                toDisplayString(element.title),
                                3
                                /* TEXT, CLASS */
                              )
                            ],
                            2
                            /* CLASS */
                          ),
                          createElementVNode(
                            "div",
                            {
                              class: normalizeClass(unref(bem).e("right-icon"))
                            },
                            [
                              createCommentVNode(" \u8131\u654F "),
                              !!element.isSensitive ? (openBlock(), createBlock(_component_ll_icon, {
                                key: 0,
                                "icon-name": "icon-pwd-look",
                                size: 16,
                                class: normalizeClass(unref(bem).e("isSensitive-icon"))
                              }, null, 8, ["class"])) : createCommentVNode("v-if", true),
                              createCommentVNode(" \u56FA\u5B9A "),
                              !!element.isFixed ? (openBlock(), createBlock(_component_ll_icon, {
                                key: 1,
                                "icon-name": "icon-lock1",
                                size: 16,
                                class: normalizeClass(unref(bem).e("isFixed-icon"))
                              }, null, 8, ["class"])) : _ctx.enableAddField ? (openBlock(), createElementBlock(
                                Fragment,
                                { key: 2 },
                                [
                                  createCommentVNode(" \u79FB\u9664\u56FE\u6807 "),
                                  createVNode(_component_ll_icon, {
                                    "icon-name": "icon-remove",
                                    class: normalizeClass(unref(bem).e("remove-icon")),
                                    size: 16,
                                    onClick: ($event) => handleRemove(index)
                                  }, null, 8, ["class", "onClick"])
                                ],
                                2112
                                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
                              )) : createCommentVNode("v-if", true)
                            ],
                            2
                            /* CLASS */
                          )
                        ],
                        2
                        /* CLASS */
                      )
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue", "class", "style"]),
                  columnList.value.length === 0 ? (openBlock(), createBlock(_component_ll_empty, {
                    key: 0,
                    style: { margin: "12px 0" },
                    "image-width": "80px"
                  })) : createCommentVNode("v-if", true),
                  _ctx.enableAddField ? (openBlock(), createElementBlock(
                    "div",
                    {
                      key: 1,
                      class: normalizeClass(unref(bem).e("operate"))
                    },
                    [
                      createVNode(_component_a_popover, {
                        trigger: "click",
                        placement: "right",
                        arrow: false,
                        "overlay-class-name": unref(subBem).b()
                      }, {
                        content: withCtx(() => [
                          createElementVNode(
                            "div",
                            {
                              class: normalizeClass(unref(subBem).e("content"))
                            },
                            [
                              createVNode(_component_ll_input, {
                                value: searchVal.value,
                                "onUpdate:value": _cache[1] || (_cache[1] = ($event) => searchVal.value = $event),
                                valueModifiers: { trim: true },
                                class: normalizeClass(unref(subBem).e("input")),
                                "is-gray": "",
                                size: "small",
                                placeholder: "\u641C\u7D22"
                              }, {
                                prefix: withCtx(() => [
                                  createVNode(_component_ll_icon, { "icon-name": "icon-search" })
                                ]),
                                _: 1
                                /* STABLE */
                              }, 8, ["value", "class"]),
                              createElementVNode(
                                "div",
                                {
                                  class: normalizeClass(unref(subBem).e("list"))
                                },
                                [
                                  (openBlock(true), createElementBlock(
                                    Fragment,
                                    null,
                                    renderList(filterField.value, (field) => {
                                      return openBlock(), createElementBlock("div", {
                                        key: field.key,
                                        class: normalizeClass([
                                          unref(subBem).e("item"),
                                          unref(bem).is(
                                            columnList.value.some((i) => i.key === field.key) ? "active" : ""
                                          ),
                                          unref(bem).is(
                                            _ctx.maxCount && columnList.value.length >= _ctx.maxCount && !columnList.value.some((i) => i.key === field.key) ? "disabled" : ""
                                          )
                                        ]),
                                        onClick: ($event) => handleClick(field)
                                      }, [
                                        createElementVNode(
                                          "span",
                                          {
                                            class: normalizeClass(unref(subBem).e("text"))
                                          },
                                          toDisplayString(field.title),
                                          3
                                          /* TEXT, CLASS */
                                        ),
                                        columnList.value.some((i) => i.key === field.key) ? (openBlock(), createBlock(_component_ll_icon, {
                                          key: 0,
                                          "icon-name": "icon-check",
                                          color: "inherit",
                                          size: 16
                                        })) : createCommentVNode("v-if", true)
                                      ], 10, _hoisted_1);
                                    }),
                                    128
                                    /* KEYED_FRAGMENT */
                                  ))
                                ],
                                2
                                /* CLASS */
                              ),
                              filterField.value.length === 0 ? (openBlock(), createBlock(_component_ll_empty, {
                                key: 0,
                                style: { margin: "0 0 12px 0" },
                                "image-width": "80px"
                              })) : createCommentVNode("v-if", true)
                            ],
                            2
                            /* CLASS */
                          )
                        ]),
                        default: withCtx(() => [
                          createVNode(_component_ll_button, {
                            class: normalizeClass(unref(bem).e("operate-btn")),
                            block: "",
                            "use-custom-style": "",
                            "icon-space": 8
                          }, {
                            default: withCtx(() => [
                              createVNode(_component_ll_icon, { "icon-name": "icon-add" }),
                              createTextVNode(
                                " " + toDisplayString(_ctx.addFieldText || "\u6DFB\u52A0\u5B57\u6BB5"),
                                1
                                /* TEXT */
                              )
                            ]),
                            _: 1
                            /* STABLE */
                          }, 8, ["class"])
                        ]),
                        _: 1
                        /* STABLE */
                      }, 8, ["overlay-class-name"])
                    ],
                    2
                    /* CLASS */
                  )) : createCommentVNode("v-if", true)
                ]),
                _: 1
                /* STABLE */
              })
            ],
            6
            /* CLASS, STYLE */
          )
        ]),
        default: withCtx(() => [
          createVNode(_component_ll_icon_base_pro, {
            class: normalizeClass(`${unref(bem).e("icon")} ${unref(bem).is(newOpen.value ? "active" : "")}`),
            "show-tip": false,
            "icon-name": _ctx.icon || "icon-set-line",
            "bg-color": "var(--color-fill-tertiary)",
            "hover-bg-color": "var(--color-fill-secondary)",
            size: "large",
            "icon-size": 16
          }, null, 8, ["class", "icon-name"])
        ]),
        _: 1
        /* STABLE */
      }, 16, ["open", "placement", "overlay-class-name"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=column-manager.vue2.mjs.map
