<!--
 * @Description: 报警弹窗
 * @Author: 王晓颖
 * @Date: 2022-05-12 17:17:01
 -->
<template>
  <div class="alarm-window">
    <div class="alarm-header">
      {{ xlInfo.length>0?xlInfo[0].valveCode: '' }}
    </div>
    <div class="alarm-body">
      <div >编号： {{ xlInfo.map(item => item.blockCode).join() }}</div>
      <div>位置： {{ xlInfo.map(item => item.blockName).join() }}</div>
    </div>
    <el-button type="primary" @click="showPosition">查看关阀影响区域</el-button>
  </div>
</template>

<script>
export default {
  name: 'xlInfoWindow',
  props: {
    xlInfo: {
      type: Array,
      required: true
    }
  },
  methods: {
    showPosition() {
      this.$emit("area", this)
    }
  }
}
</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>