import { defineComponent, ref, toRefs, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, createVNode, withCtx } from "vue";
import _sfc_main$1 from "../../../NComponents/configCommon/refConfig.mjs";
import img1 from "./images/img1.mjs";
import img1Default from "./images/img1_1.mjs";
import img2 from "./images/img2.mjs";
import img2Default from "./images/img2_1.mjs";
import img3 from "./images/img3.mjs";
import img3Default from "./images/img3_1.mjs";
import bg from "./images/bg.mjs";
import bgActive from "./images/bg_active.mjs";
import searchIcon from "./images/search.mjs";
import boxBG from "./images/boxBG.mjs";
import demo from "./images/1688633308407.mjs";
import yellowCircle from "./images/yellowCircle.mjs";
import grayCircle from "./images/grayCircle.mjs";
import videoBgActive from "./images/videoBgActive.mjs";
import videobg from "./images/videobg.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: "videoList" };
const _hoisted_2 = { class: "t2" };
const _hoisted_3 = { class: "EComponent21VIdeo" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "t3" };
const _hoisted_6 = { class: "" };
const _hoisted_7 = { class: "showHeader" };
const _hoisted_8 = { class: "t4" };
const _hoisted_9 = ["onClick"];
const _hoisted_10 = { class: "showHeader" };
const __default__ = defineComponent({ name: "EComponent21VIdeo" });
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    chartConfig: {
      type: Object,
      required: true,
      default: () => {
        return {
          option: {
            list: [
              {
                iconConfigDefault: {
                  imgSrc: img1Default
                },
                iconConfigActive: {
                  imgSrc: img1
                },
                textConfig: {
                  text: "\u5DE5\u5730\u76D1\u63A7"
                }
              },
              {
                iconConfigDefault: {
                  imgSrc: img2Default
                },
                iconConfigActive: {
                  imgSrc: img2
                },
                textConfig: {
                  text: "\u8F66\u8F86\u76D1\u63A7"
                }
              },
              {
                iconConfigDefault: {
                  imgSrc: img3Default
                },
                iconConfigActive: {
                  imgSrc: img3
                },
                textConfig: {
                  text: "\u6D88\u7EB3\u76D1\u63A7"
                }
              }
            ],
            iconConfig: {
              width: 23,
              height: 23
            },
            titleCofingDefalult: {
              fontSize: 26,
              color: "RGBA(129, 129, 130, 1)"
            },
            titleCofingActive: {
              fontSize: 26,
              color: "rgba(255, 255, 255, 1)"
            },
            bgImageConfigDefault: {
              imgSrc: bg,
              width: 188,
              height: 53
            },
            bgImageConfigActive: {
              imgSrc: bgActive,
              width: 188,
              height: 53
            },
            searchConfig: {
              imgSrc: searchIcon,
              width: 59,
              height: 59
            },
            showVideoBgConfig: {
              imgSrc: boxBG,
              width: 957,
              height: 574
            },
            showVideoConfig: {
              imgSrc: demo,
              width: 937,
              height: 555
            },
            videolist: [
              {
                imgSrc: demo,
                text: "\u7403\u673A\u76D1\u63A7-48",
                address: "\u6210\u90FD\u5E02\u6B66\u4FAF\u533A\u5929\u4EC1\u5317\u4E8C\u8857",
                status: 0
              },
              {
                imgSrc: searchIcon,
                text: "\u7403\u673A\u76D1\u63A7-48",
                address: "\u6210\u90FD\u5E02\u6B66\u4FAF\u533A\u5929\u4EC1\u5317\u4E8C\u88572",
                status: 1
              },
              {
                imgSrc: bgActive,
                text: "\u7403\u673A\u76D1\u63A7-48",
                address: "\u6210\u90FD\u5E02\u6B66\u4FAF\u533A\u5929\u4EC1\u5317\u4E8C\u88573",
                status: 0
              }
            ],
            singleVideoConfig: {
              width: 286,
              height: 175
            },
            singleVideoBgConfigDefault: {
              width: 306,
              height: 195,
              imgSrc: videobg
            },
            singleVideoBgConfigActive: {
              width: 306,
              height: 195,
              imgSrc: videoBgActive
            },
            videotitleCofing: {
              fontSize: 28,
              color: "rgba(255, 255, 255, 0.6)"
            },
            statusConfig1: {
              imgSrc: yellowCircle,
              width: 20,
              height: 20
            },
            statusConfig0: {
              imgSrc: grayCircle,
              width: 20,
              height: 20
            }
          }
        };
      }
    }
  },
  setup(__props) {
    const props = __props;
    const active = ref(0);
    const videoActive = ref(0);
    const {
      list,
      titleCofingDefalult,
      titleCofingActive,
      bgImageConfigDefault,
      bgImageConfigActive,
      iconConfig,
      searchConfig,
      showVideoBgConfig,
      showVideoConfig,
      videotitleCofing,
      singleVideoBgConfigActive,
      singleVideoBgConfigDefault,
      singleVideoConfig,
      videolist,
      statusConfig1,
      statusConfig0
    } = toRefs(props.chartConfig.option);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("div", _hoisted_3, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (item, index) => {
              return openBlock(), createElementBlock("div", {
                onClick: ($event) => active.value = index
              }, [
                createVNode(_sfc_main$1, {
                  config: index == active.value ? unref(bgImageConfigActive) : unref(bgImageConfigDefault),
                  type: "bgImg",
                  class: "wrapper"
                }, {
                  default: withCtx(() => [
                    createVNode(_sfc_main$1, {
                      config: index == active.value ? { ...item.iconConfigActive, ...unref(iconConfig) } : { ...item.iconConfigDefault, ...unref(iconConfig) },
                      type: "img"
                    }, null, 8, ["config"]),
                    createVNode(_sfc_main$1, {
                      config: index == active.value ? { ...item.textConfig, ...unref(titleCofingActive) } : { ...item.textConfig, ...unref(titleCofingDefalult) },
                      type: "text"
                    }, null, 8, ["config"])
                  ]),
                  _: 2
                }, 1032, ["config"])
              ], 8, _hoisted_4);
            }), 256))
          ]),
          createVNode(_sfc_main$1, {
            class: "searchIcon",
            config: unref(searchConfig),
            type: "img"
          }, null, 8, ["config"])
        ]),
        createElementVNode("div", _hoisted_5, [
          createElementVNode("div", _hoisted_6, [
            createVNode(_sfc_main$1, {
              config: unref(showVideoBgConfig),
              type: "bgImg",
              class: "videoBox"
            }, {
              default: withCtx(() => [
                createElementVNode("div", _hoisted_7, [
                  createVNode(_sfc_main$1, {
                    class: "searchIcon",
                    config: {
                      ...unref(videotitleCofing),
                      text: unref(videolist)[videoActive.value].text
                    },
                    type: "text"
                  }, null, 8, ["config"]),
                  createVNode(_sfc_main$1, {
                    class: "searchIcon",
                    config: {
                      ...unref(videotitleCofing),
                      text: unref(videolist)[videoActive.value].address
                    },
                    type: "text"
                  }, null, 8, ["config"])
                ]),
                createVNode(_sfc_main$1, {
                  config: {
                    ...unref(showVideoConfig),
                    imgSrc: unref(videolist)[videoActive.value].imgSrc
                  },
                  type: "img"
                }, null, 8, ["config"])
              ]),
              _: 1
            }, 8, ["config"])
          ])
        ]),
        createElementVNode("div", _hoisted_8, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(videolist), (item, index) => {
            return openBlock(), createElementBlock("div", {
              key: index,
              onClick: ($event) => videoActive.value = index
            }, [
              createVNode(_sfc_main$1, {
                config: index == videoActive.value ? unref(singleVideoBgConfigActive) : unref(singleVideoBgConfigDefault),
                type: "bgImg",
                class: "t4list"
              }, {
                default: withCtx(() => [
                  createElementVNode("div", _hoisted_10, [
                    createVNode(_sfc_main$1, {
                      class: "searchIcon",
                      config: { ...unref(videotitleCofing), text: item.text },
                      type: "text"
                    }, null, 8, ["config"]),
                    createVNode(_sfc_main$1, {
                      config: item.status ? unref(statusConfig1) : unref(statusConfig0),
                      type: "img"
                    }, null, 8, ["config"])
                  ]),
                  createVNode(_sfc_main$1, {
                    config: { imgSrc: item.imgSrc, ...unref(singleVideoConfig) },
                    type: "img"
                  }, null, 8, ["config"])
                ]),
                _: 2
              }, 1032, ["config"])
            ], 8, _hoisted_9);
          }), 128))
        ])
      ]);
    };
  }
});
var _EComponent21VIdeo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-774bc130"]]);
export { _EComponent21VIdeo as default };
