<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 11:42:03
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-03-15 20:40:44
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\BlockCom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { computed, defineProps } from "vue";
import BlockHeader from "./BlockHeader.vue";
import { defineAsyncComponent } from "vue";

interface BlockHeaderProps {
  name: string;
}

const { name = "" } = defineProps<BlockHeaderProps>();
//组件名称
const getComponentName = {
  AssetsStatistics: "AssetsStatistics",
  AssetTypeDistribution: "AssetTypeDistribution",
  operatingSystemTypeAndNumberStatistics:
    "operatingSystemTypeAndNumberStatistics",
  openPortNum: "openPortNum",
  openServeNum: "openServeNum",
  componentTypeTop5: "componentTypeTop5",
  hostAssetsChange: "hostAssetsChange",
  portChange: "portChange",
};
//引入组件
const getComponentInstance = computed(() => {
  const modules = {
    BlockHeader,
    AssetsStatistics: defineAsyncComponent(
      () => import("./assetsStatistics.vue")
    ),
    AssetTypeDistribution: defineAsyncComponent(
      () => import("./assetTypeDistribution.vue")
    ),
    operatingSystemTypeAndNumberStatistics: defineAsyncComponent(
      () => import("./operatingSystemTypeAndNumberStatistics.vue")
    ),
    openPortNum: defineAsyncComponent(() => import("./openPortNum.vue")),
    openServeNum: defineAsyncComponent(() => import("./openServeNum.vue")),
    componentTypeTop5: defineAsyncComponent(
      () => import("./componentTypeTop5.vue")
    ),
    portChange: defineAsyncComponent(() => import("./portChange.vue")),
    hostAssetsChange: defineAsyncComponent(
      () => import("./hostAssetsChange.vue")
    ),
  };
  //根据name判断要显示的组件
  const getName = getComponentName[`${name}`];
  return modules[getName];
});
</script>

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