<script lang="ts" setup>
  import { computed } from 'vue';
  import { PackagesCategoryEnum } from '../../../packages/index.type';
  import { SelectedWidgetKeys } from '../../index.type';
  import { Alert } from 'ant-design-vue';

  const props = defineProps<{
    selectWidgetKeys: SelectedWidgetKeys;
  }>();

  const alert = {
    [PackagesCategoryEnum.MAP]: [
      '地图组件，需绑定两个数据源，且数据源为同一设备。第一数据源为经度，第二数据源为纬度，否则地图组件不能正常显示。',
    ],
    [PackagesCategoryEnum.CONTROL]: [
      '控制组件数据源为TCP产品,则其控制命令下发为TCP产品 物模型=>服务，且不具备状态显示功能.',
      '控制组件数据源为非TCP产品,则其控制命令下发为产品 物模型=>属性，且具备状态显示功能.',
    ],
  };

  const getMessage = computed(() => {
    const { selectWidgetKeys } = props;
    const { categoryKey } = selectWidgetKeys;
    return alert[categoryKey];
  });
</script>

<template>
  <Alert v-if="getMessage" type="info" show-icon>
    <template #description>
      <div v-for="(item, index) in getMessage" :key="index">{{ item }}</div>
    </template>
  </Alert>
</template>