<template>
  <Modal
    visible
    title="详情"
    okText="确定"

    cancelText="取消"
    :width="1000"
    @ok="closeModal"
    @cancel="closeModal"
  >
    <Descriptions bordered :column="2">
      <DescriptionsItem v-if="props.data.targetType === 'device'" label="告警设备" :span="1">{{
        props.data?.targetName || ''
      }}</DescriptionsItem>
      <DescriptionsItem v-if="props.data.targetType === 'device'" label="设备ID" :span="1">{{
        props.data?.targetId || ''
      }}</DescriptionsItem>
      <DescriptionsItem label="告警名称" :span="1">{{ props.data?.alarmConfigName }}</DescriptionsItem>
      <DescriptionsItem label="告警时间" :span="1">{{
        dayjs(data?.alarmTime).format('YYYY-MM-DD HH:mm:ss')
      }}</DescriptionsItem>
      <DescriptionsItem label="告警级别" :span="1">
        <Tooltip
          placement="topLeft"
          :title="
            (Store.get('default-level') || []).find((item: any) => item?.level === data?.level)?.title ||
            props.data?.level
          "
        >
          <Ellipsis>
            <span>
              {{
                (Store.get('default-level') || []).find((item: any) => item?.level === data?.level)?.title ||
                props.data?.level
              }}
            </span>
          </Ellipsis>
        </Tooltip>
      </DescriptionsItem>
      <DescriptionsItem label="告警说明" :span="1">
        <Ellipsis style="width: calc(100% - 20px)">
          <span>
            {{ description || '' }}
          </span>
        </Ellipsis>
      </DescriptionsItem>
      <DescriptionsItem label="告警流水" :span="2"
        >
<!--        <div style="max-height: 500px; overflow-y: auto">-->
<!--          <JsonViewer :value="JSON.parse(data?.alarmInfo || '{}')" :expand-depth="5" /></div>-->
      </DescriptionsItem>
    </Descriptions>
  </Modal>
</template>

<script lang="ts" setup>
  import dayjs from 'dayjs';
  // import JsonViewer from 'vue-json-viewer';
  import { defineProps } from 'vue';
  import { Modal, Descriptions, DescriptionsItem, Ellipsis, Tooltip } from 'linker-ui-components';

  const props = defineProps({
    data: Object,
    description: String
  });
  const emit = defineEmits(['close']);
  const closeModal = () => {
    emit('close');
  };
</script>
<style lang="less" scoped></style>
