"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
require("../../ui/index.js");
const vn = require("../../ui/src/vn.js");
const XEUtils = require("xe-utils");
const config = require("../../../../@vxe-ui/core/es/src/config.js");
const useFns = require("../../../../@vxe-ui/core/es/src/useFns.js");
const permission = require("../../../../@vxe-ui/core/es/src/permission.js");
const event = require("../../../../@vxe-ui/core/es/src/event.js");
const index_esm = require("../../../../@vxe-ui/core/es/index.esm.js");
const icon = require("../../../../@vxe-ui/core/es/src/icon.js");
const VxeCollapseComponent = comp.defineVxeComponent({
  name: "VxeCollapse",
  props: {
    modelValue: Array,
    options: Array,
    padding: {
      type: Boolean,
      default: () => config.getConfig().collapse.padding
    },
    expandConfig: Object,
    size: {
      type: String,
      default: () => config.getConfig().collapse.size || config.getConfig().size
    }
  },
  emits: [
    "update:modelValue",
    "load",
    "change",
    "toggle-expand"
  ],
  setup(props, context) {
    const { emit, slots } = context;
    const xID = XEUtils.uniqueId();
    const { computeSize } = useFns.useSize(props);
    const refElem = vue.ref();
    const reactData = vue.reactive({
      staticPanes: [],
      activeNames: [],
      initNames: [],
      cachePaneMaps: {}
    });
    const refMaps = {
      refElem
    };
    const computeItemOptions = vue.computed(() => {
      const { options } = props;
      return (options || []).filter((item) => handleFilterItem(item));
    });
    const computeItemStaticOptions = vue.computed(() => {
      const { staticPanes } = reactData;
      return staticPanes.filter((item) => handleFilterItem(item));
    });
    const computeExpandOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().collapse.expandConfig, props.expandConfig);
    });
    const computeMaps = {};
    const $xeCollapse = {
      xID,
      props,
      context,
      reactData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const handleFilterItem = (item) => {
      const { permissionCode } = item;
      if (permissionCode) {
        if (!permission.permission.checkVisible(permissionCode)) {
          return false;
        }
      }
      return true;
    };
    const addInitName = (name) => {
      const { initNames } = reactData;
      if (name && !initNames.includes(name)) {
        initNames.push(name);
        dispatchEvent("load", { name }, null);
        return true;
      }
      return false;
    };
    const initDefaultName = (list) => {
      const { activeNames } = reactData;
      const nameMaps = {};
      if (list && list.length) {
        list.forEach((item) => {
          const { name, preload } = item || {};
          if (name) {
            const isActive = activeNames.includes(name);
            nameMaps[`${name}`] = {
              loading: false
            };
            if (isActive) {
              addInitName(name);
            }
            if (preload) {
              if (!isActive) {
                activeNames.push(name);
              }
            }
          }
        });
      }
      reactData.activeNames = activeNames ? activeNames.slice(0) : [];
      reactData.cachePaneMaps = nameMaps;
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, event.createEvent(evnt, { $collapse: $xeCollapse }, params));
    };
    const collapseMethods = {
      dispatchEvent
    };
    const callSlot = (slotFunc, params) => {
      if (slotFunc) {
        if (XEUtils.isString(slotFunc)) {
          slotFunc = slots[slotFunc] || null;
        }
        if (XEUtils.isFunction(slotFunc)) {
          return vn.getSlotVNs(slotFunc(params));
        }
      }
      return [];
    };
    const handleClickEvent = (evnt, item) => {
      const { activeNames } = reactData;
      const { name } = item;
      if (name) {
        const aIndex = activeNames.indexOf(name);
        let expanded = false;
        if (aIndex === -1) {
          expanded = true;
          activeNames.push(name);
        } else {
          activeNames.splice(aIndex, 1);
        }
        addInitName(name);
        dispatchEvent("change", { value: activeNames, name }, evnt);
        dispatchEvent("toggle-expand", { value: activeNames, name, expanded }, evnt);
      }
    };
    const collapsePrivateMethods = {};
    Object.assign($xeCollapse, collapseMethods, collapsePrivateMethods);
    const renderList = (itemList) => {
      const { activeNames, initNames } = reactData;
      const expandOpts = computeExpandOpts.value;
      return itemList.map((item) => {
        const { icon: icon$1, name, title, slots: slots2 } = item;
        const titleSlot = slots2 ? slots2.title : null;
        const defaultSlot = slots2 ? slots2.default : null;
        const isActive = name && activeNames.includes(name);
        return vue.h("div", {
          class: "vxe-collapse-item"
        }, [
          vue.h("div", {
            class: "vxe-collapse--item-header",
            onClick(evnt) {
              handleClickEvent(evnt, item);
            }
          }, [
            expandOpts.showIcon ? vue.h("span", {
              class: "vxe-collapse--item-switch"
            }, [
              vue.h("i", {
                class: isActive ? icon.getIcon().COLLAPSE_OPEN : icon.getIcon().COLLAPSE_CLOSE
              })
            ]) : index_esm.renderEmptyElement(),
            icon$1 ? vue.h("span", {
              class: "vxe-collapse--item-icon"
            }, [
              vue.h("i", {
                class: icon$1
              })
            ]) : index_esm.renderEmptyElement(),
            vue.h("span", {
              class: "vxe-collapse--item-name"
            }, titleSlot ? callSlot(titleSlot, { name, title }) : `${title}`)
          ]),
          vue.h("div", {
            class: ["vxe-collapse--item-content", {
              "is--visible": isActive
            }]
          }, [
            name && initNames.includes(name) ? vue.h("div", {
              class: "vxe-collapse--item-inner"
            }, [
              defaultSlot ? callSlot(defaultSlot, { name, title }) : ""
            ]) : index_esm.renderEmptyElement()
          ])
        ]);
      });
    };
    const renderVN = () => {
      const { padding } = props;
      const vSize = computeSize.value;
      const itemOptions = computeItemOptions.value;
      const itemStaticOptions = computeItemStaticOptions.value;
      const defaultSlot = slots.default;
      const itemList = defaultSlot ? itemStaticOptions : itemOptions;
      return vue.h("div", {
        ref: refElem,
        class: ["vxe-collapse", {
          [`size--${vSize}`]: vSize,
          "is--padding": padding
        }]
      }, [
        vue.h("div", {
          class: "vxe-collapse-slots"
        }, defaultSlot ? defaultSlot({}) : []),
        renderList(itemList)
      ]);
    };
    vue.watch(() => props.modelValue, (val) => {
      reactData.activeNames = val || [];
    });
    const optsFlag = vue.ref(0);
    vue.watch(() => props.options ? props.options.length : -1, () => {
      optsFlag.value++;
    });
    vue.watch(() => props.options, () => {
      optsFlag.value++;
    });
    vue.watch(optsFlag, () => {
      initDefaultName(props.options);
    });
    const stFlag = vue.ref(0);
    vue.watch(() => reactData.staticPanes ? reactData.staticPanes.length : -1, () => {
      stFlag.value++;
    });
    vue.watch(() => reactData.staticPanes, () => {
      stFlag.value++;
    });
    vue.watch(stFlag, () => {
      initDefaultName(reactData.staticPanes);
    });
    reactData.activeNames = props.modelValue || [];
    initDefaultName(reactData.staticPanes.length ? reactData.staticPanes : props.options);
    vue.provide("$xeCollapse", $xeCollapse);
    $xeCollapse.renderVN = renderVN;
    return $xeCollapse;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxeCollapseComponent;
