<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]: [
      '1、绑定数据源为结构体时，可以自行选择结构体里的属性作为经纬度',
      '2、绑定数据源为非结构体时，第一数据源为经度，第二数据源为纬度，且数据源为同一设备，并同时上报。否则地图组件不能正常显示。',
    ],
  };

  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>