import { defineComponent, ref, toRefs, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, normalizeClass, normalizeStyle, createTextVNode, toDisplayString, createCommentVNode } from "vue";
import _imports_0 from "./images/icon.mjs";
import _imports_1 from "./images/circle.mjs";
import circile1 from "./images/circile1.mjs";
import circile2 from "./images/circile2.mjs";
import circile3 from "./images/circile3.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../../../_virtual/plugin-vue_export-helper.mjs";
const _hoisted_1 = { class: "lists" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = { class: "name" };
const _hoisted_4 = {
  key: 0,
  src: _imports_0,
  alt: ""
};
const _hoisted_5 = { class: "content" };
const _hoisted_6 = {
  key: 0,
  src: _imports_1,
  class: "circle"
};
const _hoisted_7 = { class: "count" };
const _hoisted_8 = { class: "rightBox" };
const _hoisted_9 = { class: "key" };
const _hoisted_10 = ["src"];
const __default__ = defineComponent({ name: "EComponent25" });
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    chartConfig: {
      type: Object,
      required: true,
      default: () => {
        return {
          option: {
            dataset: [
              {
                name: "\u8FD0\u8F93\u4F01\u4E1A\u603B\u6570",
                isClick: true,
                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: true,
                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: true,
                count: 302,
                img: circile1
              },
              {
                name: "\u4F01\u4E1A\u603B\u8FD0\u529B",
                count: 8e3,
                img: circile2
              },
              {
                name: "GPS\u5728\u7EBF\u7387",
                count: "95.80%",
                img: circile3
              }
            ]
          }
        };
      }
    }
  },
  setup(__props) {
    const props = __props;
    const active = ref(0);
    const choose = (item, index) => {
      if (item.isClick)
        active.value = index;
    };
    const { dataset } = toRefs(props.chartConfig.option);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        createElementVNode("div", _hoisted_1, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(dataset), (item, index) => {
            return openBlock(), createElementBlock("div", {
              key: index,
              onClick: ($event) => choose(item, index),
              class: normalizeClass({ activeClass: active.value == index }),
              style: normalizeStyle({
                cursor: item.isClick ? "pointer" : ""
              })
            }, [
              createElementVNode("div", _hoisted_3, [
                createTextVNode(toDisplayString(item.name) + " ", 1),
                item.isClick ? (openBlock(), createElementBlock("img", _hoisted_4)) : createCommentVNode("", true)
              ]),
              createElementVNode("div", _hoisted_5, [
                index < 3 ? (openBlock(), createElementBlock("img", _hoisted_6)) : createCommentVNode("", true),
                createElementVNode("div", _hoisted_7, toDisplayString(item.count), 1),
                createElementVNode("div", _hoisted_8, [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (jtem, jndex) => {
                    return openBlock(), createElementBlock("div", { key: jndex }, [
                      createElementVNode("span", _hoisted_9, toDisplayString(jtem.key), 1),
                      createElementVNode("span", {
                        style: normalizeStyle({ color: jtem.color })
                      }, toDisplayString(jtem.num), 5)
                    ]);
                  }), 128))
                ]),
                index > 2 ? (openBlock(), createElementBlock("img", {
                  key: 1,
                  src: item.img,
                  style: { "margin-right": "10px" }
                }, null, 8, _hoisted_10)) : createCommentVNode("", true)
              ])
            ], 14, _hoisted_2);
          }), 128))
        ])
      ]);
    };
  }
});
var _EComponent25 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-38088f6f"]]);
export { _EComponent25 as default };
