<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/safeComponents/BlockCom.vue
 * @Date: 2022-07-27 09:52:02
 * @Description: 大屏模块组件用于加载组件
 * @LastEditTime: 2023-09-01 15:30:03
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { reactive, ref, onMounted, watch, unref, computed, defineProps, defineAsyncComponent } from 'vue'
import BlockHeader from "../../../views/screen/SafeComponents/BlockHeader.vue";

interface BlockHeaderProps {
  name: string;
  unit?: string;
}

const { name = "", unit } = defineProps<BlockHeaderProps>();

const getComponentName = {
  告警事件TOP10: "SecurityEventTop10",
  告警事件影响企业TOP10: "NetEventCompanyTop10",
  总体分布: "OverallDistribution",
  告警事件影响IP资产TOP10: "NetEventScopeTop10",
  告警事件攻击次数TOP10: "NetEventAttackTop10",
  总体趋势: "OverallTrend",
  总体数量情况: "OverallQuantity",
  告警事件威胁等级分布: "NetEventLevel",
};

const getComponentInstance = computed(() => {
  const modules = {
    BlockHeader,
    SecurityEventTop10: defineAsyncComponent(
      () => import("./SecurityEventTop10.vue")
    ),
    NetEventCompanyTop10: defineAsyncComponent(
      () => import("./NetEventCompanyTop10.vue")
    ),
    OverallDistribution: defineAsyncComponent(
      () => import("./OverallDistribution.vue")
    ),
    NetEventScopeTop10: defineAsyncComponent(
      () => import("./NetEventScopeTop10.vue")
    ),
    NetEventAttackTop10: defineAsyncComponent(
      () => import("./NetEventAttackTop10.vue")
    ),
    OverallTrend: defineAsyncComponent(
      () => import("./OverallTrend.vue")
    ),
    OverallQuantity: defineAsyncComponent(
      () => import("./OverallQuantity.vue")
    ),
    NetEventLevel: defineAsyncComponent(
      () => import("./NetEventLevel.vue")
    ),
  };
  const getName = getComponentName[`${name}`];
  return modules[getName];
});
</script>

<template>
  <div class="custom-screen-block">
    <BlockHeader :name="name" :unit="unit"></BlockHeader>
    <component :is="getComponentInstance"></component>
  </div>
</template>
