"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
require("../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js");
const noImage = require("../../../../../assets/images/canvas/noImage.png.js");
const designSetting = require("../../../../../settings/designSetting.js");
const index = require("../../../../../settings/chartThemes/index.js");
const fileTypeEnum = require("../../../../../enums/fileTypeEnum.js");
const chartEditStore = require("../../../../../store/modules/chartEditStore/chartEditStore.js");
const chartEditStore_d = require("../../../../../store/modules/chartEditStore/chartEditStore.d.js");
const utils = require("../../../../../utils/utils.js");
require("../../../../../../node_modules/.pnpm/crypto-js@4.1.1/node_modules/crypto-js/index.js");
require("../../../../../enums/pageEnum.js");
require("../../../../../router/index.js");
require("../../../../../store/modules/designStore/designStore.js");
require("../../../../../../node_modules/.pnpm/vue3-lazyload@0.2.5-beta_a6dezdz3je235ci4e3tu4rayna/node_modules/vue3-lazyload/dist/vue3-lazyload.esm.js");
require("../../../../../components/GoSkeleton/index.vue.js");
require("../../../../../components/GoLoading/index.js");
const icon = require("../../../../../plugins/icon.js");
const components = require("../../../../../utils/components.js");
const styleEnum = require("../../../../../enums/styleEnum.js");
const runtimeCore_esmBundler = require("../../../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js");
const reactivity_esmBundler = require("../../../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
const shared_esmBundler = require("../../../../../../node_modules/.pnpm/@vue_shared@3.3.4/node_modules/@vue/shared/dist/shared.esm-bundler.js");
const runtimeDom_esmBundler = require("../../../../../../node_modules/.pnpm/@vue_runtime-dom@3.3.4/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js");
const _withScopeId = (n) => (runtimeCore_esmBundler.pushScopeId("data-v-4295f814"), n = n(), runtimeCore_esmBundler.popScopeId(), n);
const _hoisted_1 = { class: "go-canvas-setting" };
const _hoisted_2 = { class: "upload-box" };
const _hoisted_3 = ["src"];
const _hoisted_4 = { class: "upload-img" };
const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ runtimeCore_esmBundler.createElementVNode("img", { src: noImage.default }, null, -1));
const _hoisted_6 = { class: "picker-height" };
const _sfc_main = /* @__PURE__ */ runtimeCore_esmBundler.defineComponent({
  __name: "index",
  setup(__props) {
    const { ColorPaletteIcon } = icon.icon.ionicons5;
    const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.icon.carbon;
    const chartEditStore$1 = chartEditStore.useChartEditStore();
    const canvasConfig = chartEditStore$1.getEditCanvasConfig;
    const editCanvas = chartEditStore$1.getEditCanvas;
    const uploadFileListRef = reactivity_esmBundler.ref();
    const switchSelectColorLoading = reactivity_esmBundler.ref(false);
    const selectColorValue = reactivity_esmBundler.ref(0);
    const ChartThemeColor = components.loadAsyncComponent(() => Promise.resolve().then(() => require("./components/ChartThemeColor/index.vue.js")));
    const selectColorOptions = [
      {
        label: "应用颜色",
        value: 0
      },
      {
        label: "应用背景",
        value: 1
      }
    ];
    const globalTabList = [
      {
        key: "ChartTheme",
        title: "主题颜色",
        icon: ColorPaletteIcon,
        render: ChartThemeColor
      }
    ];
    const previewTypeList = [
      {
        key: styleEnum.PreviewScaleEnum.FIT,
        title: "自适应",
        icon: ScaleIcon,
        desc: "自适应比例展示，页面会有留白"
      },
      {
        key: styleEnum.PreviewScaleEnum.SCROLL_Y,
        title: "Y轴滚动",
        icon: FitToWidthIcon,
        desc: "X轴铺满，Y轴自适应滚动"
      },
      {
        key: styleEnum.PreviewScaleEnum.SCROLL_X,
        title: "X轴滚动",
        icon: FitToHeightIcon,
        desc: "Y轴铺满，X轴自适应滚动"
      },
      {
        key: styleEnum.PreviewScaleEnum.FULL,
        title: "铺满",
        icon: FitToScreenIcon,
        desc: "强行拉伸画面，填充所有视图"
      }
    ];
    runtimeCore_esmBundler.watch(
      () => canvasConfig.selectColor,
      (newValue) => {
        selectColorValue.value = newValue ? 0 : 1;
      },
      {
        immediate: true
      }
    );
    const validator = (x) => x > 50;
    const changeSizeHandle = () => {
      chartEditStore$1.computedScale();
    };
    const beforeUploadHandle = async ({ file }) => {
      uploadFileListRef.value = [];
      const type = file.file.type;
      const size = file.file.size;
      if (size > 1024 * 1024 * designSetting.backgroundImageSize) {
        window["$message"].warning(`图片超出 ${designSetting.backgroundImageSize}M 限制，请重新上传！`);
        return false;
      }
      if (type !== fileTypeEnum.FileTypeEnum.PNG && type !== fileTypeEnum.FileTypeEnum.JPEG && type !== fileTypeEnum.FileTypeEnum.GIF) {
        window["$message"].warning("文件格式不符合，请重新上传！");
        return false;
      }
      return true;
    };
    const selectColorValueHandle = (value) => {
      canvasConfig.selectColor = value == 0;
    };
    const clearImage = () => {
      chartEditStore$1.setEditCanvasConfig(chartEditStore_d.EditCanvasConfigEnum.BACKGROUND_IMAGE, void 0);
      chartEditStore$1.setEditCanvasConfig(chartEditStore_d.EditCanvasConfigEnum.SELECT_COLOR, true);
    };
    const switchSelectColorHandle = () => {
      switchSelectColorLoading.value = true;
      setTimeout(() => {
        switchSelectColorLoading.value = false;
      });
    };
    const clearColor = () => {
      chartEditStore$1.setEditCanvasConfig(chartEditStore_d.EditCanvasConfigEnum.BACKGROUND, void 0);
      if (canvasConfig.backgroundImage) {
        chartEditStore$1.setEditCanvasConfig(chartEditStore_d.EditCanvasConfigEnum.SELECT_COLOR, false);
      }
      switchSelectColorHandle();
    };
    const customRequest = (options) => {
      const { file } = options;
      runtimeCore_esmBundler.nextTick(() => {
        if (file.file) {
          const ImageUrl = utils.fileToUrl(file.file);
          chartEditStore$1.setEditCanvasConfig(chartEditStore_d.EditCanvasConfigEnum.BACKGROUND_IMAGE, ImageUrl);
          chartEditStore$1.setEditCanvasConfig(chartEditStore_d.EditCanvasConfigEnum.SELECT_COLOR, false);
        } else {
          window["$message"].error("添加图片失败，请稍后重试！");
        }
      });
    };
    const selectPreviewType = (key) => {
      chartEditStore$1.setEditCanvasConfig(chartEditStore_d.EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key);
    };
    return (_ctx, _cache) => {
      const _component_n_input_number = runtimeCore_esmBundler.resolveComponent("n-input-number");
      const _component_n_form_item = runtimeCore_esmBundler.resolveComponent("n-form-item");
      const _component_n_form = runtimeCore_esmBundler.resolveComponent("n-form");
      const _component_n_text = runtimeCore_esmBundler.resolveComponent("n-text");
      const _component_n_upload_dragger = runtimeCore_esmBundler.resolveComponent("n-upload-dragger");
      const _component_n_upload = runtimeCore_esmBundler.resolveComponent("n-upload");
      const _component_n_color_picker = runtimeCore_esmBundler.resolveComponent("n-color-picker");
      const _component_n_space = runtimeCore_esmBundler.resolveComponent("n-space");
      const _component_n_select = runtimeCore_esmBundler.resolveComponent("n-select");
      const _component_n_button = runtimeCore_esmBundler.resolveComponent("n-button");
      const _component_n_icon = runtimeCore_esmBundler.resolveComponent("n-icon");
      const _component_n_tooltip = runtimeCore_esmBundler.resolveComponent("n-tooltip");
      const _component_n_button_group = runtimeCore_esmBundler.resolveComponent("n-button-group");
      const _component_n_divider = runtimeCore_esmBundler.resolveComponent("n-divider");
      const _component_n_tab_pane = runtimeCore_esmBundler.resolveComponent("n-tab-pane");
      const _component_n_tabs = runtimeCore_esmBundler.resolveComponent("n-tabs");
      return runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock("div", _hoisted_1, [
        runtimeCore_esmBundler.createVNode(_component_n_form, {
          inline: "",
          "label-width": 45,
          size: "small",
          "label-placement": "left"
        }, {
          default: runtimeCore_esmBundler.withCtx(() => [
            runtimeCore_esmBundler.createVNode(_component_n_form_item, { label: "宽度" }, {
              default: runtimeCore_esmBundler.withCtx(() => [
                runtimeCore_esmBundler.createVNode(_component_n_input_number, {
                  size: "small",
                  value: reactivity_esmBundler.unref(canvasConfig).width,
                  "onUpdate:value": [
                    _cache[0] || (_cache[0] = ($event) => reactivity_esmBundler.unref(canvasConfig).width = $event),
                    changeSizeHandle
                  ],
                  disabled: reactivity_esmBundler.unref(editCanvas).lockScale,
                  validator
                }, null, 8, ["value", "disabled"])
              ]),
              _: 1
            }),
            runtimeCore_esmBundler.createVNode(_component_n_form_item, { label: "高度" }, {
              default: runtimeCore_esmBundler.withCtx(() => [
                runtimeCore_esmBundler.createVNode(_component_n_input_number, {
                  size: "small",
                  value: reactivity_esmBundler.unref(canvasConfig).height,
                  "onUpdate:value": [
                    _cache[1] || (_cache[1] = ($event) => reactivity_esmBundler.unref(canvasConfig).height = $event),
                    changeSizeHandle
                  ],
                  disabled: reactivity_esmBundler.unref(editCanvas).lockScale,
                  validator
                }, null, 8, ["value", "disabled"])
              ]),
              _: 1
            })
          ]),
          _: 1
        }),
        runtimeCore_esmBundler.createElementVNode("div", _hoisted_2, [
          runtimeCore_esmBundler.createVNode(_component_n_upload, {
            "file-list": uploadFileListRef.value,
            "onUpdate:fileList": _cache[2] || (_cache[2] = ($event) => uploadFileListRef.value = $event),
            "show-file-list": false,
            customRequest,
            onBeforeUpload: beforeUploadHandle
          }, {
            default: runtimeCore_esmBundler.withCtx(() => [
              runtimeCore_esmBundler.createVNode(_component_n_upload_dragger, null, {
                default: runtimeCore_esmBundler.withCtx(() => [
                  reactivity_esmBundler.unref(canvasConfig).backgroundImage ? (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock("img", {
                    key: 0,
                    class: "upload-show",
                    src: reactivity_esmBundler.unref(canvasConfig).backgroundImage,
                    alt: "背景"
                  }, null, 8, _hoisted_3)) : runtimeCore_esmBundler.createCommentVNode("", true),
                  runtimeCore_esmBundler.withDirectives(runtimeCore_esmBundler.createElementVNode("div", _hoisted_4, [
                    _hoisted_5,
                    runtimeCore_esmBundler.createVNode(_component_n_text, {
                      class: "upload-desc",
                      depth: "3"
                    }, {
                      default: runtimeCore_esmBundler.withCtx(() => [
                        runtimeCore_esmBundler.createTextVNode(" 背景图需小于 " + shared_esmBundler.toDisplayString(reactivity_esmBundler.unref(designSetting.backgroundImageSize)) + "M ，格式为 png/jpg/gif 的文件 ", 1)
                      ]),
                      _: 1
                    })
                  ], 512), [
                    [runtimeDom_esmBundler.vShow, !reactivity_esmBundler.unref(canvasConfig).backgroundImage]
                  ])
                ]),
                _: 1
              })
            ]),
            _: 1
          }, 8, ["file-list"])
        ]),
        runtimeCore_esmBundler.createVNode(_component_n_space, {
          vertical: "",
          size: 12
        }, {
          default: runtimeCore_esmBundler.withCtx(() => [
            runtimeCore_esmBundler.createVNode(_component_n_space, null, {
              default: runtimeCore_esmBundler.withCtx(() => [
                runtimeCore_esmBundler.createVNode(_component_n_text, null, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    runtimeCore_esmBundler.createTextVNode("背景颜色")
                  ]),
                  _: 1
                }),
                runtimeCore_esmBundler.createElementVNode("div", _hoisted_6, [
                  !switchSelectColorLoading.value ? (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createBlock(_component_n_color_picker, {
                    key: 0,
                    size: "small",
                    style: { "width": "250px" },
                    value: reactivity_esmBundler.unref(canvasConfig).background,
                    "onUpdate:value": _cache[3] || (_cache[3] = ($event) => reactivity_esmBundler.unref(canvasConfig).background = $event),
                    showPreview: true,
                    swatches: reactivity_esmBundler.unref(index.swatchesColors)
                  }, null, 8, ["value", "swatches"])) : runtimeCore_esmBundler.createCommentVNode("", true)
                ])
              ]),
              _: 1
            }),
            runtimeCore_esmBundler.createVNode(_component_n_space, null, {
              default: runtimeCore_esmBundler.withCtx(() => [
                runtimeCore_esmBundler.createVNode(_component_n_text, null, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    runtimeCore_esmBundler.createTextVNode("应用类型")
                  ]),
                  _: 1
                }),
                runtimeCore_esmBundler.createVNode(_component_n_select, {
                  size: "small",
                  style: { "width": "250px" },
                  value: selectColorValue.value,
                  "onUpdate:value": [
                    _cache[4] || (_cache[4] = ($event) => selectColorValue.value = $event),
                    selectColorValueHandle
                  ],
                  disabled: !reactivity_esmBundler.unref(canvasConfig).backgroundImage,
                  options: selectColorOptions
                }, null, 8, ["value", "disabled"])
              ]),
              _: 1
            }),
            runtimeCore_esmBundler.createVNode(_component_n_space, null, {
              default: runtimeCore_esmBundler.withCtx(() => [
                runtimeCore_esmBundler.createVNode(_component_n_text, null, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    runtimeCore_esmBundler.createTextVNode("背景控制")
                  ]),
                  _: 1
                }),
                runtimeCore_esmBundler.createVNode(_component_n_button, {
                  class: "clear-btn",
                  size: "small",
                  disabled: !reactivity_esmBundler.unref(canvasConfig).backgroundImage,
                  onClick: clearImage
                }, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    runtimeCore_esmBundler.createTextVNode(" 清除背景 ")
                  ]),
                  _: 1
                }, 8, ["disabled"]),
                runtimeCore_esmBundler.createVNode(_component_n_button, {
                  class: "clear-btn",
                  size: "small",
                  disabled: !reactivity_esmBundler.unref(canvasConfig).background,
                  onClick: clearColor
                }, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    runtimeCore_esmBundler.createTextVNode(" 清除颜色 ")
                  ]),
                  _: 1
                }, 8, ["disabled"])
              ]),
              _: 1
            }),
            runtimeCore_esmBundler.createVNode(_component_n_space, null, {
              default: runtimeCore_esmBundler.withCtx(() => [
                runtimeCore_esmBundler.createVNode(_component_n_text, null, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    runtimeCore_esmBundler.createTextVNode("适配方式")
                  ]),
                  _: 1
                }),
                runtimeCore_esmBundler.createVNode(_component_n_button_group, null, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock(runtimeCore_esmBundler.Fragment, null, runtimeCore_esmBundler.renderList(previewTypeList, (item) => {
                      return runtimeCore_esmBundler.createVNode(_component_n_button, {
                        key: item.key,
                        type: reactivity_esmBundler.unref(canvasConfig).previewScaleType === item.key ? "primary" : "tertiary",
                        ghost: "",
                        size: "small",
                        onClick: ($event) => selectPreviewType(item.key)
                      }, {
                        default: runtimeCore_esmBundler.withCtx(() => [
                          runtimeCore_esmBundler.createVNode(_component_n_tooltip, {
                            "show-arrow": false,
                            trigger: "hover"
                          }, {
                            trigger: runtimeCore_esmBundler.withCtx(() => [
                              runtimeCore_esmBundler.createVNode(_component_n_icon, {
                                class: "select-preview-icon",
                                size: "18"
                              }, {
                                default: runtimeCore_esmBundler.withCtx(() => [
                                  (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createBlock(runtimeCore_esmBundler.resolveDynamicComponent(item.icon)))
                                ]),
                                _: 2
                              }, 1024)
                            ]),
                            default: runtimeCore_esmBundler.withCtx(() => [
                              runtimeCore_esmBundler.createTextVNode(" " + shared_esmBundler.toDisplayString(item.desc), 1)
                            ]),
                            _: 2
                          }, 1024)
                        ]),
                        _: 2
                      }, 1032, ["type", "onClick"]);
                    }), 64))
                  ]),
                  _: 1
                })
              ]),
              _: 1
            })
          ]),
          _: 1
        }),
        runtimeCore_esmBundler.createVNode(_component_n_divider, { style: { "margin": "10px 0" } }),
        runtimeCore_esmBundler.createVNode(_component_n_tabs, {
          class: "tabs-box",
          size: "small",
          type: "segment"
        }, {
          default: runtimeCore_esmBundler.withCtx(() => [
            (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock(runtimeCore_esmBundler.Fragment, null, runtimeCore_esmBundler.renderList(globalTabList, (item) => {
              return runtimeCore_esmBundler.createVNode(_component_n_tab_pane, {
                key: item.key,
                name: item.key,
                size: "small",
                "display-directive": "show:lazy"
              }, {
                tab: runtimeCore_esmBundler.withCtx(() => [
                  runtimeCore_esmBundler.createVNode(_component_n_space, null, {
                    default: runtimeCore_esmBundler.withCtx(() => [
                      runtimeCore_esmBundler.createElementVNode("span", null, shared_esmBundler.toDisplayString(item.title), 1),
                      runtimeCore_esmBundler.createVNode(_component_n_icon, {
                        size: "16",
                        class: "icon-position"
                      }, {
                        default: runtimeCore_esmBundler.withCtx(() => [
                          (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createBlock(runtimeCore_esmBundler.resolveDynamicComponent(item.icon)))
                        ]),
                        _: 2
                      }, 1024)
                    ]),
                    _: 2
                  }, 1024)
                ]),
                default: runtimeCore_esmBundler.withCtx(() => [
                  (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createBlock(runtimeCore_esmBundler.resolveDynamicComponent(item.render)))
                ]),
                _: 2
              }, 1032, ["name"]);
            }), 64))
          ]),
          _: 1
        })
      ]);
    };
  }
});
exports.default = _sfc_main;
