import u from "./images/broaden-active.mjs";
import h from "./images/broaden.mjs";
import b from "./images/fullscreen-active.mjs";
import d from "./images/fullscreen.mjs";
import C from "./images/moxing-active.mjs";
import k from "./images/moxing.mjs";
import x from "./images/point-active.mjs";
import w from "./images/point.mjs";
import y from "./images/satellite-active.mjs";
import A from "./images/satellite.mjs";
import I from "./images/title-active.mjs";
import E from "./images/title.mjs";
import { defineComponent as c, reactive as $, toRefs as j, openBlock as r, createElementBlock as g, createElementVNode as l, normalizeStyle as m, unref as o, normalizeClass as z, withDirectives as B, Fragment as L, renderList as O, vShow as R } from "vue";
import S from "./images/title2.mjs";
import U from "./images/title-active2.mjs";
const q = { class: "tools-box" }, D = ["onClick"], F = c({ name: "EComponent28" }), ne = /* @__PURE__ */ c({
  ...F,
  props: {
    chartConfig: {
      type: Object,
      required: !0,
      default: () => ({
        option: {
          titleConfig: {
            active: !0,
            img: S,
            imgActive: U,
            height: 119
          },
          btnsConfig: []
        }
      })
    }
  },
  setup(s) {
    var _;
    const p = $(s.chartConfig), { titleConfig: e, btnsConfig: n } = j(p.option), a = (t) => new URL((/* @__PURE__ */ Object.assign({ "./images/broaden-active.png": u, "./images/broaden.png": h, "./images/fullscreen-active.png": b, "./images/fullscreen.png": d, "./images/moxing-active.png": C, "./images/moxing.png": k, "./images/point-active.png": x, "./images/point.png": w, "./images/satellite-active.png": y, "./images/satellite.png": A, "./images/title-active.png": I, "./images/title.png": E }))[`./images/${t}.png`], self.location).href;
    !((_ = n.value) != null && _.length) && ["satellite", "point", "moxing", "fullscreen"].forEach(
      (t) => n.value.push({
        active: !1,
        img: a(t),
        imgActive: a(t + "-active"),
        width: 121,
        height: 122
      })
    );
    const v = () => {
      e.value.active = !e.value.active;
    }, f = (t) => {
      t.active = !t.active;
    };
    return (t, V) => (r(), g("div", q, [
      l("header", {
        style: m({
          height: o(e).height + "px",
          backgroundImage: `url(${o(e).active ? o(e).imgActive : o(e).img})`
        }),
        class: z({ active: o(e).active }),
        onClick: v
      }, null, 6),
      B(l("main", null, [
        (r(!0), g(L, null, O(o(n), (i) => (r(), g("div", {
          class: "btn-box",
          key: i.img,
          style: m({
            width: i.width + "px",
            height: i.height + "px",
            backgroundImage: `url(${i.active ? i.imgActive : i.img})`
          }),
          onClick: (G) => f(i)
        }, null, 12, D))), 128))
      ], 512), [
        [R, o(e).active]
      ])
    ]));
  }
});
export {
  ne as default
};
