import { defineComponent as A, useCssVars as R, unref as i, ref as d, toRefs as E, onMounted as Q, onUnmounted as T, openBlock as t, createElementBlock as n, createElementVNode as s, Fragment as a, renderList as p, withModifiers as z, createTextVNode as C, toDisplayString as v, createVNode as y, Transition as B, withCtx as F, createCommentVNode as b, normalizeStyle as H, createBlock as U, pushScopeId as j, popScopeId as q } from "vue";
import O from "./images/arrow.mjs";
import G from "./images/search.mjs";
import S from "./images/ju.mjs";
import J from "./render.mjs";
import { NInput as K } from "naive-ui";
import P from "./images/arrowright.mjs";
const m = (c) => (j("data-v-979cd1cd"), c = c(), q(), c), W = { class: "searchBox" }, X = { class: "searchLeft" }, Y = ["onClick"], Z = /* @__PURE__ */ m(() => /* @__PURE__ */ s("img", {
  src: O,
  class: "arrowImg"
}, null, -1)), ee = {
  key: 0,
  class: "list"
}, te = ["onClick"], oe = { class: "searchRight" }, ue = { key: 0 }, ne = { class: "tableList" }, se = { class: "tHeader" }, re = /* @__PURE__ */ m(() => /* @__PURE__ */ s("div", null, [
  /* @__PURE__ */ s("img", {
    src: S,
    class: "jupng"
  })
], -1)), le = { class: "tBorder" }, ie = ["onMouseover"], ae = /* @__PURE__ */ m(() => /* @__PURE__ */ s("div", null, [
  /* @__PURE__ */ s("img", {
    src: S,
    class: "jupng"
  })
], -1)), ce = ["title"], de = A({ name: "ETableSearch" }), ke = /* @__PURE__ */ A({
  ...de,
  props: {
    chartConfig: {
      type: Object,
      required: !0
    }
  },
  setup(c) {
    var D;
    const L = c;
    R((o) => ({
      "1211cc32": i($)
    }));
    let I = {
      dataset: {
        searchList: [
          {
            key: "\u6267\u884C\u4E2D\u8054\u53551",
            list: ["\u6267\u884C\u4E2D\u8054\u53551", "\u6267\u884C\u4E2D\u8054\u53552", "\u6267\u884C\u4E2D\u8054\u53553"],
            show: !1
          }
        ],
        columns: [
          {
            title: "\u8054\u5355\u7F16\u53F7",
            key: "no1"
          },
          {
            title: "\u8FD0\u51FA\u5730",
            key: "no2"
          },
          {
            title: "\u76EE\u7684\u5730",
            key: "no3"
          },
          {
            title: "\u8D27\u91CD\uFF08\u5428\uFF09",
            key: "no4"
          },
          {
            title: "\u72B6\u6001",
            key: "no5",
            render: (o, { row: r, column: e, index: l }) => {
              let u = r[e.key];
              return console.log(u), o(
                "div",
                {
                  style: {
                    display: "flex",
                    "justify-content": " space-between",
                    "align-items": "center",
                    height: "26px"
                  }
                },
                [
                  o(
                    "div",
                    {
                      style: {
                        display: "flex",
                        "justify-content": " space-between",
                        "align-items": "center",
                        height: "26px"
                      }
                    },
                    o("div", {
                      style: {
                        width: "7px",
                        height: "7px",
                        background: "#2CF6B6",
                        marginRight: "10px",
                        marginLeft: "10px",
                        boxShadow: "0px 0px 10px 2px rgba(44, 246, 182, 1)"
                      }
                    }),
                    o(
                      "div",
                      {
                        style: {
                          fontSize: "14px",
                          color: "rgba(44, 246, 182, 1)"
                        }
                      },
                      u
                    )
                  ),
                  o("img", {
                    src: P,
                    style: {
                      width: "8px",
                      height: "14px"
                    }
                  })
                ]
              );
            }
          }
        ],
        data: [
          {
            no1: "QB338403598",
            no2: "\u6210\u90FD\u5E02\u9AD8\u65B0\u533A123123123123",
            no3: "\u6210\u90FD\u5E02\u9AD8\u65B0\u533A...",
            no4: "16",
            no5: "\u6267\u884C\u4E2D"
          },
          {
            no1: "QB338403598",
            no2: "\u6210\u90FD\u5E02\u9AD8\u65B0\u533A123123123123",
            no3: "\u6210\u90FD\u5E02\u9AD8\u65B0\u533A...",
            no4: "16",
            no5: "\u6267\u884C\u4E2D"
          },
          {
            no1: "QB338403598",
            no2: "\u6210\u90FD\u5E02\u9AD8\u65B0\u533A123123123123",
            no3: "\u6210\u90FD\u5E02\u9AD8\u65B0\u533A...",
            no4: "16",
            no5: "\u6267\u884C\u4E2D"
          }
        ],
        hoverStyle: {
          background: "linear-gradient(0deg, rgba(44,246,182,0.51), rgba(5,15,10,0))",
          border: "1px solid rgba(44,246,182,0.4)"
        }
      }
    };
    d(0);
    const h = d(!1), _ = d(-1), M = (o, r) => {
      o.show = !o.show;
    }, { dataset: k } = E(((D = L.chartConfig) == null ? void 0 : D.option) || I), { columns: g, data: N, hoverStyle: V } = E(k.value), $ = g.value.length, f = d(k.value.searchList), x = d("");
    return Q(() => {
      window.addEventListener("click", () => {
        f.value.forEach((o) => {
          o.show = !1;
        });
      });
    }), T(() => {
      window.removeEventListener("click", () => {
        f.value.forEach((o) => {
          o.show = !1;
        });
      });
    }), (o, r) => (t(), n("div", null, [
      s("div", W, [
        s("div", X, [
          (t(!0), n(a, null, p(f.value, (e, l) => (t(), n("div", {
            class: "singleSearch",
            onClick: z((u) => M(e), ["stop"])
          }, [
            C(v(e.key) + " ", 1),
            Z,
            y(B, { name: "fade" }, {
              default: F(() => [
                e.show ? (t(), n("div", ee, [
                  (t(!0), n(a, null, p(e.list, (u, w) => (t(), n("div", {
                    onClick: (pe) => e.key = u
                  }, v(u), 9, te))), 256))
                ])) : b("", !0)
              ]),
              _: 2
            }, 1024)
          ], 8, Y))), 256))
        ]),
        s("div", oe, [
          y(B, { name: "fade" }, {
            default: F(() => [
              h.value ? (t(), n("div", ue, [
                y(i(K), {
                  value: x.value,
                  "onUpdate:value": r[0] || (r[0] = (e) => x.value = e),
                  type: "text",
                  placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9"
                }, null, 8, ["value"])
              ])) : b("", !0)
            ]),
            _: 1
          }),
          s("img", {
            src: G,
            alt: "",
            class: "ong",
            onClick: r[1] || (r[1] = (e) => h.value = !h.value)
          })
        ])
      ]),
      s("div", ne, [
        s("div", se, [
          re,
          (t(!0), n(a, null, p(i(g), (e, l) => (t(), n("div", { key: l }, v(e.title), 1))), 128))
        ]),
        s("div", le, [
          (t(!0), n(a, null, p(i(N), (e, l) => (t(), n("div", {
            key: l,
            class: "border",
            style: H(_.value == l ? { ...i(V) } : null),
            onMouseover: (u) => _.value = l,
            onMouseout: r[2] || (r[2] = (u) => _.value = -1)
          }, [
            ae,
            (t(!0), n(a, null, p(i(g), (u, w) => (t(), n("div", {
              key: w,
              title: e[u.key]
            }, [
              u.render ? (t(), U(i(J), {
                key: 0,
                row: e,
                column: u,
                index: l,
                render: u.render
              }, null, 8, ["row", "column", "index", "render"])) : (t(), n(a, { key: 1 }, [
                C(v(e[u.key]), 1)
              ], 64))
            ], 8, ce))), 128))
          ], 44, ie))), 128))
        ])
      ])
    ]));
  }
});
export {
  ke as default
};
