<template>
  <div class="alarm">
    <div class="alarm-title">历史告警</div>
    <div class="alarm-body">
      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
        <div class="seamless-item" v-for="(item,index) in listData" :key="index">
          <div>{{item.name}}</div>
          <div>{{item.type}}</div>
          <div>{{item.createTime}}</div>
          <div>
            <el-button  class="dealBtn" size="mini" @click="handlerAlarm(item)">处理</el-button>
          </div>
        </div>
      </vue-seamless-scroll>

    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'Alarm',
  props: ['alarmData'],
  data() {
    return {
      listData: []
    }
  },
  components: { vueSeamlessScroll },
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止
      }
    }
  },
  watch: {
    alarmData: {
      handler(val) {
        this.listData = val
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    handlerAlarm(row) {
      this.$emit('handlerAlarm', row)
    }
  }
}
</script>
<style lang='scss' scoped>
.alarm {
  margin-top: 10px;
  .alarm-title {
    background: #f4f5fa;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 14px;
    color: #212121;
  }
  .alarm-body {
    border: 1px solid #f0f1f2;
    .seamless-warp {
      overflow: hidden;
      height: 200px;
      .seamless-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        border-bottom: 1px solid #f0f1f2;
        > div {
          font-size: 13px;
          &:nth-child(-n+2) {
            color: #d9001b;
          }
        }
        .dealBtn{
          color: rgba(71, 158, 241, 1);
          border-color: rgba(71, 158, 241, 1);
          padding: 4px 8px;
        }
      }
    }
  }
}
</style>
