<script lang="ts" setup name="SocketModal">
import { defineExpose, defineProps, ref } from 'vue'
defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const dialogTableVisible = ref(false)
const number = ref(-1)
function initDialog() {
  number.value = -1
  dialogTableVisible.value = true

  const timer = setInterval(() => {
    console.log(number.value)
    number.value++

    if (number.value >= 3) {
      clearInterval(timer)
      closeDialog()
    }
  }, 1000)
}

function closeDialog() {
  dialogTableVisible.value = false
  number.value = -1
}

defineExpose({
  initDialog,
  closeDialog,
})
</script>

<template>
  <el-dialog
    v-if="dialogTableVisible"
    v-model="dialogTableVisible" style="z-index: 2222;" width="600px" top="5vh" title="告警消息提醒"
    :close-on-click-modal="false" append-to-body
  >
    <el-descriptions title="监控信息" border :column="2" style="margin-bottom: 20px;">
      <el-descriptions-item label="监控点名称">
        {{ data.monitorName }}
      </el-descriptions-item>
      <el-descriptions-item label="告警类型">
        {{ data.deviceStatusName }}
      </el-descriptions-item>
      <el-descriptions-item label="甲烷浓度">
        {{ data.concentration }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="水平角度">
        {{ data.alarmDirection }}
      </el-descriptions-item>
      <el-descriptions-item label="垂直角度">
        {{ data.alarmPitch }}
      </el-descriptions-item> -->
      <el-descriptions-item label="告警时间">
        {{ data.alarmTime }}
      </el-descriptions-item>
      <el-descriptions-item label="相似度">
        {{ data.alarmValue }}
      </el-descriptions-item>
    </el-descriptions>
    <el-image class="image-wrap" :src="data.url">
      <template #error>
        <div class="image-slot">
          <el-icon><icon-picture /></el-icon>
        </div>
      </template>
    </el-image>
  </el-dialog>
</template>

<style scoped>
.image-wrap {
  width: 100%;
  height: 400px;
}
</style>