import { defineComponent, useCssVars, unref, ref, toRefs, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, Fragment, renderList, withModifiers, createTextVNode, toDisplayString, createVNode, Transition, withCtx, createCommentVNode, normalizeStyle, createBlock, pushScopeId, popScopeId } from "vue";
import _imports_0 from "./images/arrow.mjs";
import _imports_1 from "./images/search.mjs";
import _imports_2 from "./images/ju.mjs";
import Render from "./render.mjs";
import { NInput } from "naive-ui";
import arrowIcon from "./images/arrowright.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../../../_virtual/plugin-vue_export-helper.mjs";
const _withScopeId = (n) => (pushScopeId("data-v-665fb946"), n = n(), popScopeId(), n);
const _hoisted_1 = { class: "searchBox" };
const _hoisted_2 = { class: "searchLeft" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("img", {
  src: _imports_0,
  alt: ""
}, null, -1));
const _hoisted_5 = {
  key: 0,
  class: "list"
};
const _hoisted_6 = ["onClick"];
const _hoisted_7 = { class: "searchRight" };
const _hoisted_8 = { key: 0 };
const _hoisted_9 = { class: "tableList" };
const _hoisted_10 = { class: "tHeader" };
const _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", null, [
  /* @__PURE__ */ createElementVNode("img", {
    src: _imports_2,
    alt: ""
  })
], -1));
const _hoisted_12 = { class: "tBorder" };
const _hoisted_13 = ["onMouseover"];
const _hoisted_14 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", null, [
  /* @__PURE__ */ createElementVNode("img", {
    src: _imports_2,
    alt: ""
  })
], -1));
const _hoisted_15 = ["title"];
const __default__ = defineComponent({ name: "ETableSearch" });
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    chartConfig: {
      type: Object,
      required: true,
      default: () => {
        return {
          option: {
            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: false
                }
              ],
              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: (h2, { row, column, index }) => {
                    let data = row[column.key];
                    console.log(data);
                    return h2(
                      "div",
                      {
                        style: {
                          display: "flex",
                          "justify-content": " space-between",
                          "align-items": "center",
                          height: "52px"
                        }
                      },
                      [
                        h2(
                          "div",
                          {
                            style: {
                              display: "flex",
                              "justify-content": " space-between",
                              "align-items": "center",
                              height: "52px"
                            }
                          },
                          h2("div", {
                            style: {
                              width: "14px",
                              height: "14px",
                              background: "#2CF6B6",
                              marginRight: "13px",
                              marginLeft: "13px",
                              boxShadow: "0px 0px 10px 2px rgba(44, 246, 182, 1)"
                            }
                          }),
                          h2(
                            "div",
                            {
                              style: {
                                fontSize: "22px",
                                color: "rgba(44, 246, 182, 1)"
                              }
                            },
                            data
                          )
                        ),
                        h2("img", { src: arrowIcon })
                      ]
                    );
                  }
                }
              ],
              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)"
              }
            }
          }
        };
      }
    }
  },
  setup(__props) {
    const props = __props;
    useCssVars((_ctx) => ({
      "43b79ec6": unref(length)
    }));
    ref(0);
    const showInput = ref(false);
    const isHovered = ref(-1);
    const chooseList = (item, index) => {
      item.show = !item.show;
    };
    const { dataset } = toRefs(props.chartConfig.option);
    const { columns, data, hoverStyle } = toRefs(dataset.value);
    const length = columns.value.length;
    const list = ref(props.chartConfig.option.dataset.searchList);
    const value = ref("");
    onMounted(() => {
      window.addEventListener("click", () => {
        list.value.forEach((item) => {
          item.show = false;
        });
      });
    });
    onUnmounted(() => {
      window.removeEventListener("click", () => {
        list.value.forEach((item) => {
          item.show = false;
        });
      });
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        createElementVNode("div", _hoisted_1, [
          createElementVNode("div", _hoisted_2, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item, index) => {
              return openBlock(), createElementBlock("div", {
                class: "singleSearch",
                onClick: withModifiers(($event) => chooseList(item), ["stop"])
              }, [
                createTextVNode(toDisplayString(item.key) + " ", 1),
                _hoisted_4,
                createVNode(Transition, { name: "fade" }, {
                  default: withCtx(() => [
                    item.show ? (openBlock(), createElementBlock("div", _hoisted_5, [
                      (openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (jtem, jndex) => {
                        return openBlock(), createElementBlock("div", {
                          onClick: ($event) => item.key = jtem
                        }, toDisplayString(jtem), 9, _hoisted_6);
                      }), 256))
                    ])) : createCommentVNode("", true)
                  ]),
                  _: 2
                }, 1024)
              ], 8, _hoisted_3);
            }), 256))
          ]),
          createElementVNode("div", _hoisted_7, [
            createVNode(Transition, { name: "fade" }, {
              default: withCtx(() => [
                showInput.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
                  createVNode(unref(NInput), {
                    value: value.value,
                    "onUpdate:value": _cache[0] || (_cache[0] = ($event) => value.value = $event),
                    type: "text",
                    placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9",
                    size: "large"
                  }, null, 8, ["value"])
                ])) : createCommentVNode("", true)
              ]),
              _: 1
            }),
            createElementVNode("img", {
              src: _imports_1,
              alt: "",
              class: "ong",
              onClick: _cache[1] || (_cache[1] = ($event) => showInput.value = !showInput.value)
            })
          ])
        ]),
        createElementVNode("div", _hoisted_9, [
          createElementVNode("div", _hoisted_10, [
            _hoisted_11,
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(columns), (item, index) => {
              return openBlock(), createElementBlock("div", { key: index }, toDisplayString(item.title), 1);
            }), 128))
          ]),
          createElementVNode("div", _hoisted_12, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(data), (item, index) => {
              return openBlock(), createElementBlock("div", {
                key: index,
                class: "border",
                style: normalizeStyle(isHovered.value == index ? { ...unref(hoverStyle) } : null),
                onMouseover: ($event) => isHovered.value = index,
                onMouseout: _cache[2] || (_cache[2] = ($event) => isHovered.value = -1)
              }, [
                _hoisted_14,
                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(columns), (jtem, jndex) => {
                  return openBlock(), createElementBlock("div", {
                    key: jndex,
                    title: item[jtem.key]
                  }, [
                    jtem.render ? (openBlock(), createBlock(unref(Render), {
                      key: 0,
                      row: item,
                      column: jtem,
                      index,
                      render: jtem.render
                    }, null, 8, ["row", "column", "index", "render"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                      createTextVNode(toDisplayString(item[jtem.key]), 1)
                    ], 64))
                  ], 8, _hoisted_15);
                }), 128))
              ], 44, _hoisted_13);
            }), 128))
          ])
        ])
      ]);
    };
  }
});
var _ETableSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-665fb946"]]);
export { _ETableSearch as default };
