<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/BlockCom.vue
 * @Date: 2022-07-27 09:52:02
 * @Description: 大屏模块组件用于加载组件
 * @LastEditTime: 2023-09-01 15:19:48
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import BlockHeader from '../../../views/screen/components/BlockHeader.vue'
import { defineAsyncComponent, defineProps, computed } from 'vue'

interface BlockHeaderProps {
  name: string,
}

const { name = '' } = defineProps<BlockHeaderProps>()

const getComponentName = {
  '资产数据': 'AssetData',
  '所属行业风险资产分布TOP10': 'IndustryAssetAllocation',
  '企业风险资产分布TOP10': 'CompanyAssetAllocation',
  '漏洞数据': 'VulnerabilityData',
  '高频漏洞TOP10': 'HighFrequencyVulnerability',
  '实时告警': 'RealTimeAlarm'
}

const getComponentInstance = computed(() => {
  const modules = {
    BlockHeader,
    AssetData: defineAsyncComponent(() => import('./AssetData.vue')),
    IndustryAssetAllocation: defineAsyncComponent(() => import('./IndustryAssetAllocation.vue')),
    CompanyAssetAllocation: defineAsyncComponent(() => import('./CompanyAssetAllocation.vue')),
    VulnerabilityData: defineAsyncComponent(() => import('./VulnerabilityData.vue')),
    HighFrequencyVulnerability: defineAsyncComponent(() => import('./HighFrequencyVulnerability.vue')),
    RealTimeAlarm: defineAsyncComponent(() => import('./RealTimeAlarm.vue')),
  }
  const getName = getComponentName[`${name}`]
  return modules[getName]
})
</script>

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