import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, unref, createElementVNode, createCommentVNode, withDirectives, createTextVNode, toDisplayString, vShow, createBlock, Fragment, renderList, resolveDynamicComponent, nextTick, pushScopeId, popScopeId } from "vue";
import { u as useChartEditStore, N as loadAsyncComponent, aW as PreviewScaleEnum, aX as backgroundImageSize, aY as swatchesColors, i as icon, q as EditCanvasConfigEnum, aZ as fileToUrl, _ as _export_sfc } from "./index-67bc0910.js";
import { F as FileTypeEnum } from "./fileTypeEnum-d13b2cef.js";
const _imports_0 = "data:image/png;base64, ";
const _withScopeId = (n) => (pushScopeId("data-v-4295f814"), n = n(), 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__ */ createElementVNode("img", { src: _imports_0 }, null, -1));
const _hoisted_6 = { class: "picker-height" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const { ColorPaletteIcon } = icon.ionicons5;
    const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon;
    const chartEditStore = useChartEditStore();
    const canvasConfig = chartEditStore.getEditCanvasConfig;
    const editCanvas = chartEditStore.getEditCanvas;
    const uploadFileListRef = ref();
    const switchSelectColorLoading = ref(false);
    const selectColorValue = ref(0);
    const ChartThemeColor = loadAsyncComponent(() => import("./index-5cc436fe.js"));
    const selectColorOptions = [
      {
        label: "应用颜色",
        value: 0
      },
      {
        label: "应用背景",
        value: 1
      }
    ];
    const globalTabList = [
      {
        key: "ChartTheme",
        title: "主题颜色",
        icon: ColorPaletteIcon,
        render: ChartThemeColor
      }
    ];
    const previewTypeList = [
      {
        key: PreviewScaleEnum.FIT,
        title: "自适应",
        icon: ScaleIcon,
        desc: "自适应比例展示，页面会有留白"
      },
      {
        key: PreviewScaleEnum.SCROLL_Y,
        title: "Y轴滚动",
        icon: FitToWidthIcon,
        desc: "X轴铺满，Y轴自适应滚动"
      },
      {
        key: PreviewScaleEnum.SCROLL_X,
        title: "X轴滚动",
        icon: FitToHeightIcon,
        desc: "Y轴铺满，X轴自适应滚动"
      },
      {
        key: PreviewScaleEnum.FULL,
        title: "铺满",
        icon: FitToScreenIcon,
        desc: "强行拉伸画面，填充所有视图"
      }
    ];
    watch(
      () => canvasConfig.selectColor,
      (newValue) => {
        selectColorValue.value = newValue ? 0 : 1;
      },
      {
        immediate: true
      }
    );
    const validator = (x) => x > 50;
    const changeSizeHandle = () => {
      chartEditStore.computedScale();
    };
    const beforeUploadHandle = async ({ file }) => {
      uploadFileListRef.value = [];
      const type = file.file.type;
      const size = file.file.size;
      if (size > 1024 * 1024 * backgroundImageSize) {
        window["$message"].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`);
        return false;
      }
      if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
        window["$message"].warning("文件格式不符合，请重新上传！");
        return false;
      }
      return true;
    };
    const selectColorValueHandle = (value) => {
      canvasConfig.selectColor = value == 0;
    };
    const clearImage = () => {
      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, void 0);
      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true);
    };
    const switchSelectColorHandle = () => {
      switchSelectColorLoading.value = true;
      setTimeout(() => {
        switchSelectColorLoading.value = false;
      });
    };
    const clearColor = () => {
      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND, void 0);
      if (canvasConfig.backgroundImage) {
        chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false);
      }
      switchSelectColorHandle();
    };
    const customRequest = (options) => {
      const { file } = options;
      nextTick(() => {
        if (file.file) {
          const ImageUrl = fileToUrl(file.file);
          chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, ImageUrl);
          chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false);
        } else {
          window["$message"].error("添加图片失败，请稍后重试！");
        }
      });
    };
    const selectPreviewType = (key) => {
      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key);
    };
    return (_ctx, _cache) => {
      const _component_n_input_number = resolveComponent("n-input-number");
      const _component_n_form_item = resolveComponent("n-form-item");
      const _component_n_form = resolveComponent("n-form");
      const _component_n_text = resolveComponent("n-text");
      const _component_n_upload_dragger = resolveComponent("n-upload-dragger");
      const _component_n_upload = resolveComponent("n-upload");
      const _component_n_color_picker = resolveComponent("n-color-picker");
      const _component_n_space = resolveComponent("n-space");
      const _component_n_select = resolveComponent("n-select");
      const _component_n_button = resolveComponent("n-button");
      const _component_n_icon = resolveComponent("n-icon");
      const _component_n_tooltip = resolveComponent("n-tooltip");
      const _component_n_button_group = resolveComponent("n-button-group");
      const _component_n_divider = resolveComponent("n-divider");
      const _component_n_tab_pane = resolveComponent("n-tab-pane");
      const _component_n_tabs = resolveComponent("n-tabs");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_component_n_form, {
          inline: "",
          "label-width": 45,
          size: "small",
          "label-placement": "left"
        }, {
          default: withCtx(() => [
            createVNode(_component_n_form_item, { label: "宽度" }, {
              default: withCtx(() => [
                createVNode(_component_n_input_number, {
                  size: "small",
                  value: unref(canvasConfig).width,
                  "onUpdate:value": [
                    _cache[0] || (_cache[0] = ($event) => unref(canvasConfig).width = $event),
                    changeSizeHandle
                  ],
                  disabled: unref(editCanvas).lockScale,
                  validator
                }, null, 8, ["value", "disabled"])
              ]),
              _: 1
            }),
            createVNode(_component_n_form_item, { label: "高度" }, {
              default: withCtx(() => [
                createVNode(_component_n_input_number, {
                  size: "small",
                  value: unref(canvasConfig).height,
                  "onUpdate:value": [
                    _cache[1] || (_cache[1] = ($event) => unref(canvasConfig).height = $event),
                    changeSizeHandle
                  ],
                  disabled: unref(editCanvas).lockScale,
                  validator
                }, null, 8, ["value", "disabled"])
              ]),
              _: 1
            })
          ]),
          _: 1
        }),
        createElementVNode("div", _hoisted_2, [
          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: withCtx(() => [
              createVNode(_component_n_upload_dragger, null, {
                default: withCtx(() => [
                  unref(canvasConfig).backgroundImage ? (openBlock(), createElementBlock("img", {
                    key: 0,
                    class: "upload-show",
                    src: unref(canvasConfig).backgroundImage,
                    alt: "背景"
                  }, null, 8, _hoisted_3)) : createCommentVNode("", true),
                  withDirectives(createElementVNode("div", _hoisted_4, [
                    _hoisted_5,
                    createVNode(_component_n_text, {
                      class: "upload-desc",
                      depth: "3"
                    }, {
                      default: withCtx(() => [
                        createTextVNode(" 背景图需小于 " + toDisplayString(unref(backgroundImageSize)) + "M ，格式为 png/jpg/gif 的文件 ", 1)
                      ]),
                      _: 1
                    })
                  ], 512), [
                    [vShow, !unref(canvasConfig).backgroundImage]
                  ])
                ]),
                _: 1
              })
            ]),
            _: 1
          }, 8, ["file-list"])
        ]),
        createVNode(_component_n_space, {
          vertical: "",
          size: 12
        }, {
          default: withCtx(() => [
            createVNode(_component_n_space, null, {
              default: withCtx(() => [
                createVNode(_component_n_text, null, {
                  default: withCtx(() => [
                    createTextVNode("背景颜色")
                  ]),
                  _: 1
                }),
                createElementVNode("div", _hoisted_6, [
                  !switchSelectColorLoading.value ? (openBlock(), createBlock(_component_n_color_picker, {
                    key: 0,
                    size: "small",
                    style: { "width": "250px" },
                    value: unref(canvasConfig).background,
                    "onUpdate:value": _cache[3] || (_cache[3] = ($event) => unref(canvasConfig).background = $event),
                    showPreview: true,
                    swatches: unref(swatchesColors)
                  }, null, 8, ["value", "swatches"])) : createCommentVNode("", true)
                ])
              ]),
              _: 1
            }),
            createVNode(_component_n_space, null, {
              default: withCtx(() => [
                createVNode(_component_n_text, null, {
                  default: withCtx(() => [
                    createTextVNode("应用类型")
                  ]),
                  _: 1
                }),
                createVNode(_component_n_select, {
                  size: "small",
                  style: { "width": "250px" },
                  value: selectColorValue.value,
                  "onUpdate:value": [
                    _cache[4] || (_cache[4] = ($event) => selectColorValue.value = $event),
                    selectColorValueHandle
                  ],
                  disabled: !unref(canvasConfig).backgroundImage,
                  options: selectColorOptions
                }, null, 8, ["value", "disabled"])
              ]),
              _: 1
            }),
            createVNode(_component_n_space, null, {
              default: withCtx(() => [
                createVNode(_component_n_text, null, {
                  default: withCtx(() => [
                    createTextVNode("背景控制")
                  ]),
                  _: 1
                }),
                createVNode(_component_n_button, {
                  class: "clear-btn",
                  size: "small",
                  disabled: !unref(canvasConfig).backgroundImage,
                  onClick: clearImage
                }, {
                  default: withCtx(() => [
                    createTextVNode(" 清除背景 ")
                  ]),
                  _: 1
                }, 8, ["disabled"]),
                createVNode(_component_n_button, {
                  class: "clear-btn",
                  size: "small",
                  disabled: !unref(canvasConfig).background,
                  onClick: clearColor
                }, {
                  default: withCtx(() => [
                    createTextVNode(" 清除颜色 ")
                  ]),
                  _: 1
                }, 8, ["disabled"])
              ]),
              _: 1
            }),
            createVNode(_component_n_space, null, {
              default: withCtx(() => [
                createVNode(_component_n_text, null, {
                  default: withCtx(() => [
                    createTextVNode("适配方式")
                  ]),
                  _: 1
                }),
                createVNode(_component_n_button_group, null, {
                  default: withCtx(() => [
                    (openBlock(), createElementBlock(Fragment, null, renderList(previewTypeList, (item) => {
                      return createVNode(_component_n_button, {
                        key: item.key,
                        type: unref(canvasConfig).previewScaleType === item.key ? "primary" : "tertiary",
                        ghost: "",
                        size: "small",
                        onClick: ($event) => selectPreviewType(item.key)
                      }, {
                        default: withCtx(() => [
                          createVNode(_component_n_tooltip, {
                            "show-arrow": false,
                            trigger: "hover"
                          }, {
                            trigger: withCtx(() => [
                              createVNode(_component_n_icon, {
                                class: "select-preview-icon",
                                size: "18"
                              }, {
                                default: withCtx(() => [
                                  (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
                                ]),
                                _: 2
                              }, 1024)
                            ]),
                            default: withCtx(() => [
                              createTextVNode(" " + toDisplayString(item.desc), 1)
                            ]),
                            _: 2
                          }, 1024)
                        ]),
                        _: 2
                      }, 1032, ["type", "onClick"]);
                    }), 64))
                  ]),
                  _: 1
                })
              ]),
              _: 1
            })
          ]),
          _: 1
        }),
        createVNode(_component_n_divider, { style: { "margin": "10px 0" } }),
        createVNode(_component_n_tabs, {
          class: "tabs-box",
          size: "small",
          type: "segment"
        }, {
          default: withCtx(() => [
            (openBlock(), createElementBlock(Fragment, null, renderList(globalTabList, (item) => {
              return createVNode(_component_n_tab_pane, {
                key: item.key,
                name: item.key,
                size: "small",
                "display-directive": "show:lazy"
              }, {
                tab: withCtx(() => [
                  createVNode(_component_n_space, null, {
                    default: withCtx(() => [
                      createElementVNode("span", null, toDisplayString(item.title), 1),
                      createVNode(_component_n_icon, {
                        size: "16",
                        class: "icon-position"
                      }, {
                        default: withCtx(() => [
                          (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
                        ]),
                        _: 2
                      }, 1024)
                    ]),
                    _: 2
                  }, 1024)
                ]),
                default: withCtx(() => [
                  (openBlock(), createBlock(resolveDynamicComponent(item.render)))
                ]),
                _: 2
              }, 1032, ["name"]);
            }), 64))
          ]),
          _: 1
        })
      ]);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_4295f814_lang = "";
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4295f814"]]);
export {
  index as default
};
