<!--
 * @Description: 报警弹窗
 * @Author: 王晓颖
 * @Date: 2022-05-12 17:17:01
 -->
<template>
  <div class="alarm-window">
    <div class="alarm-header">
      <svg-icon icon-class="alarm-red" />
      {{ alarmInfo.wellCode }}
    </div>
    <div class="alarm-body">
      <div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
        <div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
        <div>设备编号：<span>{{ alarm.devcode }}</span></div>
      </div>
      <el-divider />
      <div v-show="alarmInfo.wellTypeName">
        点位类型：{{ alarmInfo.wellTypeName }}
      </div>
      <div>权属单位：{{ alarmInfo.deptName }}</div>
      <div>详细地址：{{ alarmInfo.position }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlarmInfoWindow',
  props: {
    alarmInfo: {
      type: Object,
      required: true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .alarm-window{
    max-width: 270px;
    /*background-color: #ffeaf1;*/
    .alarm-header {
      padding: 10px 10px 5px 10px;
      line-height: 30px;
      color: red;
      font-weight: bold;
      /*background-color: #ffecec;*/
    }
    .alarm-body{
      padding: 5px 10px 10px 10px;
      line-height: 23px;
      font-size: 14px;
      .alarm-red{
        color: #ff0000;
      }
    }
    .el-divider--horizontal{
      margin: 5px 0;
    }
  }
</style>