import { defineComponent, useCssVars, ref, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, unref, Fragment, renderList, createBlock, normalizeClass, createElementVNode, createTextVNode, toDisplayString, normalizeStyle, pushScopeId, popScopeId } from "vue";
import { N as loadAsyncComponent, u as useChartEditStore, y as useDesignStore, aN as colorCustomMerge, i as icon, I as cloneDeep, q as EditCanvasConfigEnum, _ as _export_sfc } from "./index-67bc0910.js";
const _withScopeId = (n) => (pushScopeId("data-v-4ce90fea"), n = n(), popScopeId(), n);
const _hoisted_1 = { class: "go-chart-theme-color" };
const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, "自定义颜色", -1));
const _hoisted_3 = { class: "go-flex-items-center" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    useCssVars((_ctx) => ({
      "d133daf6": themeColor.value
    }));
    const CreateColor = loadAsyncComponent(() => import("./index-a42c32be.js"));
    const { SquareIcon, AddIcon } = icon.ionicons5;
    const chartEditStore = useChartEditStore();
    const designStore = useDesignStore();
    const createColorModelShow = ref(false);
    const comChartColors = computed(() => {
      return colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo);
    });
    const themeColor = computed(() => {
      return designStore.getAppTheme;
    });
    const selectName = computed(() => {
      return chartEditStore.getEditCanvasConfig.chartThemeColor;
    });
    const createColorHandle = () => {
      createColorModelShow.value = true;
    };
    const colorBackgroundImage = (item) => {
      return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`;
    };
    const fetchShowColors = (colors) => {
      return cloneDeep(colors).splice(0, 6);
    };
    const selectTheme = (theme) => {
      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme);
    };
    return (_ctx, _cache) => {
      const _component_n_icon = resolveComponent("n-icon");
      const _component_n_text = resolveComponent("n-text");
      const _component_n_card = resolveComponent("n-card");
      const _component_n_ellipsis = resolveComponent("n-ellipsis");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_component_n_card, {
          class: "card-box",
          size: "small",
          hoverable: "",
          embedded: "",
          onClick: createColorHandle
        }, {
          default: withCtx(() => [
            createVNode(_component_n_text, { class: "go-flex-items-center" }, {
              default: withCtx(() => [
                _hoisted_2,
                createVNode(_component_n_icon, { size: "16" }, {
                  default: withCtx(() => [
                    createVNode(unref(AddIcon))
                  ]),
                  _: 1
                })
              ]),
              _: 1
            })
          ]),
          _: 1
        }),
        (openBlock(true), createElementBlock(Fragment, null, renderList(comChartColors.value, (value, key) => {
          return openBlock(), createBlock(_component_n_card, {
            key,
            class: normalizeClass(["card-box", { selected: key === selectName.value }]),
            size: "small",
            hoverable: "",
            embedded: "",
            onClick: ($event) => selectTheme(key)
          }, {
            default: withCtx(() => [
              createElementVNode("div", _hoisted_3, [
                createVNode(_component_n_ellipsis, { style: { "text-align": "left", "width": "60px" } }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(value.name), 1)
                  ]),
                  _: 2
                }, 1024),
                (openBlock(true), createElementBlock(Fragment, null, renderList(fetchShowColors(value.color), (colorItem) => {
                  return openBlock(), createElementBlock("span", {
                    class: "theme-color-item",
                    key: colorItem,
                    style: normalizeStyle({ backgroundColor: colorItem })
                  }, null, 4);
                }), 128))
              ]),
              createElementVNode("div", {
                class: "theme-bottom",
                style: normalizeStyle({ backgroundImage: colorBackgroundImage(value) })
              }, null, 4)
            ]),
            _: 2
          }, 1032, ["class", "onClick"]);
        }), 128)),
        createVNode(unref(CreateColor), {
          modelShow: createColorModelShow.value,
          "onUpdate:modelShow": _cache[0] || (_cache[0] = ($event) => createColorModelShow.value = $event)
        }, null, 8, ["modelShow"])
      ]);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_4ce90fea_lang = "";
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4ce90fea"]]);
export {
  index as default
};
