<template>
  <div class="warning-list scroll-list">
    <div v-show="dataList.length>0" @click="getItem(item)" :key="i" v-for="(item,i) in dataList"

         :data-index="i"
         class="warning-list-box animate__animated">
      <div :data-index="i" class="warning-list-box-title">{{ item.title }}</div>
      <div :data-index="i" :title="item.info" class="warning-list-box-info">{{ item.info }}</div>
<!--      <div :data-index="i" class="warning-list-box-date">{{ item.time }}</div>-->
    </div>
    <div class="d-flex align-items-center is-justify-space-center" v-show="dataList.length === 0">
      <i class="el-icon-warning-outline"></i><span>暂无数据</span>
    </div>
  </div>
</template>
<script lang="ts">
import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';

@Component
export default class WarningListComponent extends Vue {
  //传入的报警信息列表
  @Prop({default: []}) dataList!: any[];
  //监听报警信息列表数据变化
  @Watch('dataList', {immediate: false, deep: true})
  onChangeValue(newVal: any, oldVal: any) {
    if (newVal.length === oldVal.length) return
    this.$nextTick(() => {
      const dom: any = document.querySelector('.warning-list-box')
      dom?.classList.remove('animate__fadeInLeft')
      setTimeout(() => {
        dom?.classList.add('animate__fadeInLeft')
      },)
      setTimeout(()=>{
        dom?.classList.remove('animate__fadeInLeft')
      },1000)
    })
  }
  //2个对象数组对比获得差异项
  getArrDifference(arr1, arr2) {
    let e = arr1.filter(i => arr2.some(j => j.id === i.id))
    let f = arr1.concat(arr2).filter(v => e.some(n => n.id !== v.id))
    return f
  }
  //报警级别对应class
  warningBgMap: any = {
    '1': 'red-warning-bg',
    '2': 'yellow-warning-bg',
    '3': 'blue-warning-bg',
  }
  //监听点击事件
  @Emit('getItem')
  getItem(item) {
    // console.log(item)
    // return item
  }
  mounted() {
/*    let dom = document.querySelector('div.warning-list') as any
    const self = this as any
    dom.addEventListener('click',function (e) {
      console.log(e.target.dataset.index)
      let i = e.target.dataset.index
      console.log(self.dataList[i])
      self.getItem(self.dataList[i])
    })*/
  }
  // warning-list-box

}
</script>
<style lang="scss" scoped>

//滚动条样式
@mixin scrollStyle($width) {
  &::-webkit-scrollbar {
    width: $width !important;
    height: 100% !important;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
    background: #ffffff;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: transparent;
  }
}

.warning-list {
  height: 100%;
  overflow-y: auto;
  @include scrollStyle(2px);

  &-box {
    width: 330px;
    height: 90px;
    padding: 10px 24px;
    cursor: pointer;
    margin-bottom: 10px;
    border-left: 4px solid #7FB0FF;
    background-color: rgba(127, 176, 255, 0.2);

    &-title {
      font-size: 14px;
      color: #E8E8E8;

    }

    &-info {
      font-size: 12px;
      color: #E8E8E8;
      margin: 8px 0;
      //width: 216px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;

    }

    &-date {
      font-size: 12px;
      color: #E8E8E8;
    }
  }

  .red-warning-bg {
    background: url("@/assets/img/red-warning-bg.png") no-repeat;
  }

  .yellow-warning-bg {
    background: url("@/assets/img/yellow-warning-bg.png") no-repeat;
  }

  .blue-warning-bg {
    background: url("@/assets/img/blue-warning-bg.png") no-repeat;
  }
}


</style>
