<!--
 * @Description: 报警列表
 * @Author: 王晓颖
 * @Date: 2022-05-13
 -->
<template>
  <div v-if="alarmWells.length>0" class="map-alarm-div">
    <div class="map-alarm-div-header">
      告警列表
      <span class="icon-right" @click="tableShow=!tableShow">
          <i v-if="tableShow" class="el-icon-arrow-up" />
          <i v-else class="el-icon-arrow-down" />
        </span>
    </div>
    <transition name="el-collapse-transition">
      <el-scrollbar
        v-show="tableShow"
        :style="{visibility: tableShow?'visible':'hidden'}"
        :class="{moredatascollor:alarmList.length>6}"
        :native="false"
      >
        <el-table
          :data="alarmList"
          class="alarm-list-table"
          border
          @row-click="rowClick"
        >
          <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row[column.value] }}
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "AlarmList",
    props:{
      show: {
        type: Boolean,
        default: true
      }, // 是否显示
      alarmList:{
        type: Array,
        default: ()=>[]
      } //报警列表
    },
    computed(){
      tableShow(){
        return this.show && this.alarmList.length>0
      }
    },
    data(){
      return {
        columns: [
          {
            text: '井编号',
            value: 'wellCode',
            width: 100,
            align: 'center'
          },
          {
            text: '设备编号',
            value: 'devcode',
            width: 120,
            align: 'center'
          },
          {
            text: '告警原因',
            value: 'alarmContent',
            align: 'center',
            width: 120
          },
          {
            text: '时间',
            value: 'alarmTime',
            width: 180,
            align: 'center'
          }
        ], // 告警列表显示列
        tableIcon: 'el-icon-arrow-up',
      }
    },
    methods:{
      rowClick(row, column, event){
        this.$emit('row-click',row, column, event)
      }
    }

  }
</script>

<style scoped>
  // 报警列表
  .map-alarm-div{
    position: absolute;
    z-index: 100;
    background-color: rgba(255, 234, 241,0.8);
    top: 60px;
    left: 10px;
  .map-alarm-div-header{
    line-height: 40px;
    width: 504px;
    padding-left: 10px;
  .icon-right{
    position: absolute;
    right: 15px;
  }
  .icon-right:hover{
    color: #409EFF;
    cursor: pointer;
  }
  }
  .el-scrollbar {
    /*height: 200px;*/
    width: 100%;
  }
  .moredatascollor{
    height: 200px;
  }
  .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0px !important;
  }

  .el-table th{
    /*background-color: rgba(255, 229, 230, 0.8);*/
    padding: 7px 0px;
  }
  .el-table td{
    /*background-color: rgba(255, 234, 241, 0.8);*/
    padding: 5px 0px;
    /*line-height: 1;*/
  }
  .el-table td:hover{
    /*background-color: rgba(255, 234, 241, 0.8);*/
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  }
</style>