'use strict';

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

var vue = require('vue');
require('../../../utils/index.js');
var columnManager = require('./column-manager.js');
var draggable = require('vuedraggable');
var createNamespace = require('../../../utils/create-namespace.js');
var addUnit = require('../../../utils/add-unit.js');

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

exports.default = _sfc_main;
//# sourceMappingURL=column-manager.vue2.js.map
