"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 cloneDeep = require("../../../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/cloneDeep.js");
require("../../../../../../../../node_modules/.pnpm/screenfull@6.0.2/node_modules/screenfull/index.js");
require("../../../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_root.js");
require("../../../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_baseGetTag.js");
require("../../../../../../../../node_modules/.pnpm/html2canvas@1.4.1/node_modules/html2canvas/dist/html2canvas.esm.js");
require("../../../../../../../../node_modules/.pnpm/crypto-js@4.1.1/node_modules/crypto-js/index.js");
require("../../../../../../../enums/pageEnum.js");
require("../../../../../../../router/index.js");
const style = require("../../../../../../../utils/style.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");
require("../../../../../../../settings/designSetting.js");
const components = require("../../../../../../../utils/components.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 runtimeDom_esmBundler = require("../../../../../../../../node_modules/.pnpm/@vue_runtime-dom@3.3.4/node_modules/@vue/runtime-dom/dist/runtime-dom.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 _withScopeId = (n) => (runtimeCore_esmBundler.pushScopeId("data-v-04bb59e0"), n = n(), runtimeCore_esmBundler.popScopeId(), n);
const _hoisted_1 = {
  key: 0,
  class: "create-color-setting"
};
const _hoisted_2 = {
  class: "color-list-box go-mt-3",
  "x-gap": 12,
  "y-gap": 12,
  cols: 4
};
const _hoisted_3 = { class: "go-flex-items-center" };
const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ runtimeCore_esmBundler.createElementVNode("span", { class: "go-mr-4" }, "添加", -1));
const _hoisted_5 = { class: "expend-color-box" };
const _hoisted_6 = ["onClick"];
const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ runtimeCore_esmBundler.createElementVNode("div", { class: "n-color-picker-checkboard" }, null, -1));
const _hoisted_8 = ["onClick"];
const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ runtimeCore_esmBundler.createElementVNode("div", { class: "n-color-picker-checkboard" }, null, -1));
const _sfc_main = /* @__PURE__ */ runtimeCore_esmBundler.defineComponent({
  __name: "index",
  props: {
    selectColor: Object
  },
  emits: ["updateColor"],
  setup(__props, { emit }) {
    const props = __props;
    runtimeDom_esmBundler.useCssVars((_ctx) => ({
      "3d26029e": targetColor.color
    }));
    const { AddIcon, TrashIcon } = icon.icon.ionicons5;
    const CreateColorRenderChart = components.loadAsyncComponent(() => Promise.resolve().then(() => require("../CreateColorRenderChart/index.vue.js")));
    const editColor = reactivity_esmBundler.ref();
    const targetColor = reactivity_esmBundler.reactive({
      // -1 表示无选中元素
      index: -1,
      color: ""
    });
    runtimeCore_esmBundler.watch(
      () => {
        var _a;
        return (_a = props.selectColor) == null ? void 0 : _a.id;
      },
      () => {
        var _a;
        editColor.value = cloneDeep.default(props.selectColor);
        targetColor.index = 0;
        targetColor.color = (_a = editColor.value) == null ? void 0 : _a.color[0];
      },
      {
        immediate: true,
        deep: false
      }
    );
    const expandColorList = runtimeCore_esmBundler.computed(() => {
      return computedColorList(targetColor.color);
    });
    const computedColorList = (color) => {
      if (!color)
        return {
          default: [],
          fade: []
        };
      const num = 36;
      const comDarkenArr = [];
      const comLightenArr = [];
      const comDarkenFadeArr = [];
      for (let i = 0; i < num; i++) {
        comLightenArr.unshift(style.lighten(color, 1 / 100 * (i + 1)));
        comDarkenArr.push(style.darken(color, 3.5 / 100 * (i + 1)));
      }
      comDarkenArr.forEach((item, i) => {
        comDarkenFadeArr.unshift(style.fade(item, 1 / 100 * (i + 1)));
      });
      return {
        default: [
          ...comLightenArr.reverse().splice(0, parseInt(`${num / 2}`) - 9),
          ...comDarkenArr.splice(0, parseInt(`${num / 2}`))
        ],
        fade: comDarkenFadeArr.reverse().splice(0, 27)
      };
    };
    const getRenderBackgroundColor = (color) => {
      return {
        backgroundColor: color
      };
    };
    const selectHandle = (color, index) => {
      targetColor.color = color;
      targetColor.index = index;
    };
    const completeHandle = (color, index) => {
      color && (targetColor.color = color);
      index && (targetColor.index = index);
      runtimeCore_esmBundler.nextTick(() => {
        emit("updateColor", editColor.value);
      });
    };
    const selectExpandColor = (color, isHexa) => {
      const hexColor = isHexa ? style.hslToHexa(color) : style.hslToHex(color);
      editColor.value && (editColor.value.color[targetColor.index] = hexColor);
      runtimeCore_esmBundler.nextTick(() => {
        emit("updateColor", editColor.value);
      });
    };
    const addColor = () => {
      var _a, _b, _c;
      const lastData = ((_b = editColor.value) == null ? void 0 : _b.color[((_a = editColor.value) == null ? void 0 : _a.color.length) - 1]) || "#2c2c31";
      (_c = editColor.value) == null ? void 0 : _c.color.push(lastData);
      runtimeCore_esmBundler.nextTick(() => {
        emit("updateColor", editColor.value);
      });
    };
    const deleteColor = (index) => {
      var _a, _b;
      (_a = editColor.value) == null ? void 0 : _a.color.splice(index, 1);
      if (index === targetColor.index) {
        completeHandle((_b = editColor.value) == null ? void 0 : _b.color[index - 1], index - 1);
      }
    };
    const titleChangeHandle = () => {
      runtimeCore_esmBundler.nextTick(() => {
        emit("updateColor", editColor.value);
      });
    };
    return (_ctx, _cache) => {
      const _component_n_input_group_label = runtimeCore_esmBundler.resolveComponent("n-input-group-label");
      const _component_n_input = runtimeCore_esmBundler.resolveComponent("n-input");
      const _component_n_input_group = runtimeCore_esmBundler.resolveComponent("n-input-group");
      const _component_n_tag = runtimeCore_esmBundler.resolveComponent("n-tag");
      const _component_n_space = runtimeCore_esmBundler.resolveComponent("n-space");
      const _component_n_color_picker = runtimeCore_esmBundler.resolveComponent("n-color-picker");
      const _component_n_icon = runtimeCore_esmBundler.resolveComponent("n-icon");
      const _component_n_tooltip = runtimeCore_esmBundler.resolveComponent("n-tooltip");
      const _component_n_button = runtimeCore_esmBundler.resolveComponent("n-button");
      const _component_n_scrollbar = runtimeCore_esmBundler.resolveComponent("n-scrollbar");
      const _component_n_card = runtimeCore_esmBundler.resolveComponent("n-card");
      const _component_n_text = runtimeCore_esmBundler.resolveComponent("n-text");
      const _component_n_divider = runtimeCore_esmBundler.resolveComponent("n-divider");
      return editColor.value ? (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock("div", _hoisted_1, [
        runtimeCore_esmBundler.createVNode(_component_n_card, {
          bordered: false,
          role: "dialog",
          size: "small",
          "aria-modal": "true"
        }, {
          default: runtimeCore_esmBundler.withCtx(() => [
            runtimeCore_esmBundler.createVNode(_component_n_space, { justify: "space-between" }, {
              default: runtimeCore_esmBundler.withCtx(() => [
                runtimeCore_esmBundler.createVNode(_component_n_input_group, null, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    runtimeCore_esmBundler.createVNode(_component_n_input_group_label, null, {
                      default: runtimeCore_esmBundler.withCtx(() => [
                        runtimeCore_esmBundler.createTextVNode("名称:")
                      ]),
                      _: 1
                    }),
                    runtimeCore_esmBundler.createVNode(_component_n_input, {
                      class: "create-color-name",
                      value: editColor.value.name,
                      "onUpdate:value": _cache[0] || (_cache[0] = ($event) => editColor.value.name = $event),
                      valueModifiers: { trim: true },
                      maxlength: "8",
                      "show-count": "",
                      clearable: "",
                      onChange: titleChangeHandle
                    }, null, 8, ["value"])
                  ]),
                  _: 1
                }),
                runtimeCore_esmBundler.createVNode(_component_n_tag, { type: "warning" }, {
                  default: runtimeCore_esmBundler.withCtx(() => [
                    runtimeCore_esmBundler.createTextVNode("底部图表仅展示 7 条数据")
                  ]),
                  _: 1
                })
              ]),
              _: 1
            }),
            runtimeCore_esmBundler.createVNode(_component_n_scrollbar, { style: { "max-height": "132px" } }, {
              default: runtimeCore_esmBundler.withCtx(() => [
                runtimeCore_esmBundler.createElementVNode("div", _hoisted_2, [
                  (runtimeCore_esmBundler.openBlock(true), runtimeCore_esmBundler.createElementBlock(runtimeCore_esmBundler.Fragment, null, runtimeCore_esmBundler.renderList(editColor.value.color, (item, index) => {
                    return runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock("div", {
                      class: "color-list-item",
                      key: index
                    }, [
                      runtimeCore_esmBundler.createElementVNode("div", {
                        class: shared_esmBundler.normalizeClass(["go-flex-items-center", { select: index === targetColor.index }])
                      }, [
                        runtimeCore_esmBundler.createVNode(_component_n_color_picker, {
                          style: { "width": "95px" },
                          value: editColor.value.color[index],
                          "onUpdate:value": ($event) => editColor.value.color[index] = $event,
                          "show-preview": true,
                          modes: ["hex"],
                          onComplete: ($event) => completeHandle($event, index),
                          "onUpdate:show": ($event) => selectHandle(item, index)
                        }, null, 8, ["value", "onUpdate:value", "onComplete", "onUpdate:show"]),
                        runtimeCore_esmBundler.withDirectives(runtimeCore_esmBundler.createElementVNode("div", null, [
                          runtimeCore_esmBundler.createVNode(_component_n_tooltip, { trigger: "hover" }, {
                            trigger: runtimeCore_esmBundler.withCtx(() => [
                              runtimeCore_esmBundler.createVNode(_component_n_icon, {
                                class: "go-ml-1 go-cursor-pointer",
                                size: "16",
                                depth: 3,
                                onClick: ($event) => deleteColor(index)
                              }, {
                                default: runtimeCore_esmBundler.withCtx(() => [
                                  runtimeCore_esmBundler.createVNode(reactivity_esmBundler.unref(TrashIcon))
                                ]),
                                _: 2
                              }, 1032, ["onClick"])
                            ]),
                            default: runtimeCore_esmBundler.withCtx(() => [
                              runtimeCore_esmBundler.createTextVNode(" 删除颜色 ")
                            ]),
                            _: 2
                          }, 1024)
                        ], 512), [
                          [runtimeDom_esmBundler.vShow, index > 5]
                        ])
                      ], 2)
                    ]);
                  }), 128)),
                  runtimeCore_esmBundler.createElementVNode("div", null, [
                    runtimeCore_esmBundler.createVNode(_component_n_button, {
                      type: "primary",
                      secondary: "",
                      onClick: addColor
                    }, {
                      default: runtimeCore_esmBundler.withCtx(() => [
                        runtimeCore_esmBundler.createElementVNode("div", _hoisted_3, [
                          _hoisted_4,
                          runtimeCore_esmBundler.createVNode(_component_n_icon, { size: "16" }, {
                            default: runtimeCore_esmBundler.withCtx(() => [
                              runtimeCore_esmBundler.createVNode(reactivity_esmBundler.unref(AddIcon))
                            ]),
                            _: 1
                          })
                        ])
                      ]),
                      _: 1
                    })
                  ])
                ])
              ]),
              _: 1
            })
          ]),
          _: 1
        }),
        runtimeCore_esmBundler.createElementVNode("div", _hoisted_5, [
          runtimeCore_esmBundler.createVNode(_component_n_card, {
            class: "go-mt-3 expend-color",
            bordered: false,
            role: "dialog",
            size: "small",
            "aria-modal": "true"
          }, {
            default: runtimeCore_esmBundler.withCtx(() => [
              runtimeCore_esmBundler.createVNode(_component_n_text, null, {
                default: runtimeCore_esmBundler.withCtx(() => [
                  runtimeCore_esmBundler.createTextVNode("默认扩展色：")
                ]),
                _: 1
              }),
              runtimeCore_esmBundler.createVNode(_component_n_divider, { style: { "margin": "10px 0" } }),
              runtimeCore_esmBundler.createVNode(_component_n_space, {
                size: [4, 0],
                justify: "center"
              }, {
                default: runtimeCore_esmBundler.withCtx(() => [
                  (runtimeCore_esmBundler.openBlock(true), runtimeCore_esmBundler.createElementBlock(runtimeCore_esmBundler.Fragment, null, runtimeCore_esmBundler.renderList(expandColorList.value.default, (item, index) => {
                    return runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock("div", {
                      class: "color-computed-item",
                      key: index,
                      onClick: ($event) => selectExpandColor(item, false)
                    }, [
                      _hoisted_7,
                      runtimeCore_esmBundler.createElementVNode("div", {
                        style: shared_esmBundler.normalizeStyle(getRenderBackgroundColor(item))
                      }, null, 4)
                    ], 8, _hoisted_6);
                  }), 128))
                ]),
                _: 1
              })
            ]),
            _: 1
          }),
          runtimeCore_esmBundler.createVNode(_component_n_card, {
            class: "go-mt-3 expend-color",
            bordered: false,
            role: "dialog",
            size: "small",
            "aria-modal": "true"
          }, {
            default: runtimeCore_esmBundler.withCtx(() => [
              runtimeCore_esmBundler.createVNode(_component_n_text, null, {
                default: runtimeCore_esmBundler.withCtx(() => [
                  runtimeCore_esmBundler.createTextVNode("透明扩展色：")
                ]),
                _: 1
              }),
              runtimeCore_esmBundler.createVNode(_component_n_divider, { style: { "margin": "10px 0" } }),
              runtimeCore_esmBundler.createVNode(_component_n_space, {
                size: [4, 0],
                justify: "center"
              }, {
                default: runtimeCore_esmBundler.withCtx(() => [
                  (runtimeCore_esmBundler.openBlock(true), runtimeCore_esmBundler.createElementBlock(runtimeCore_esmBundler.Fragment, null, runtimeCore_esmBundler.renderList(expandColorList.value.fade, (item, index) => {
                    return runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock("div", {
                      class: "color-computed-item",
                      key: index,
                      onClick: ($event) => selectExpandColor(item, true)
                    }, [
                      _hoisted_9,
                      runtimeCore_esmBundler.createElementVNode("div", {
                        style: shared_esmBundler.normalizeStyle(getRenderBackgroundColor(item))
                      }, null, 4)
                    ], 8, _hoisted_8);
                  }), 128))
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ]),
        runtimeCore_esmBundler.createVNode(reactivity_esmBundler.unref(CreateColorRenderChart), {
          color: reactivity_esmBundler.unref(cloneDeep.default)(editColor.value.color).splice(0, 7)
        }, null, 8, ["color"])
      ])) : runtimeCore_esmBundler.createCommentVNode("", true);
    };
  }
});
exports.default = _sfc_main;
