import "../../../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import cloneDeep from "../../../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/cloneDeep.mjs";
import noData from "../../../../../../../assets/images/canvas/noData.png.mjs";
import { getUUID } from "../../../../../../../utils/utils.mjs";
import "../../../../../../../../node_modules/.pnpm/crypto-js@4.1.1/node_modules/crypto-js/index.mjs";
import "../../../../../../../enums/pageEnum.mjs";
import "../../../../../../../router/index.mjs";
import "../../../../../../../store/modules/designStore/designStore.mjs";
import { goDialog } from "../../../../../../../utils/plugin.mjs";
import "../../../../../../../components/GoLoading/index.mjs";
import "../../../../../../../../node_modules/.pnpm/vue3-lazyload@0.2.5-beta_a6dezdz3je235ci4e3tu4rayna/node_modules/vue3-lazyload/dist/vue3-lazyload.esm.mjs";
import "../../../../../../../components/GoSkeleton/index.vue.mjs";
import { icon } from "../../../../../../../plugins/icon.mjs";
import { useChartEditStore } from "../../../../../../../store/modules/chartEditStore/chartEditStore.mjs";
import { EditCanvasConfigEnum } from "../../../../../../../store/modules/chartEditStore/chartEditStore.d.mjs";
import CreateColorRender from "../CreateColorRender/index.vue.mjs";
import { defineComponent, watch, computed, resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode, createElementVNode as createBaseVNode, createElementBlock, createCommentVNode, Fragment, renderList, nextTick, pushScopeId, popScopeId } from "../../../../../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.mjs";
import { ref, reactive, unref } from "../../../../../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.mjs";
import { normalizeClass, toDisplayString, normalizeStyle } from "../../../../../../../../node_modules/.pnpm/@vue_shared@3.3.4/node_modules/@vue/shared/dist/shared.esm-bundler.mjs";
const _withScopeId = (n) => (pushScopeId("data-v-1aebdbd9"), n = n(), popScopeId(), n);
const _hoisted_1 = { class: "create-content" };
const _hoisted_2 = { class: "create-color-setting-box" };
const _hoisted_3 = {
  key: 1,
  class: "no-data go-flex-center"
};
const _hoisted_4 = ["src"];
const _hoisted_5 = { class: "color-list-box" };
const _hoisted_6 = { class: "color-list" };
const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("span", null, " 创建 ", -1));
const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("span", null, " 应用数据 ", -1));
const _hoisted_9 = { class: "go-flex-items-center" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    modelShow: Boolean
  },
  emits: ["update:modelShow", "editSaveHandle"],
  setup(__props, { emit }) {
    const props = __props;
    const { DuplicateOutlineIcon, TrashIcon, ArrowDownIcon } = icon.ionicons5;
    const defaultColor = {
      id: getUUID(),
      name: "未命名",
      color: ["#6ae5bb", "#69e3de", "#5ac5ee", "#5ac4ee", "#4498ec", "#3c7ddf"]
    };
    const chartEditStore = useChartEditStore();
    const modelShowRef = ref(false);
    let colorList = reactive(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo || []);
    const updateColor = ref(void 0);
    const selectColor = reactive({
      selectInfo: colorList[0]
    });
    watch(
      () => props.modelShow,
      (newValue) => {
        modelShowRef.value = newValue;
        if (newValue) {
          if (colorList.length)
            selectColor.selectInfo = colorList[0];
        }
      }
    );
    const selectColorId = computed(() => {
      var _a;
      return (_a = selectColor == null ? void 0 : selectColor.selectInfo) == null ? void 0 : _a.id;
    });
    const selectThemeColor = computed(() => chartEditStore.getEditCanvasConfig.chartThemeColor);
    const selectHandle = (item) => {
      if (item.id === selectColorId.value)
        return;
      if (updateColor.value !== void 0) {
        goDialog({
          message: "当前有变动未保存，是否直接放弃修改？",
          onPositiveCallback: () => {
            updateColor.value = void 0;
            selectColor.selectInfo = item;
          }
        });
      } else {
        selectColor.selectInfo = item;
      }
    };
    const createColor = () => {
      const positiveHandle = () => {
        const newData = { ...cloneDeep(defaultColor), id: getUUID() };
        selectColor.selectInfo = newData;
        colorList.push(newData);
        selectHandle(newData);
        updateColor.value = newData;
        saveHandle(false);
      };
      if (updateColor.value !== void 0) {
        goDialog({
          message: "当前有变动未保存，是否直接放弃修改？",
          onPositiveCallback: () => {
            updateColor.value = void 0;
            positiveHandle();
          }
        });
      } else {
        positiveHandle();
      }
    };
    const deleteHandle = (index) => {
      const positiveHandle = () => {
        colorList.splice(index, 1);
        chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList));
        nextTick(() => {
          if (colorList.length) {
            selectHandle(colorList[index - 1 > -1 ? index - 1 : index]);
          } else {
            selectColor.selectInfo = void 0;
          }
        });
      };
      if (updateColor.value !== void 0) {
        goDialog({
          message: "当前有变动未保存，是否直接放弃修改？",
          onPositiveCallback: () => {
            updateColor.value = void 0;
            positiveHandle();
          }
        });
      } else {
        goDialog({
          message: `是否删除此颜色？`,
          onPositiveCallback: () => {
            positiveHandle();
          }
        });
      }
    };
    const updateColorHandle = (newColor) => {
      updateColor.value = newColor;
    };
    const saveHandle = (onMessage = true) => {
      if (!updateColor.value)
        return;
      const index = colorList.findIndex((item) => {
        var _a;
        return item.id === ((_a = updateColor.value) == null ? void 0 : _a.id);
      });
      if (index !== -1) {
        onMessage && window.$message.success("数据应用成功！");
        const updateColorPrefix = cloneDeep({ ...updateColor.value, name: updateColor.value.name || "未定义" });
        colorList.splice(index, 1, updateColorPrefix);
        updateColor.value = void 0;
        const selectTheme = chartEditStore.getEditCanvasConfig.chartThemeColor;
        chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, "dark");
        nextTick(() => {
          chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList));
          chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, selectTheme);
        });
      } else {
        window.$message.error("数据应用失败！");
      }
    };
    const closeHandle = () => {
      const positiveHandle = () => {
        updateColor.value = void 0;
        selectColor.selectInfo = void 0;
        emit("update:modelShow", false);
      };
      if (updateColor.value !== void 0) {
        goDialog({
          message: "当前有变动未保存，是否直接放弃修改？",
          onPositiveCallback: () => {
            positiveHandle();
          }
        });
      } else {
        positiveHandle();
      }
    };
    const colorBackgroundImage = (item) => {
      return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`;
    };
    return (_ctx, _cache) => {
      const _component_n_text = resolveComponent("n-text");
      const _component_n_timeline_item = resolveComponent("n-timeline-item");
      const _component_n_timeline = resolveComponent("n-timeline");
      const _component_n_icon = resolveComponent("n-icon");
      const _component_n_button = resolveComponent("n-button");
      const _component_n_badge = resolveComponent("n-badge");
      const _component_n_space = resolveComponent("n-space");
      const _component_n_divider = resolveComponent("n-divider");
      const _component_n_a = resolveComponent("n-a");
      const _component_n_ellipsis = resolveComponent("n-ellipsis");
      const _component_n_card = resolveComponent("n-card");
      const _component_n_tooltip = resolveComponent("n-tooltip");
      const _component_n_modal = resolveComponent("n-modal");
      return openBlock(), createBlock(_component_n_modal, {
        class: "go-chart-create-color",
        show: modelShowRef.value,
        "onUpdate:show": _cache[0] || (_cache[0] = ($event) => modelShowRef.value = $event),
        "mask-closable": false,
        closeOnEsc: false
      }, {
        default: withCtx(() => [
          createVNode(_component_n_card, {
            bordered: false,
            role: "dialog",
            size: "small",
            "aria-modal": "true",
            style: { "width": "900px", "height": "720px" }
          }, {
            header: withCtx(() => []),
            "header-extra": withCtx(() => []),
            action: withCtx(() => [
              createVNode(_component_n_space, { justify: "end" }, {
                default: withCtx(() => [
                  createVNode(_component_n_button, { onClick: closeHandle }, {
                    default: withCtx(() => [
                      createTextVNode("操作完成")
                    ]),
                    _: 1
                  })
                ]),
                _: 1
              })
            ]),
            default: withCtx(() => [
              createBaseVNode("div", _hoisted_1, [
                createBaseVNode("div", _hoisted_2, [
                  selectColorId.value ? (openBlock(), createBlock(unref(CreateColorRender), {
                    key: 0,
                    selectColor: selectColor.selectInfo,
                    onUpdateColor: updateColorHandle
                  }, null, 8, ["selectColor"])) : (openBlock(), createElementBlock("div", _hoisted_3, [
                    createBaseVNode("img", {
                      src: unref(noData),
                      alt: "暂无数据"
                    }, null, 8, _hoisted_4),
                    createVNode(_component_n_text, { depth: 3 }, {
                      default: withCtx(() => [
                        createTextVNode("暂未选择自定义颜色")
                      ]),
                      _: 1
                    })
                  ]))
                ]),
                createBaseVNode("div", _hoisted_5, [
                  createVNode(_component_n_timeline, {
                    class: "pond-item-timeline",
                    style: { "width": "20px" }
                  }, {
                    default: withCtx(() => [
                      createVNode(_component_n_timeline_item, { type: "info" }),
                      createVNode(_component_n_timeline_item, { type: "success" })
                    ]),
                    _: 1
                  }),
                  createBaseVNode("div", _hoisted_6, [
                    createVNode(_component_n_space, null, {
                      default: withCtx(() => [
                        createVNode(_component_n_button, {
                          class: normalizeClass(["create-btn", { "is-full": !!!selectColorId.value }]),
                          type: "primary",
                          ghost: !!!selectColorId.value,
                          secondary: !!selectColorId.value,
                          onClick: createColor
                        }, {
                          icon: withCtx(() => [
                            createVNode(_component_n_icon, null, {
                              default: withCtx(() => [
                                createVNode(unref(DuplicateOutlineIcon))
                              ]),
                              _: 1
                            })
                          ]),
                          default: withCtx(() => [
                            _hoisted_7
                          ]),
                          _: 1
                        }, 8, ["class", "ghost", "secondary"]),
                        selectColorId.value ? (openBlock(), createBlock(_component_n_badge, {
                          key: 0,
                          show: updateColor.value !== void 0,
                          dot: ""
                        }, {
                          default: withCtx(() => [
                            createVNode(_component_n_button, {
                              class: "create-btn",
                              type: "info",
                              secondary: "",
                              onClick: saveHandle
                            }, {
                              icon: withCtx(() => [
                                createVNode(_component_n_icon, null, {
                                  default: withCtx(() => [
                                    createVNode(unref(ArrowDownIcon))
                                  ]),
                                  _: 1
                                })
                              ]),
                              default: withCtx(() => [
                                _hoisted_8
                              ]),
                              _: 1
                            })
                          ]),
                          _: 1
                        }, 8, ["show"])) : createCommentVNode("", true)
                      ]),
                      _: 1
                    }),
                    createVNode(_component_n_divider, { style: { "margin": "10px 0" } }),
                    !selectColorId.value ? (openBlock(), createBlock(_component_n_text, {
                      key: 0,
                      class: "not-data-text",
                      depth: 3
                    }, {
                      default: withCtx(() => [
                        createTextVNode(" 暂无自定义颜色， "),
                        createVNode(_component_n_a, { onClick: createColor }, {
                          default: withCtx(() => [
                            createTextVNode("立即创建")
                          ]),
                          _: 1
                        })
                      ]),
                      _: 1
                    })) : createCommentVNode("", true),
                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(colorList), (item, index) => {
                      return openBlock(), createElementBlock("div", {
                        class: "color-card-box",
                        key: index
                      }, [
                        createVNode(_component_n_card, {
                          class: normalizeClass(["color-card", { selected: item.id === selectColorId.value }]),
                          size: "small",
                          hoverable: "",
                          embedded: "",
                          onClick: ($event) => selectHandle(item)
                        }, {
                          default: withCtx(() => [
                            createBaseVNode("div", _hoisted_9, [
                              createVNode(_component_n_ellipsis, { style: { "text-align": "left", "width": "70px" } }, {
                                default: withCtx(() => [
                                  createTextVNode(toDisplayString(item.name), 1)
                                ]),
                                _: 2
                              }, 1024),
                              (openBlock(true), createElementBlock(Fragment, null, renderList(item.color, (colorItem, index2) => {
                                return openBlock(), createElementBlock("span", {
                                  class: "theme-color-item",
                                  key: index2,
                                  style: normalizeStyle({ backgroundColor: colorItem })
                                }, null, 4);
                              }), 128))
                            ]),
                            createBaseVNode("div", {
                              class: "theme-bottom",
                              style: normalizeStyle({ backgroundImage: colorBackgroundImage(item) })
                            }, null, 4)
                          ]),
                          _: 2
                        }, 1032, ["class", "onClick"]),
                        createVNode(_component_n_tooltip, { trigger: "hover" }, {
                          trigger: withCtx(() => [
                            createVNode(_component_n_button, {
                              text: "",
                              disabled: item.id === selectThemeColor.value,
                              onClick: ($event) => deleteHandle(index)
                            }, {
                              default: withCtx(() => [
                                createVNode(_component_n_icon, {
                                  class: "go-ml-1 go-cursor-pointer",
                                  size: "16",
                                  depth: 3
                                }, {
                                  default: withCtx(() => [
                                    createVNode(unref(TrashIcon))
                                  ]),
                                  _: 1
                                })
                              ]),
                              _: 2
                            }, 1032, ["disabled", "onClick"])
                          ]),
                          default: withCtx(() => [
                            createTextVNode(" 删除自定义颜色 ")
                          ]),
                          _: 2
                        }, 1024)
                      ]);
                    }), 128))
                  ])
                ])
              ])
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["show"]);
    };
  }
});
export {
  _sfc_main as default
};
