import { createElementVNode, defineComponent, useModel, ref, watch, computed, onMounted, resolveComponent, createBlock, openBlock, createSlots, withCtx, createVNode, unref, createTextVNode, toDisplayString, normalizeStyle, createElementBlock, createCommentVNode, TransitionGroup, Fragment, renderList, mergeModels } from 'vue';
import { useCloned } from '@vueuse/core';
import '../../../../../hooks/index.mjs';
import { GmMessage } from '../../../plugins/message/index.mjs';
import { cloneDeep } from 'lodash-es';
import { InfoFilled, Rank } from '@element-plus/icons-vue';
import { tableCustomHeaderProps } from './tableCustomHeader.mjs';
import { useCustomSettingsStore } from '../../../../../hooks/store/useCustomSettings/index.mjs';

const _hoisted_1 = { class: "gm-mb-4 gm-flex gm-items-center gm-rounded gm-border gm-border-cyan-300 gm-bg-cyan-50 gm-p-2 gm-text-sm gm-text-[#777]" };
const _hoisted_2 = { class: "gm-ml-2" };
const _hoisted_3 = { class: "gm-text-cyan-500" };
const _hoisted_4 = { class: "custom-content gm-text-sm" };
const _hoisted_5 = { class: "gm-flex gm-w-14 gm-justify-center" };
const _hoisted_6 = /* @__PURE__ */ createElementVNode(
  "li",
  { class: "gm-flex-1 gm-border-l gm-border-white" },
  "\u5217\u540D",
  -1
  /* HOISTED */
);
const _hoisted_7 = /* @__PURE__ */ createElementVNode(
  "li",
  { class: "gm-w-36 gm-border-l gm-border-white" },
  "\u5217\u5BBD",
  -1
  /* HOISTED */
);
const _hoisted_8 = /* @__PURE__ */ createElementVNode(
  "li",
  { class: "gm-w-24 gm-border-l gm-border-white" },
  "\u56FA\u5B9A",
  -1
  /* HOISTED */
);
const _hoisted_9 = {
  key: 0,
  class: "gm-w-28 gm-border-l gm-border-white"
};
const _hoisted_10 = {
  key: 0,
  class: "gm-flex gm-items-center gm-border gm-border-b-0 gm-border-gray-200"
};
const _hoisted_11 = { class: "gm-flex gm-w-14 gm-justify-center" };
const _hoisted_12 = /* @__PURE__ */ createElementVNode(
  "li",
  { class: "gm-flex-1 gm-border-l gm-border-gray-200" },
  "\u64CD\u4F5C",
  -1
  /* HOISTED */
);
const _hoisted_13 = { class: "gm-w-36 gm-border-l gm-border-gray-200 gm-px-2" };
const _hoisted_14 = /* @__PURE__ */ createElementVNode(
  "li",
  { class: "gm-flex gm-w-24 gm-items-center gm-justify-center gm-gap-4 gm-border-l gm-border-gray-200" },
  null,
  -1
  /* HOISTED */
);
const _hoisted_15 = {
  key: 0,
  class: "gm-w-28 gm-cursor-grabbing gm-border-l gm-border-gray-200"
};
const _hoisted_16 = ["draggable", "onDragstart", "onDragenter"];
const _hoisted_17 = { class: "gm-flex gm-w-14 gm-justify-center" };
const _hoisted_18 = { class: "gm-flex-1 gm-border-l gm-border-gray-200" };
const _hoisted_19 = { class: "gm-w-36 gm-border-l gm-border-gray-200 gm-px-2" };
const _hoisted_20 = { class: "gm-flex gm-w-24 gm-items-center gm-justify-center gm-gap-4 gm-border-l gm-border-gray-200" };
const _hoisted_21 = ["onClick"];
const _hoisted_22 = {
  t: "1748946230868",
  class: "icon",
  viewBox: "0 0 1024 1024",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg",
  "p-id": "15386",
  width: "18",
  height: "18"
};
const _hoisted_23 = ["fill"];
const _hoisted_24 = ["onClick"];
const _hoisted_25 = {
  t: "1748946230868",
  class: "icon",
  viewBox: "0 0 1024 1024",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg",
  "p-id": "15386",
  width: "18",
  height: "18"
};
const _hoisted_26 = ["fill"];
const _hoisted_27 = {
  key: 0,
  class: "gm-w-28 gm-cursor-grabbing gm-border-l gm-border-gray-200"
};
const _hoisted_28 = { class: "gm-flex gm-justify-between" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmTableCustomHeader"
  },
  __name: "TableCustomHeader",
  props: /* @__PURE__ */ mergeModels(tableCustomHeaderProps, {
    "isShowDrawer": { type: Boolean, ...{
      required: true
    } },
    "isShowDrawerModifiers": {},
    "colPropsList": {
      required: true
    },
    "colPropsListModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["updateColumns"], ["update:isShowDrawer", "update:colPropsList"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const isShowDrawer = useModel(__props, "isShowDrawer");
    const colPropsList = useModel(__props, "colPropsList");
    const customSettingsStore = useCustomSettingsStore();
    const isInited = ref(false);
    const { cloned: clonedColPropsList, sync: syncPropsList } = useCloned(colPropsList);
    watch(isShowDrawer, (newValue) => {
      if (newValue) {
        const cloned = cloneDeep(colPropsList.value);
        const editIndex = cloned.findIndex((it) => it.type === "edit");
        const editItem = cloned[editIndex];
        if (editIndex > -1) {
          cloned.splice(editIndex, 1);
        }
        clonedColPropsList.value = [...cloned, editItem];
      }
    });
    const customSettingsValue = computed(() => customSettingsStore.customSettings[props.keyWord]?.[props.type] || []);
    const { cloned: clonedStore } = useCloned(customSettingsValue);
    const titleStyle = computed(() => {
      const h = props.colDefaultPropsList.length * 44;
      const H = document.documentElement.clientHeight || document.body.clientHeight;
      return h > H - 240 ? { paddingRight: "4px" } : { paddingRight: 0 };
    });
    const updateColumns = () => {
      colPropsList.value = clonedColPropsList.value;
    };
    const initColumns = async () => {
      try {
        await customSettingsStore.getCustomSettings({ key_word: props.keyWord, type: props.type }, { defaultValue: [] });
      } catch {
      }
      const colnedDefaultColumns = cloneDeep(props.colDefaultPropsList);
      let columns = colnedDefaultColumns;
      if (clonedStore.value.length) {
        columns = [];
        clonedStore.value.forEach((it) => {
          const index = colnedDefaultColumns.findIndex((v) => v.prop === it.prop);
          if (index > -1) {
            const item = colnedDefaultColumns.splice(index, 1)[0];
            columns.push({
              ...it,
              ...item,
              isShow: it.isShow,
              width: it.width,
              fixed: it.fixed
            });
          }
        });
        clonedColPropsList.value = [...columns, ...colnedDefaultColumns];
      }
      updateColumns();
      isInited.value = true;
    };
    const checkedNumber = computed(() => {
      return clonedColPropsList.value.filter((v) => v.isShow).length;
    });
    const checkedAll = computed({
      get() {
        return clonedColPropsList.value.filter((it) => it.type !== "edit").every((v) => v.isShow);
      },
      set(value) {
        clonedColPropsList.value.forEach((v) => {
          if (v.type !== "edit") {
            v.isShow = Boolean(value);
          }
        });
      }
    });
    const isIndeterminate = computed(() => !checkedAll.value && clonedColPropsList.value.filter((it) => it.type !== "edit").some((v) => v.isShow));
    const start = ref();
    const end = ref();
    const dragstart = (item) => {
      if (!props.dragHeader) return;
      document.body.style.userSelect = "none";
      start.value = item;
    };
    const dragenter = (item, e) => {
      if (!props.dragHeader) return;
      end.value = item;
      e.preventDefault();
    };
    const dragend = () => {
      if (!props.dragHeader) return;
      document.body.style.userSelect = "text";
      if (start.value === end.value) return;
      if (start.value && end.value) {
        const oldIndex = clonedColPropsList.value.findIndex((v) => v.prop === start.value?.prop);
        const newIndex = clonedColPropsList.value.findIndex((v) => v.prop === end.value?.prop);
        const newItems = [...clonedColPropsList.value];
        newItems.splice(oldIndex, 1);
        newItems.splice(newIndex, 0, start.value);
        clonedColPropsList.value = [...newItems];
      }
    };
    const dragover = (e) => {
      if (!props.dragHeader) return;
      e.preventDefault();
    };
    const submitLoading = ref(false);
    const submitSettings = async (options) => {
      try {
        submitLoading.value = true;
        const { data } = await customSettingsStore.addCustomSettings({
          key_word: props.keyWord,
          value: JSON.stringify(clonedColPropsList.value),
          type: props.type
        });
        submitLoading.value = false;
        if (data.code !== 200) {
          return;
        }
        updateColumns();
        if (!options?.hiddenMessage) {
          GmMessage.success("\u4FDD\u5B58\u6210\u529F");
        }
        emit("updateColumns");
      } catch (e) {
        console.error(e);
        submitLoading.value = false;
      }
    };
    const onSyncRemote = async () => {
      try {
        submitLoading.value = true;
        await customSettingsStore.syncRemoteSetting({
          key_word: props.keyWord,
          type: props.type
        });
        submitLoading.value = false;
        initColumns();
        GmMessage.success("\u540C\u6B65\u6210\u529F");
      } catch (e) {
        console.error(e);
        submitLoading.value = false;
      }
    };
    const onReset = () => {
      clonedColPropsList.value = cloneDeep(props.colDefaultPropsList);
    };
    const handleToogleFixed = (row, fixed) => {
      if (row.fixed === fixed) {
        row.fixed = false;
        return;
      }
      row.fixed = fixed;
    };
    onMounted(() => {
      if (props.disabledRemoteCol) {
        isInited.value = true;
      } else {
        initColumns();
      }
    });
    __expose({
      isInited,
      submitSettings,
      syncPropsList
    });
    return (_ctx, _cache) => {
      const _component_gm_icon = resolveComponent("gm-icon");
      const _component_gm_checkbox = resolveComponent("gm-checkbox");
      const _component_gm_input = resolveComponent("gm-input");
      const _component_gm_tooltip = resolveComponent("gm-tooltip");
      const _component_el_icon = resolveComponent("el-icon");
      const _component_gm_button = resolveComponent("gm-button");
      const _component_gm_drawer = resolveComponent("gm-drawer");
      return openBlock(), createBlock(_component_gm_drawer, {
        modelValue: isShowDrawer.value,
        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isShowDrawer.value = $event),
        title: "\u81EA\u5B9A\u4E49\u8868\u5934",
        direction: "rtl",
        size: "600px",
        "append-to-body": "",
        "destroy-on-close": "",
        class: "table-custom-header-drawer"
      }, createSlots({
        default: withCtx(() => [
          createElementVNode("div", _hoisted_1, [
            createVNode(_component_gm_icon, null, {
              default: withCtx(() => [
                createVNode(unref(InfoFilled))
              ]),
              _: 1
              /* STABLE */
            }),
            createElementVNode("p", _hoisted_2, [
              createTextVNode(" \u5DF2\u9009\u4E2D "),
              createElementVNode(
                "span",
                _hoisted_3,
                toDisplayString(checkedNumber.value),
                1
                /* TEXT */
              ),
              createTextVNode(" \u9879 ")
            ])
          ]),
          createElementVNode("div", _hoisted_4, [
            createElementVNode(
              "ul",
              {
                class: "gm-flex gm-items-center gm-border gm-border-y-0 gm-border-gray-200 gm-bg-gray-200 gm-font-semibold gm-text-[#333]",
                style: normalizeStyle(titleStyle.value)
              },
              [
                createElementVNode("li", _hoisted_5, [
                  createVNode(_component_gm_checkbox, {
                    modelValue: checkedAll.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checkedAll.value = $event),
                    indeterminate: isIndeterminate.value
                  }, null, 8, ["modelValue", "indeterminate"])
                ]),
                _hoisted_6,
                _hoisted_7,
                _hoisted_8,
                _ctx.dragHeader ? (openBlock(), createElementBlock("li", _hoisted_9, "\u62D6\u5730\u8C03\u6574\u987A\u5E8F")) : createCommentVNode("v-if", true)
              ],
              4
              /* STYLE */
            ),
            createVNode(TransitionGroup, {
              class: "custom-group gm-border-b gm-border-gray-200 gm-text-gray-600",
              name: "sort",
              tag: "div"
            }, {
              default: withCtx(() => [
                (openBlock(true), createElementBlock(
                  Fragment,
                  null,
                  renderList(unref(clonedColPropsList), (item) => {
                    return openBlock(), createElementBlock(
                      Fragment,
                      {
                        key: item.prop
                      },
                      [
                        item.type === "edit" ? (openBlock(), createElementBlock("ul", _hoisted_10, [
                          createElementVNode("li", _hoisted_11, [
                            createVNode(_component_gm_checkbox, {
                              modelValue: item.isShow,
                              "onUpdate:modelValue": ($event) => item.isShow = $event,
                              disabled: ""
                            }, null, 8, ["modelValue", "onUpdate:modelValue"])
                          ]),
                          _hoisted_12,
                          createElementVNode("li", _hoisted_13, [
                            createVNode(_component_gm_input, {
                              modelValue: item.width,
                              "onUpdate:modelValue": ($event) => item.width = $event,
                              class: "gm-w-full",
                              placeholder: "\u8BBE\u7F6E\u5BBD\u5EA6",
                              clearable: ""
                            }, null, 8, ["modelValue", "onUpdate:modelValue"])
                          ]),
                          _hoisted_14,
                          _ctx.dragHeader ? (openBlock(), createElementBlock("li", _hoisted_15)) : createCommentVNode("v-if", true)
                        ])) : (openBlock(), createElementBlock("ul", {
                          key: 1,
                          class: "gm-flex gm-items-center gm-border gm-border-b-0 gm-border-gray-200",
                          draggable: _ctx.dragHeader,
                          onDragstart: ($event) => dragstart(item),
                          onDragenter: ($event) => dragenter(item, $event),
                          onDragend: dragend,
                          onDragover: _cache[1] || (_cache[1] = ($event) => dragover($event))
                        }, [
                          createElementVNode("li", _hoisted_17, [
                            createVNode(_component_gm_checkbox, {
                              modelValue: item.isShow,
                              "onUpdate:modelValue": ($event) => item.isShow = $event
                            }, null, 8, ["modelValue", "onUpdate:modelValue"])
                          ]),
                          createElementVNode(
                            "li",
                            _hoisted_18,
                            toDisplayString(item.label),
                            1
                            /* TEXT */
                          ),
                          createElementVNode("li", _hoisted_19, [
                            createVNode(_component_gm_input, {
                              modelValue: item.width,
                              "onUpdate:modelValue": ($event) => item.width = $event,
                              class: "gm-w-full",
                              placeholder: "\u8BBE\u7F6E\u5BBD\u5EA6",
                              clearable: ""
                            }, null, 8, ["modelValue", "onUpdate:modelValue"])
                          ]),
                          createElementVNode("li", _hoisted_20, [
                            createVNode(
                              _component_gm_tooltip,
                              {
                                effect: "dark",
                                content: "\u56FA\u5B9A\u5728\u5DE6\u4FA7",
                                placement: "top"
                              },
                              {
                                default: withCtx(() => [
                                  createElementVNode("div", {
                                    class: "gm-cursor-pointer",
                                    onClick: ($event) => handleToogleFixed(item, "left")
                                  }, [
                                    (openBlock(), createElementBlock("svg", _hoisted_22, [
                                      createElementVNode("path", {
                                        d: "M958.9 895.8L732 668.9l-63 63 227 226.9 64 1.3zM792.3 379l-102.5-12.7-311-284.7c-25.2-24-65.7-23.4-90.1 1l-206 205.9c-24.6 24.6-25 65.1-1.1 90.2l284.8 311.1 12.7 102.5c0 74.7 55.1 104.7 108 51.7L844 487.1c53-53 23.1-108.1-51.7-108.1zM439.7 610.1c-4.2 4.2-9.7 6.4-15.6 6.4s-11.4-2.3-15.7-6.5l-254-254.3c-8.4-8.4-8.6-22.5-0.2-31l43.7-45c4.2-4.4 9.7-6.7 15.9-6.7 5.7 0 11.2 2.3 15.3 6.3 4.3 4 6.5 9.6 6.8 15.4 0.1 5.9-2.1 11.5-6.3 15.8l-28.5 29.3 238.6 239c8.6 8.6 8.5 22.6 0 31.3z",
                                        "p-id": "15387",
                                        fill: item.fixed === "left" ? "#217efd" : "#bbbbbb"
                                      }, null, 8, _hoisted_23)
                                    ]))
                                  ], 8, _hoisted_21)
                                ]),
                                _: 2
                                /* DYNAMIC */
                              },
                              1024
                              /* DYNAMIC_SLOTS */
                            ),
                            createVNode(
                              _component_gm_tooltip,
                              {
                                effect: "dark",
                                content: "\u56FA\u5B9A\u5728\u53F3\u4FA7",
                                placement: "top"
                              },
                              {
                                default: withCtx(() => [
                                  createElementVNode("div", {
                                    class: "gm-rotate-90 gm-cursor-pointer",
                                    onClick: ($event) => handleToogleFixed(item, "right")
                                  }, [
                                    (openBlock(), createElementBlock("svg", _hoisted_25, [
                                      createElementVNode("path", {
                                        d: "M958.9 895.8L732 668.9l-63 63 227 226.9 64 1.3zM792.3 379l-102.5-12.7-311-284.7c-25.2-24-65.7-23.4-90.1 1l-206 205.9c-24.6 24.6-25 65.1-1.1 90.2l284.8 311.1 12.7 102.5c0 74.7 55.1 104.7 108 51.7L844 487.1c53-53 23.1-108.1-51.7-108.1zM439.7 610.1c-4.2 4.2-9.7 6.4-15.6 6.4s-11.4-2.3-15.7-6.5l-254-254.3c-8.4-8.4-8.6-22.5-0.2-31l43.7-45c4.2-4.4 9.7-6.7 15.9-6.7 5.7 0 11.2 2.3 15.3 6.3 4.3 4 6.5 9.6 6.8 15.4 0.1 5.9-2.1 11.5-6.3 15.8l-28.5 29.3 238.6 239c8.6 8.6 8.5 22.6 0 31.3z",
                                        "p-id": "15387",
                                        fill: item.fixed === "right" ? "#217efd" : "#bbbbbb"
                                      }, null, 8, _hoisted_26)
                                    ]))
                                  ], 8, _hoisted_24)
                                ]),
                                _: 2
                                /* DYNAMIC */
                              },
                              1024
                              /* DYNAMIC_SLOTS */
                            )
                          ]),
                          _ctx.dragHeader ? (openBlock(), createElementBlock("li", _hoisted_27, [
                            createVNode(_component_el_icon, { color: "#217efd" }, {
                              default: withCtx(() => [
                                createVNode(unref(Rank))
                              ]),
                              _: 1
                              /* STABLE */
                            })
                          ])) : createCommentVNode("v-if", true)
                        ], 40, _hoisted_16))
                      ],
                      64
                      /* STABLE_FRAGMENT */
                    );
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ]),
              _: 1
              /* STABLE */
            })
          ])
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        !_ctx.disabledRemoteCol ? {
          name: "footer",
          fn: withCtx(() => [
            createElementVNode("div", _hoisted_28, [
              createElementVNode("div", null, [
                createVNode(_component_gm_button, {
                  loading: submitLoading.value,
                  type: "primary",
                  size: "default",
                  onClick: onReset
                }, {
                  default: withCtx(() => [
                    createTextVNode("\u91CD\u7F6E")
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["loading"]),
                createVNode(_component_gm_button, {
                  loading: submitLoading.value,
                  type: "success",
                  size: "default",
                  onClick: onSyncRemote
                }, {
                  default: withCtx(() => [
                    createTextVNode("\u540C\u6B65")
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["loading"])
              ]),
              createElementVNode("div", null, [
                createVNode(_component_gm_button, {
                  loading: submitLoading.value,
                  size: "default",
                  onClick: _cache[2] || (_cache[2] = ($event) => isShowDrawer.value = false)
                }, {
                  default: withCtx(() => [
                    createTextVNode("\u53D6\u6D88")
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["loading"]),
                createVNode(_component_gm_button, {
                  loading: submitLoading.value,
                  type: "primary",
                  size: "default",
                  onClick: _cache[3] || (_cache[3] = ($event) => submitSettings())
                }, {
                  default: withCtx(() => [
                    createTextVNode("\u4FDD\u5B58")
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["loading"])
              ])
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["modelValue"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=TableCustomHeader.vue2.mjs.map
