import { defineComponent, useModel, ref, computed, watch, onMounted, resolveComponent, createBlock, openBlock, createSlots, withCtx, createElementVNode, createVNode, unref, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, normalizeClass, 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 { isNil } from '../../../../../utils/src/is.mjs';
import { InfoFilled, IceCreamRound } from '@element-plus/icons-vue';
import { tableHeaderFormProps } from './tableHeaderForm.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-text-[#777]" };
const _hoisted_2 = { class: "gm-flex gm-items-center gm-py-3" };
const _hoisted_3 = { class: "gm-ml-2" };
const _hoisted_4 = { class: "gm-text-cyan-500" };
const _hoisted_5 = { key: 0 };
const _hoisted_6 = { class: "gm-flex gm-justify-between" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmTableHeaderForm"
  },
  __name: "TableHeaderForm",
  props: /* @__PURE__ */ mergeModels(tableHeaderFormProps, {
    "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);
    const defaultPropsList = computed(() => cloneDeep(props.colDefaultPropsList));
    watch(isShowDrawer, (newValue) => {
      if (newValue) {
        clonedColPropsList.value = cloneDeep(colPropsList.value);
      }
    });
    const customSettingsValue = computed(() => customSettingsStore.customSettings[props.keyWord]?.[props.type] || []);
    const { cloned: clonedStore } = useCloned(customSettingsValue);
    const updateColumns = () => {
      colPropsList.value = clonedColPropsList.value;
    };
    const initColumns = async () => {
      try {
        await customSettingsStore.getCustomSettings({ key_word: props.keyWord, type: props.type }, { defaultValue: [] });
      } catch {
      }
      clonedColPropsList.value = defaultPropsList.value.map((it) => {
        const findItem = clonedStore.value.find((v) => v.prop === it.prop);
        if (findItem) {
          it.isShow = findItem.isShow;
          it.width = findItem.width;
          if (!isNil(findItem.fixed)) {
            it.fixed = findItem.fixed;
          }
        }
        return it;
      });
      updateColumns();
      isInited.value = true;
    };
    const checkedNumber = computed(() => {
      return clonedColPropsList.value.filter((v) => v.isShow).length;
    });
    const checkedAll = computed(() => clonedColPropsList.value.filter((it) => it.type !== "edit").every((v) => v.isShow));
    const isIndeterminate = computed(() => !checkedAll.value && clonedColPropsList.value.filter((it) => it.type !== "edit").some((v) => v.isShow));
    const handleCheckAllChange = (val) => {
      clonedColPropsList.value.forEach((v) => {
        if (v.type !== "edit") {
          v.isShow = Boolean(val);
        }
      });
    };
    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;
        GmMessage.success("\u540C\u6B65\u6210\u529F");
      } catch (e) {
        console.error(e);
        submitLoading.value = false;
      }
    };
    const onReset = () => {
      clonedColPropsList.value = cloneDeep(props.colDefaultPropsList);
    };
    const toggleFixedLeft = (row) => {
      if (row.fixed === "left" || row.fixed === true || row.fixed === "") {
        row.fixed = false;
      } else {
        row.fixed = "left";
      }
    };
    const toggleFixedRight = (row) => {
      if (row.fixed === "right") {
        row.fixed = false;
      } else {
        row.fixed = "right";
      }
    };
    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_table_column = resolveComponent("gm-table-column");
      const _component_gm_input = resolveComponent("gm-input");
      const _component_gm_tooltip = resolveComponent("gm-tooltip");
      const _component_gm_table = resolveComponent("gm-table");
      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[2] || (_cache[2] = ($event) => isShowDrawer.value = $event),
        title: "\u81EA\u5B9A\u4E49\u8868\u5934",
        direction: "rtl",
        size: "600px",
        "append-to-body": "",
        "destroy-on-close": ""
      }, createSlots({
        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 ")
              ])
            ])
          ]),
          createVNode(_component_gm_table, {
            data: unref(clonedColPropsList),
            "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,
                    disabled: row.type === "edit"
                  }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"])
                ]),
                _: 1
                /* STABLE */
              }),
              createVNode(_component_gm_table_column, {
                label: "\u5217\u540D",
                prop: "label"
              }, {
                default: withCtx(({ row }) => [
                  createTextVNode(
                    toDisplayString(row.type === "edit" ? "\u64CD\u4F5C" : row.label),
                    1
                    /* TEXT */
                  )
                ]),
                _: 1
                /* STABLE */
              }),
              createVNode(_component_gm_table_column, { label: "\u5217\u5BBD" }, {
                default: withCtx(({ row }) => [
                  createVNode(_component_gm_input, {
                    modelValue: row.width,
                    "onUpdate:modelValue": ($event) => row.width = $event,
                    class: "gm-w-[120px]",
                    placeholder: "\u8BBE\u7F6E\u5BBD\u5EA6",
                    clearable: ""
                  }, null, 8, ["modelValue", "onUpdate:modelValue"])
                ]),
                _: 1
                /* STABLE */
              }),
              createVNode(_component_gm_table_column, { label: "\u56FA\u5B9A" }, {
                default: withCtx(({ row }) => [
                  row.type !== "edit" ? (openBlock(), createElementBlock("div", _hoisted_5, [
                    createVNode(
                      _component_gm_tooltip,
                      {
                        effect: "dark",
                        content: "\u56FA\u5B9A\u5728\u5DE6\u4FA7",
                        placement: "top"
                      },
                      {
                        default: withCtx(() => [
                          createVNode(_component_gm_icon, {
                            class: normalizeClass(["gm-mr-2 gm-cursor-pointer", row.fixed === "" || row.fixed === true || row.fixed === "left" ? "gm-text-blue-500" : ""]),
                            size: "20",
                            onClick: ($event) => toggleFixedLeft(row)
                          }, {
                            default: withCtx(() => [
                              createVNode(unref(IceCreamRound))
                            ]),
                            _: 2
                            /* DYNAMIC */
                          }, 1032, ["class", "onClick"])
                        ]),
                        _: 2
                        /* DYNAMIC */
                      },
                      1024
                      /* DYNAMIC_SLOTS */
                    ),
                    createVNode(
                      _component_gm_tooltip,
                      {
                        effect: "dark",
                        content: "\u56FA\u5B9A\u5728\u53F3\u4FA7",
                        placement: "top"
                      },
                      {
                        default: withCtx(() => [
                          createVNode(_component_gm_icon, {
                            class: normalizeClass(["-gm-scale-x-100 gm-cursor-pointer", row.fixed === "right" ? "gm-text-blue-500" : ""]),
                            size: "20",
                            onClick: ($event) => toggleFixedRight(row)
                          }, {
                            default: withCtx(() => [
                              createVNode(unref(IceCreamRound))
                            ]),
                            _: 2
                            /* DYNAMIC */
                          }, 1032, ["class", "onClick"])
                        ]),
                        _: 2
                        /* DYNAMIC */
                      },
                      1024
                      /* DYNAMIC_SLOTS */
                    )
                  ])) : createCommentVNode("v-if", true)
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            _: 1
            /* STABLE */
          }, 8, ["data"])
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        !_ctx.disabledRemoteCol ? {
          name: "footer",
          fn: withCtx(() => [
            createElementVNode("div", _hoisted_6, [
              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: _cache[1] || (_cache[1] = ($event) => submitSettings())
                }, {
                  default: withCtx(() => [
                    createTextVNode("\u4FDD\u5B58")
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["loading"])
              ])
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["modelValue"]);
    };
  }
});

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