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 "../../../../../../../../node_modules/.pnpm/screenfull@6.0.2/node_modules/screenfull/index.mjs";
import "../../../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_root.mjs";
import "../../../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_baseGetTag.mjs";
import "../../../../../../../../node_modules/.pnpm/html2canvas@1.4.1/node_modules/html2canvas/dist/html2canvas.esm.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 { lighten, darken, fade, hslToHexa, hslToHex } from "../../../../../../../utils/style.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 "../../../../../../../components/GoLoading/index.mjs";
import { icon } from "../../../../../../../plugins/icon.mjs";
import "../../../../../../../settings/designSetting.mjs";
import { loadAsyncComponent } from "../../../../../../../utils/components.mjs";
import { defineComponent, watch, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createTextVNode, createElementVNode as createBaseVNode, Fragment, renderList, withDirectives, createCommentVNode, 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 { useCssVars, vShow } from "../../../../../../../../node_modules/.pnpm/@vue_runtime-dom@3.3.4/node_modules/@vue/runtime-dom/dist/runtime-dom.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, 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-04bb59e0"), n = n(), 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__ */ createBaseVNode("span", { class: "go-mr-4" }, "添加", -1));
const _hoisted_5 = { class: "expend-color-box" };
const _hoisted_6 = ["onClick"];
const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "n-color-picker-checkboard" }, null, -1));
const _hoisted_8 = ["onClick"];
const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "n-color-picker-checkboard" }, null, -1));
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    selectColor: Object
  },
  emits: ["updateColor"],
  setup(__props, { emit }) {
    const props = __props;
    useCssVars((_ctx) => ({
      "3d26029e": targetColor.color
    }));
    const { AddIcon, TrashIcon } = icon.ionicons5;
    const CreateColorRenderChart = loadAsyncComponent(() => import("../CreateColorRenderChart/index.vue.mjs"));
    const editColor = ref();
    const targetColor = reactive({
      // -1 表示无选中元素
      index: -1,
      color: ""
    });
    watch(
      () => {
        var _a;
        return (_a = props.selectColor) == null ? void 0 : _a.id;
      },
      () => {
        var _a;
        editColor.value = cloneDeep(props.selectColor);
        targetColor.index = 0;
        targetColor.color = (_a = editColor.value) == null ? void 0 : _a.color[0];
      },
      {
        immediate: true,
        deep: false
      }
    );
    const expandColorList = 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(lighten(color, 1 / 100 * (i + 1)));
        comDarkenArr.push(darken(color, 3.5 / 100 * (i + 1)));
      }
      comDarkenArr.forEach((item, i) => {
        comDarkenFadeArr.unshift(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);
      nextTick(() => {
        emit("updateColor", editColor.value);
      });
    };
    const selectExpandColor = (color, isHexa) => {
      const hexColor = isHexa ? hslToHexa(color) : hslToHex(color);
      editColor.value && (editColor.value.color[targetColor.index] = hexColor);
      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);
      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 = () => {
      nextTick(() => {
        emit("updateColor", editColor.value);
      });
    };
    return (_ctx, _cache) => {
      const _component_n_input_group_label = resolveComponent("n-input-group-label");
      const _component_n_input = resolveComponent("n-input");
      const _component_n_input_group = resolveComponent("n-input-group");
      const _component_n_tag = resolveComponent("n-tag");
      const _component_n_space = resolveComponent("n-space");
      const _component_n_color_picker = resolveComponent("n-color-picker");
      const _component_n_icon = resolveComponent("n-icon");
      const _component_n_tooltip = resolveComponent("n-tooltip");
      const _component_n_button = resolveComponent("n-button");
      const _component_n_scrollbar = resolveComponent("n-scrollbar");
      const _component_n_card = resolveComponent("n-card");
      const _component_n_text = resolveComponent("n-text");
      const _component_n_divider = resolveComponent("n-divider");
      return editColor.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_component_n_card, {
          bordered: false,
          role: "dialog",
          size: "small",
          "aria-modal": "true"
        }, {
          default: withCtx(() => [
            createVNode(_component_n_space, { justify: "space-between" }, {
              default: withCtx(() => [
                createVNode(_component_n_input_group, null, {
                  default: withCtx(() => [
                    createVNode(_component_n_input_group_label, null, {
                      default: withCtx(() => [
                        createTextVNode("名称:")
                      ]),
                      _: 1
                    }),
                    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
                }),
                createVNode(_component_n_tag, { type: "warning" }, {
                  default: withCtx(() => [
                    createTextVNode("底部图表仅展示 7 条数据")
                  ]),
                  _: 1
                })
              ]),
              _: 1
            }),
            createVNode(_component_n_scrollbar, { style: { "max-height": "132px" } }, {
              default: withCtx(() => [
                createBaseVNode("div", _hoisted_2, [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(editColor.value.color, (item, index) => {
                    return openBlock(), createElementBlock("div", {
                      class: "color-list-item",
                      key: index
                    }, [
                      createBaseVNode("div", {
                        class: normalizeClass(["go-flex-items-center", { select: index === targetColor.index }])
                      }, [
                        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"]),
                        withDirectives(createBaseVNode("div", null, [
                          createVNode(_component_n_tooltip, { trigger: "hover" }, {
                            trigger: withCtx(() => [
                              createVNode(_component_n_icon, {
                                class: "go-ml-1 go-cursor-pointer",
                                size: "16",
                                depth: 3,
                                onClick: ($event) => deleteColor(index)
                              }, {
                                default: withCtx(() => [
                                  createVNode(unref(TrashIcon))
                                ]),
                                _: 2
                              }, 1032, ["onClick"])
                            ]),
                            default: withCtx(() => [
                              createTextVNode(" 删除颜色 ")
                            ]),
                            _: 2
                          }, 1024)
                        ], 512), [
                          [vShow, index > 5]
                        ])
                      ], 2)
                    ]);
                  }), 128)),
                  createBaseVNode("div", null, [
                    createVNode(_component_n_button, {
                      type: "primary",
                      secondary: "",
                      onClick: addColor
                    }, {
                      default: withCtx(() => [
                        createBaseVNode("div", _hoisted_3, [
                          _hoisted_4,
                          createVNode(_component_n_icon, { size: "16" }, {
                            default: withCtx(() => [
                              createVNode(unref(AddIcon))
                            ]),
                            _: 1
                          })
                        ])
                      ]),
                      _: 1
                    })
                  ])
                ])
              ]),
              _: 1
            })
          ]),
          _: 1
        }),
        createBaseVNode("div", _hoisted_5, [
          createVNode(_component_n_card, {
            class: "go-mt-3 expend-color",
            bordered: false,
            role: "dialog",
            size: "small",
            "aria-modal": "true"
          }, {
            default: withCtx(() => [
              createVNode(_component_n_text, null, {
                default: withCtx(() => [
                  createTextVNode("默认扩展色：")
                ]),
                _: 1
              }),
              createVNode(_component_n_divider, { style: { "margin": "10px 0" } }),
              createVNode(_component_n_space, {
                size: [4, 0],
                justify: "center"
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(expandColorList.value.default, (item, index) => {
                    return openBlock(), createElementBlock("div", {
                      class: "color-computed-item",
                      key: index,
                      onClick: ($event) => selectExpandColor(item, false)
                    }, [
                      _hoisted_7,
                      createBaseVNode("div", {
                        style: normalizeStyle(getRenderBackgroundColor(item))
                      }, null, 4)
                    ], 8, _hoisted_6);
                  }), 128))
                ]),
                _: 1
              })
            ]),
            _: 1
          }),
          createVNode(_component_n_card, {
            class: "go-mt-3 expend-color",
            bordered: false,
            role: "dialog",
            size: "small",
            "aria-modal": "true"
          }, {
            default: withCtx(() => [
              createVNode(_component_n_text, null, {
                default: withCtx(() => [
                  createTextVNode("透明扩展色：")
                ]),
                _: 1
              }),
              createVNode(_component_n_divider, { style: { "margin": "10px 0" } }),
              createVNode(_component_n_space, {
                size: [4, 0],
                justify: "center"
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(expandColorList.value.fade, (item, index) => {
                    return openBlock(), createElementBlock("div", {
                      class: "color-computed-item",
                      key: index,
                      onClick: ($event) => selectExpandColor(item, true)
                    }, [
                      _hoisted_9,
                      createBaseVNode("div", {
                        style: normalizeStyle(getRenderBackgroundColor(item))
                      }, null, 4)
                    ], 8, _hoisted_8);
                  }), 128))
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ]),
        createVNode(unref(CreateColorRenderChart), {
          color: unref(cloneDeep)(editColor.value.color).splice(0, 7)
        }, null, 8, ["color"])
      ])) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};
