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

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

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

const getComponentName = {
  威胁风险总览: "SecurityThreatEventAnalysis",
  "僵尸/木马事件趋势": "TrojanSecurityIncidentTrends",
  蠕虫事件趋势: "WormSecurityIncidentTrends",
  威胁风险行业分布: "allWalksSecurity",
  最新威胁风险: "LatestSecurityEvents",
  威胁风险事件: "DistributionSecurityIncidents",
};

const getComponentInstance = computed(() => {
  const modules = {
    BlockHeader,
    SecurityThreatEventAnalysis: defineAsyncComponent(
      () =>
        import(
          "./SecurityThreatEventAnalysis.vue"
        )
    ),
    TrojanSecurityIncidentTrends: defineAsyncComponent(
      () =>
        import(
          "./TrojanSecurityIncidentTrends.vue"
        )
    ),
    WormSecurityIncidentTrends: defineAsyncComponent(
      () =>
        import("./WormSecurityIncidentTrends.vue")
    ),
    LatestSecurityEvents: defineAsyncComponent(
      () => import("./LatestSecurityEvents.vue")
    ),
    DistributionSecurityIncidents: defineAsyncComponent(
      () =>
        import(
          "./DistributionSecurityIncidents.vue"
        )
    ),
    allWalksSecurity: defineAsyncComponent(
      () => import("./allWalksSecurity.vue")
    ),
  };
  const getName = getComponentName[`${name}`];
  return modules[getName];
});
</script>

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

<style lang="scss" scoped>
.custom-screen-block {
  position: relative;
}
</style>
