import { defineComponent as p, ref as f, toRefs as h, openBlock as o, createElementBlock as t, createElementVNode as u, Fragment as m, renderList as _, unref as B, normalizeClass as v, normalizeStyle as d, createTextVNode as E, toDisplayString as r, createCommentVNode as n } from "vue";
import b from "./images/icon.mjs";
import D from "./images/circle.mjs";
import A from "./images/circile1.mjs";
import N from "./images/circile2.mjs";
import S from "./images/circile3.mjs";
const V = { class: "lists" }, z = ["onClick"], q = { class: "name" }, x = {
  key: 0,
  src: b,
  alt: "",
  class: "img"
}, G = { class: "content" }, I = {
  key: 0,
  src: D,
  class: "circle"
}, L = { class: "count" }, O = { class: "rightBox" }, P = { class: "key" }, R = ["src"], T = p({ name: "EComponent25" }), Q = /* @__PURE__ */ p({
  ...T,
  props: {
    chartConfig: {
      type: Object,
      required: !0,
      default: () => ({
        option: {
          dataset: [
            {
              name: "\u8FD0\u8F93\u4F01\u4E1A\u603B\u6570",
              isClick: !0,
              count: 80,
              list: [
                {
                  key: "\u6B63\u5E38",
                  num: 60,
                  color: "rgba(39, 203, 153, 1)"
                },
                {
                  key: "\u505C\u8FD0\u6574\u6539",
                  num: 18,
                  color: "rgba(255, 180, 0, 1)"
                }
              ]
            },
            {
              name: "\u8F66\u8F86\u603B\u6570",
              count: 365,
              isClick: !0,
              list: [
                {
                  key: "\u65B0\u80FD\u6E90",
                  num: 60,
                  color: "rgba(39, 203, 153, 1)"
                },
                {
                  key: "\u71C3\u6CB9\uFF08\u56FD\u516D\uFF09",
                  num: 18,
                  color: "rgba(0, 150, 255, 1)"
                },
                {
                  key: "\u71C3\u6CB9\uFF08\u56FD\u4E94\uFF09",
                  num: 18,
                  color: "rgba(255, 180, 0, 1)"
                }
              ]
            },
            {
              name: "\u7535\u5B50\u8054\u5355\u603B\u6570",
              count: 500,
              list: [
                {
                  key: "\u6B63\u5E38",
                  num: 60,
                  color: "rgba(39, 203, 153, 1)"
                },
                {
                  key: "\u5F02\u5E38",
                  num: 18,
                  color: "rgba(255, 180, 0, 1)"
                }
              ]
            },
            {
              name: "\u9A7E\u9A76\u5458\u6570",
              isClick: !0,
              count: 302,
              img: A
            },
            {
              name: "\u4F01\u4E1A\u603B\u8FD0\u529B",
              count: 8e3,
              img: N
            },
            {
              name: "GPS\u5728\u7EBF\u7387",
              count: "95.80%",
              img: S
            }
          ]
        }
      })
    }
  },
  setup(k) {
    const g = k, i = f(0), F = (l, a) => {
      l.isClick && (i.value = a);
    }, { dataset: y } = h(g.chartConfig.option);
    return (l, a) => (o(), t("div", null, [
      u("div", V, [
        (o(!0), t(m, null, _(B(y), (e, s) => (o(), t("div", {
          key: s,
          onClick: (c) => F(e, s),
          class: v({ activeClass: i.value == s }),
          style: d({
            cursor: e.isClick ? "pointer" : ""
          })
        }, [
          u("div", q, [
            E(r(e.name) + " ", 1),
            e.isClick ? (o(), t("img", x)) : n("", !0)
          ]),
          u("div", G, [
            s < 3 ? (o(), t("img", I)) : n("", !0),
            u("div", L, r(e.count), 1),
            u("div", O, [
              (o(!0), t(m, null, _(e.list, (c, C) => (o(), t("div", { key: C }, [
                u("span", P, r(c.key), 1),
                u("span", {
                  style: d({ color: c.color })
                }, r(c.num), 5)
              ]))), 128))
            ]),
            s > 2 ? (o(), t("img", {
              key: 1,
              src: e.img,
              style: { "margin-right": "10px" },
              class: "circleImg"
            }, null, 8, R)) : n("", !0)
          ])
        ], 14, z))), 128))
      ])
    ]));
  }
});
export {
  Q as default
};
