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

const _hoisted_1 = { class: "gm-mb-4 gm-flex gm-items-center gm-gap-2 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-text-cyan-500" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode(
  "div",
  { class: "gm-font-bold gm-text-amber-400" },
  "\u70B9\u51FB\u6309\u94AE\u53EF\u4FEE\u6539\u5F53\u524D\u6309\u94AE\u989C\u8272\uFF01",
  -1
  /* HOISTED */
);
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-32 gm-border-l gm-border-white" },
  "\u62D6\u5730\u8C03\u6574\u987A\u5E8F",
  -1
  /* HOISTED */
);
const _hoisted_8 = ["onDragstart", "onDragenter"];
const _hoisted_9 = { class: "gm-flex gm-w-14 gm-justify-center" };
const _hoisted_10 = { class: "gm-flex-1 gm-border-l gm-border-gray-200" };
const _hoisted_11 = { class: "p-1" };
const _hoisted_12 = /* @__PURE__ */ createElementVNode(
  "div",
  { class: "text-[14px] gm-mb-2" },
  "\u70B9\u51FB\u4E0B\u5217\u8272\u5757\u53EF\u4FEE\u6539\u6309\u94AE\u989C\u8272",
  -1
  /* HOISTED */
);
const _hoisted_13 = { class: "gm-w-32 gm-cursor-grabbing gm-border-l gm-border-gray-200" };
const _hoisted_14 = { class: "gm-flex gm-justify-between" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmCustomOperate"
  },
  __name: "CustomOperate",
  props: /* @__PURE__ */ mergeModels(customOperateProps, {
    "isShowDrawer": { type: Boolean, ...{
      required: true
    } },
    "isShowDrawerModifiers": {},
    "customBtnPropsList": {
      required: true
    },
    "customBtnPropsListModifiers": {}
  }),
  emits: ["update:isShowDrawer", "update:customBtnPropsList"],
  setup(__props, { expose: __expose }) {
    const isShowDrawer = useModel(__props, "isShowDrawer");
    const customBtnPropsList = useModel(__props, "customBtnPropsList");
    const props = __props;
    const customSettingsStore = useCustomSettingsStore();
    const isInited = ref(false);
    const { cloned: clonedCustomBtnList } = useCloned(customBtnPropsList);
    const defaultPropsList = computed(() => cloneDeep(props.customDefaultPropsList));
    const popoverVisibles = ref(defaultPropsList.value.map(() => false));
    watch(defaultPropsList, () => {
      popoverVisibles.value = defaultPropsList.value.map(() => false);
    });
    watch(isShowDrawer, (newValue) => {
      if (newValue) {
        clonedCustomBtnList.value = cloneDeep(customBtnPropsList.value);
      }
    });
    const customSettingsValue = computed(() => customSettingsStore.customSettings[props.keyWord]?.[props.type] || []);
    const { cloned: clonedStore } = useCloned(customSettingsValue);
    const updateOperate = () => {
      customBtnPropsList.value = clonedCustomBtnList.value;
    };
    const initOperate = async () => {
      try {
        await customSettingsStore.getCustomSettings({ key_word: props.keyWord, type: props.type }, { defaultValue: [] });
      } catch {
      }
      const clonedDefaultOperate = cloneDeep(props.customDefaultPropsList);
      let operate = clonedDefaultOperate;
      if (clonedStore.value.length) {
        operate = [];
        clonedStore.value.forEach((it) => {
          const index = clonedDefaultOperate.findIndex((v) => v.prop === it.prop);
          if (index > -1) {
            const item = clonedDefaultOperate.splice(index, 1)[0];
            operate.push({
              ...item,
              ...it,
              label: item.label
            });
          }
        });
        clonedCustomBtnList.value = [...operate, ...clonedDefaultOperate];
      }
      updateOperate();
      isInited.value = true;
    };
    const titleStyle = computed(() => {
      const h = props.customDefaultPropsList.length * 44;
      const H = document.documentElement.clientHeight || document.body.clientHeight;
      return h > H - 240 ? { paddingRight: "4px" } : { paddingRight: 0 };
    });
    const checkedNumber = computed(() => {
      return clonedCustomBtnList.value.filter((v) => v.isShow).length;
    });
    const checkedAll = computed({
      get() {
        return clonedCustomBtnList.value.every((v) => v.isShow);
      },
      set(value) {
        clonedCustomBtnList.value.forEach((v) => {
          v.isShow = Boolean(value);
        });
      }
    });
    const isIndeterminate = computed(() => !checkedAll.value && clonedCustomBtnList.value.some((v) => v.isShow));
    const handleCheckAllChange = (val) => {
      clonedCustomBtnList.value.forEach((v) => {
        v.isShow = Boolean(val);
      });
    };
    const setBtnType = (item, index, type) => {
      item.type = type;
      popoverVisibles.value[index] = false;
    };
    const start = ref();
    const end = ref();
    const dragstart = (item) => {
      document.body.style.userSelect = "none";
      start.value = item;
    };
    const dragenter = (item, e) => {
      end.value = item;
      e.preventDefault();
    };
    const dragend = () => {
      document.body.style.userSelect = "text";
      if (start.value === end.value) return;
      if (start.value && end.value) {
        const oldIndex = clonedCustomBtnList.value.findIndex((v) => v.prop === start.value?.prop);
        const newIndex = clonedCustomBtnList.value.findIndex((v) => v.prop === end.value?.prop);
        const newItems = [...clonedCustomBtnList.value];
        newItems.splice(oldIndex, 1);
        newItems.splice(newIndex, 0, start.value);
        clonedCustomBtnList.value = [...newItems];
      }
    };
    const dragover = (e) => {
      e.preventDefault();
    };
    const submitLoading = ref(false);
    const onSubmit = async () => {
      try {
        submitLoading.value = true;
        const { data } = await customSettingsStore.addCustomSettings({
          key_word: props.keyWord,
          value: JSON.stringify(clonedCustomBtnList.value),
          type: props.type
        });
        submitLoading.value = false;
        if (data.code !== 200) {
          return;
        }
        isShowDrawer.value = false;
        updateOperate();
      } catch (e) {
        console.error(e);
        submitLoading.value = false;
      }
    };
    const onReset = () => {
      clonedCustomBtnList.value = cloneDeep(props.customDefaultPropsList);
    };
    const onSyncRemote = async () => {
      try {
        submitLoading.value = true;
        await customSettingsStore.syncRemoteSetting({
          key_word: props.keyWord,
          type: props.type
        });
        submitLoading.value = false;
        initOperate();
      } catch (e) {
        console.error(e);
        submitLoading.value = false;
      }
    };
    onMounted(() => {
      if (props.disabledRemoteBtn) {
        isInited.value = true;
      } else {
        initOperate();
      }
    });
    __expose({
      isInited
    });
    return (_ctx, _cache) => {
      const _component_gm_icon = resolveComponent("gm-icon");
      const _component_gm_checkbox = resolveComponent("gm-checkbox");
      const _component_gm_button = resolveComponent("gm-button");
      const _component_gm_popover = resolveComponent("gm-popover");
      const _component_el_icon = resolveComponent("el-icon");
      const _component_gm_drawer = resolveComponent("gm-drawer");
      return openBlock(), createBlock(_component_gm_drawer, {
        modelValue: isShowDrawer.value,
        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isShowDrawer.value = $event),
        title: "\u81EA\u5B9A\u4E49\u6309\u94AE",
        direction: "rtl",
        size: "500px",
        "append-to-body": "",
        "destroy-on-close": "",
        class: "custom-operate-drawer"
      }, {
        footer: withCtx(() => [
          createElementVNode("div", _hoisted_14, [
            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: onSubmit
              }, {
                default: withCtx(() => [
                  createTextVNode("\u4FDD\u5B58")
                ]),
                _: 1
                /* STABLE */
              }, 8, ["loading"])
            ])
          ])
        ]),
        default: withCtx(() => [
          createElementVNode("div", _hoisted_1, [
            createVNode(_component_gm_icon, null, {
              default: withCtx(() => [
                createVNode(unref(InfoFilled))
              ]),
              _: 1
              /* STABLE */
            }),
            createElementVNode("p", null, [
              createTextVNode(" \u5DF2\u9009\u4E2D "),
              createElementVNode(
                "span",
                _hoisted_2,
                toDisplayString(checkedNumber.value),
                1
                /* TEXT */
              ),
              createTextVNode(" \u9879 ")
            ]),
            _hoisted_3
          ]),
          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,
                    onChange: handleCheckAllChange
                  }, null, 8, ["modelValue", "indeterminate"])
                ]),
                _hoisted_6,
                _hoisted_7
              ],
              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(clonedCustomBtnList), (item, index) => {
                    return openBlock(), createElementBlock("ul", {
                      key: item.prop,
                      class: "gm-flex gm-items-center gm-border gm-border-b-0 gm-border-gray-200",
                      draggable: true,
                      onDragstart: ($event) => dragstart(item),
                      onDragenter: ($event) => dragenter(item, $event),
                      onDragend: dragend,
                      onDragover: _cache[1] || (_cache[1] = ($event) => dragover($event))
                    }, [
                      createElementVNode("li", _hoisted_9, [
                        createVNode(_component_gm_checkbox, {
                          modelValue: item.isShow,
                          "onUpdate:modelValue": ($event) => item.isShow = $event
                        }, null, 8, ["modelValue", "onUpdate:modelValue"])
                      ]),
                      createElementVNode("li", _hoisted_10, [
                        createVNode(_component_gm_popover, {
                          visible: popoverVisibles.value[index],
                          "onUpdate:visible": ($event) => popoverVisibles.value[index] = $event,
                          placement: "bottom",
                          width: 330,
                          trigger: "click"
                        }, {
                          reference: withCtx(() => [
                            createVNode(_component_gm_button, {
                              type: item.type || "primary",
                              link: "",
                              size: "small"
                            }, {
                              default: withCtx(() => [
                                createTextVNode(
                                  toDisplayString(item.label),
                                  1
                                  /* TEXT */
                                )
                              ]),
                              _: 2
                              /* DYNAMIC */
                            }, 1032, ["type"])
                          ]),
                          default: withCtx(() => [
                            createElementVNode("div", _hoisted_11, [
                              _hoisted_12,
                              createVNode(_component_gm_button, {
                                type: "primary",
                                size: "small",
                                onClick: ($event) => setBtnType(item, index, "primary")
                              }, {
                                default: withCtx(() => [
                                  createTextVNode(" \u84DD\u8272 ")
                                ]),
                                _: 2
                                /* DYNAMIC */
                              }, 1032, ["onClick"]),
                              createVNode(_component_gm_button, {
                                type: "success",
                                size: "small",
                                onClick: ($event) => setBtnType(item, index, "success")
                              }, {
                                default: withCtx(() => [
                                  createTextVNode(" \u7EFF\u8272 ")
                                ]),
                                _: 2
                                /* DYNAMIC */
                              }, 1032, ["onClick"]),
                              createVNode(_component_gm_button, {
                                type: "info",
                                size: "small",
                                onClick: ($event) => setBtnType(item, index, "info")
                              }, {
                                default: withCtx(() => [
                                  createTextVNode(" \u7070\u8272 ")
                                ]),
                                _: 2
                                /* DYNAMIC */
                              }, 1032, ["onClick"]),
                              createVNode(_component_gm_button, {
                                type: "warning",
                                size: "small",
                                onClick: ($event) => setBtnType(item, index, "warning")
                              }, {
                                default: withCtx(() => [
                                  createTextVNode(" \u6A59\u8272 ")
                                ]),
                                _: 2
                                /* DYNAMIC */
                              }, 1032, ["onClick"]),
                              createVNode(_component_gm_button, {
                                type: "danger",
                                size: "small",
                                onClick: ($event) => setBtnType(item, index, "danger")
                              }, {
                                default: withCtx(() => [
                                  createTextVNode(" \u7EA2\u8272 ")
                                ]),
                                _: 2
                                /* DYNAMIC */
                              }, 1032, ["onClick"])
                            ])
                          ]),
                          _: 2
                          /* DYNAMIC */
                        }, 1032, ["visible", "onUpdate:visible"])
                      ]),
                      createElementVNode("li", _hoisted_13, [
                        createVNode(_component_el_icon, { color: "#217efd" }, {
                          default: withCtx(() => [
                            createVNode(unref(Rank))
                          ]),
                          _: 1
                          /* STABLE */
                        })
                      ])
                    ], 40, _hoisted_8);
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ]),
              _: 1
              /* STABLE */
            })
          ])
        ]),
        _: 1
        /* STABLE */
      }, 8, ["modelValue"]);
    };
  }
});

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