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

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

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

const getComponentName = {
  今日攻击态势: "realTimeAttackSituation",
  攻击事件TOP10: "attackTypeDistribution",
  "攻击源 IP TOP5": "attackSourceIpTop5",
  今日攻击趋势: "realTimeAttackAccessSituation",
  攻击者地域TOP3: "attackTopThree",
};

const getComponentInstance = computed(() => {
  const modules = {
    BlockHeader,
    realTimeAttackSituation: defineAsyncComponent(
      () =>
        import("./realTimeAttackSituation.vue")
    ),
    attackTypeDistribution: defineAsyncComponent(
      () => import("./attackTypeDistribution.vue")
    ),
    attackSourceIpTop5: defineAsyncComponent(
      () => import("./attackSourceIpTop5.vue")
    ),
    realTimeAttackAccessSituation: defineAsyncComponent(
      () =>
        import(
          "./realTimeAttackAccessSituation.vue"
        )
    ),
    attackTopThree: defineAsyncComponent(
      () => import("./attackTopThree.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>
