<template>
  <msg-card class="item item-warningData" title="告警信息">
    <div class="full-w full-h" v-loading="alarmLoading"
         element-loading-spinner="el-icon-loading"
         element-loading-text="数据加载中..."
         element-loading-background="rgba(3, 11, 25, 0.8)">
      <vue-seamless-scroll
          class="warningMsg"
          :data="warningData"
          :class-option="optionSetting"
          v-show="warningData.length"
      >
        <li
            v-for="(item, index) of warningData"
            :key="index"
            @mouseover="addWarningPopup(item)"
            @mouseout="delWarningPopup(item)"
        >
          <div class="warningItem">
            <div
                class="left-type"
                :class="[
                  { acci: item.eventType === '疑似事故' },
                  { crod: item.eventType === '轻微拥堵' },
                  { crodz: item.eventType === '中度拥堵' },
                  { crodzz: item.eventType === '重度拥堵' },
                ]"
            >
              <span>{{ item.eventType }}</span>
            </div>
            <div
                class="message"
                :class="[
                  { 'acci-border': item.eventType === '疑似事故' },
                  { 'crod-border': item.eventType === '轻微拥堵' },
                  { 'crodz-border': item.eventType === '中度拥堵' },
                  { 'crodzz-border': item.eventType === '重度拥堵' },
                ]"
            >
              <div class="message-title">
                <i class="icon-location"></i>
                <div class="right-title">
                  {{ item.placeDesc }}
                </div>
              </div>
              <div class="message-detail">
                  <span :title="`发生时间:` + item.happenTime"
                  >发生时间： {{ item.happenTime }}</span
                  >
                <span :title="`时长:` + item.duration + 'min'"
                >时长： {{ item.duration }}min</span
                >
                <span :title="`事件来源:` + item.source"
                >事件来源： {{ item.source }}</span
                >
              </div>
            </div>
          </div>
        </li>
      </vue-seamless-scroll>
      <div class="emptyText" v-show="!warningData.length">
        <img alt=""
            :src="require('../../../../assets/images/holo/svg/noWarning.svg')"
        />
        <div>暂无告警信息</div>
      </div>
    </div>
  </msg-card>
</template>

<script>
import msgCard from "@/components/Standard/msg-card.vue";
import vueSeamlessScroll from 'vue-seamless-scroll'
import {eventAlarm} from "@/dao/situation";

export default {
  components: {msgCard, vueSeamlessScroll},
  name: 'warningMsg',
  computed: {
    optionSetting() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 默认值0是无缝不停止的滚动
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      warningData: [],
      alarmLoading: true,
      init: true,
      lastWarningData:[]
    }
  },
  mounted(){
    this.getEventAlarm()
  },
  methods:{
    addWarningPopup(item) {
      this.$emit("addWarningPopup", item, {type: "hover"});
    },
    delWarningPopup(item) {
      this.$emit("delWarningPopup", item.eventSerialNumber);
    },
    diff(oldData, newData) {
      // id 只在 newData 中存在且不在 oldData 中存在的即为 add
      return newData.filter(
          (e) => !oldData.find((c) => c.startTime === e.startTime)
      );
    },
    getEventAlarm() {
      eventAlarm().then((res) => {
        this.alarmLoading = false
        // console.log("事件告警", res.content);
        this.warningData = res.content;
        if (!this.init) {
          if (this.lastWarningData.length !== res.content.length) {
            // 最新发生的告警信息
            let newMegs = this.diff(this.lastWarningData, this.warningData);
            for (let item of newMegs) {
              this.$emit("addWarningPopup", item, {type: "auto"});
            }
          }
        }
        this.lastWarningData = res.content;
        this.init = false;
      });
    },
  }
}
</script>

<style lang="less" scoped>
.item-warningData {
  .emptyText{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img{
      width: 150px
    }
  }
  color: white;

  .warningMsg {
    overflow: hidden;
    height: 100%;
  }

  .warningItem {
    height: 46px;
    align-items: center;
    cursor: pointer;
    margin-bottom: 6px;
    display: flex;
    width: 100%;

    .left-type {
      height: 46px;
      width: 46px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        display: inline-block;
        width: 46px;
        padding: 5px;
        text-align: center;
      }
    }

    .acci {
      background-color: rgba(24, 144, 255, 0.4);
      color: rgba(24, 144, 255, 1);
    }

    .crod {
      background-color: rgba(255, 235, 59, 0.4);
      color: rgba(255, 235, 59, 1);
    }

    .crodz {
      background-color: rgba(255, 141, 26, 0.4);
      color: rgba(255, 141, 26, 1);
    }

    .crodzz {
      background-color: rgba(227, 5, 5, 0.4);
      color: rgba(227, 5, 5, 1);
    }

    .acci-border {
      border: 1px solid rgba(24, 144, 255, 0.4);
    }

    .crod-border {
      border: 1px solid rgba(255, 235, 59, 0.4);
    }

    .crodz-border {
      border: 1px solid rgba(255, 141, 26, 0.4);
    }

    .crodzz-border {
      border: 1px solid rgba(227, 5, 5, 0.4);
    }

    .icon-location {
      display: inline-block;
      width: 15px;
      height: 15px;
      background: url("../../../../assets/images/holo/location-icon.png");
      background-size: 100% 100%;
      text-align: center;
      margin-right: 6px;
    }

    .right-title {
      display: flex;
    }

    .message {
      padding: 0 0 0 10px;
      // border: 1px solid rgba(60, 27, 37, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: calc(100% - 30px);
      font-size: 14px !important;

      .message-title {
        display: flex;
        align-items: center;
        height: 22px;
      }

      .message-detail {
        display: flex;
        align-items: center;
        height: 22px;
        width: 100%;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 12px;
        color: rgba(155, 177, 212, 1);

        span {
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        span:first-child {
          width: 32%;
        }

        span:nth-child(2) {
          width: 26%;
        }

        span:nth-child(3) {
          width: 42%;
        }
      }
    }
  }
}
</style>