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

const _hoisted_1 = { class: "drawer-alert gm-mb-4 gm-flex gm-items-center gm-justify-between gm-rounded gm-border gm-border-cyan-300 gm-bg-cyan-50 gm-px-4 gm-text-sm gm-leading-[40px] gm-text-[#777]" };
const _hoisted_2 = { class: "gm-flex gm-items-center" };
const _hoisted_3 = { class: "gm-ml-2" };
const _hoisted_4 = { class: "gm-text-cyan-500" };
const _hoisted_5 = /* @__PURE__ */ createElementVNode(
  "b",
  { class: "gm-ml-3 gm-text-orange-400" },
  "\u70B9\u51FB\u6309\u94AE\u53EF\u4FEE\u6539\u5F53\u524D\u6309\u94AE\u989C\u8272\uFF01",
  -1
  /* HOISTED */
);
const _hoisted_6 = { class: "p-1" };
const _hoisted_7 = /* @__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_8 = { class: "gm-flex gm-justify-between" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmOperateButtonForm"
  },
  __name: "OperateButtonForm",
  props: /* @__PURE__ */ mergeModels(operateButtonFormProps, {
    "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 {
      }
      clonedCustomBtnList.value = defaultPropsList.value.map((it) => {
        const findItem = clonedStore.value.find((v) => v.prop === it.prop);
        if (findItem) {
          it.isShow = findItem.isShow;
          it.type = findItem.type;
        }
        return it;
      });
      updateOperate();
      isInited.value = true;
    };
    const checkedNumber = computed(() => {
      return clonedCustomBtnList.value.filter((v) => v.isShow).length;
    });
    const checkedAll = computed(() => clonedCustomBtnList.value.every((v) => v.isShow));
    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 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;
      } 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_table_column = resolveComponent("gm-table-column");
      const _component_gm_button = resolveComponent("gm-button");
      const _component_gm_popover = resolveComponent("gm-popover");
      const _component_gm_table = resolveComponent("gm-table");
      const _component_gm_drawer = resolveComponent("gm-drawer");
      return openBlock(), createBlock(_component_gm_drawer, {
        modelValue: isShowDrawer.value,
        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isShowDrawer.value = $event),
        title: "\u81EA\u5B9A\u4E49\u6309\u94AE",
        direction: "rtl",
        size: "500px",
        "append-to-body": "",
        "destroy-on-close": ""
      }, {
        footer: withCtx(() => [
          createElementVNode("div", _hoisted_8, [
            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[0] || (_cache[0] = ($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("section", _hoisted_1, [
            createElementVNode("div", _hoisted_2, [
              createVNode(_component_gm_icon, null, {
                default: withCtx(() => [
                  createVNode(unref(InfoFilled))
                ]),
                _: 1
                /* STABLE */
              }),
              createElementVNode("p", _hoisted_3, [
                createTextVNode(" \u5DF2\u9009\u4E2D "),
                createElementVNode(
                  "span",
                  _hoisted_4,
                  toDisplayString(checkedNumber.value),
                  1
                  /* TEXT */
                ),
                createTextVNode(" \u9879 ")
              ]),
              _hoisted_5
            ])
          ]),
          createVNode(_component_gm_table, {
            data: unref(clonedCustomBtnList),
            "header-cell-style": { background: "#F5F7FA", color: "#333" },
            style: { "width": "100%" }
          }, {
            default: withCtx(() => [
              createVNode(_component_gm_table_column, {
                align: "left",
                width: "80"
              }, {
                header: withCtx(() => [
                  createVNode(_component_gm_checkbox, {
                    "model-value": checkedAll.value,
                    indeterminate: isIndeterminate.value,
                    onChange: handleCheckAllChange
                  }, null, 8, ["model-value", "indeterminate"])
                ]),
                default: withCtx(({ row }) => [
                  createVNode(_component_gm_checkbox, {
                    modelValue: row.isShow,
                    "onUpdate:modelValue": ($event) => row.isShow = $event
                  }, null, 8, ["modelValue", "onUpdate:modelValue"])
                ]),
                _: 1
                /* STABLE */
              }),
              createVNode(_component_gm_table_column, { label: "\u6309\u94AE" }, {
                default: withCtx(({ row, $index }) => [
                  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: row.type || "primary",
                        link: "",
                        size: "small"
                      }, {
                        default: withCtx(() => [
                          createTextVNode(
                            toDisplayString(row.label),
                            1
                            /* TEXT */
                          )
                        ]),
                        _: 2
                        /* DYNAMIC */
                      }, 1032, ["type"])
                    ]),
                    default: withCtx(() => [
                      createElementVNode("div", _hoisted_6, [
                        _hoisted_7,
                        createVNode(_component_gm_button, {
                          type: "primary",
                          size: "small",
                          onClick: ($event) => setBtnType(row, $index, "primary")
                        }, {
                          default: withCtx(() => [
                            createTextVNode(" \u84DD\u8272 ")
                          ]),
                          _: 2
                          /* DYNAMIC */
                        }, 1032, ["onClick"]),
                        createVNode(_component_gm_button, {
                          type: "success",
                          size: "small",
                          onClick: ($event) => setBtnType(row, $index, "success")
                        }, {
                          default: withCtx(() => [
                            createTextVNode(" \u7EFF\u8272 ")
                          ]),
                          _: 2
                          /* DYNAMIC */
                        }, 1032, ["onClick"]),
                        createVNode(_component_gm_button, {
                          type: "info",
                          size: "small",
                          onClick: ($event) => setBtnType(row, $index, "info")
                        }, {
                          default: withCtx(() => [
                            createTextVNode(" \u7070\u8272 ")
                          ]),
                          _: 2
                          /* DYNAMIC */
                        }, 1032, ["onClick"]),
                        createVNode(_component_gm_button, {
                          type: "warning",
                          size: "small",
                          onClick: ($event) => setBtnType(row, $index, "warning")
                        }, {
                          default: withCtx(() => [
                            createTextVNode(" \u6A59\u8272 ")
                          ]),
                          _: 2
                          /* DYNAMIC */
                        }, 1032, ["onClick"]),
                        createVNode(_component_gm_button, {
                          type: "danger",
                          size: "small",
                          onClick: ($event) => setBtnType(row, $index, "danger")
                        }, {
                          default: withCtx(() => [
                            createTextVNode(" \u7EA2\u8272 ")
                          ]),
                          _: 2
                          /* DYNAMIC */
                        }, 1032, ["onClick"])
                      ])
                    ]),
                    _: 2
                    /* DYNAMIC */
                  }, 1032, ["visible", "onUpdate:visible"])
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            _: 1
            /* STABLE */
          }, 8, ["data"])
        ]),
        _: 1
        /* STABLE */
      }, 8, ["modelValue"]);
    };
  }
});

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