<template>
  <msg-card class="item item-warningData" title="疑似事故">
    <vue-seamless-scroll
      class="warningMsg"
      :data="warningData"
      :class-option="optionSetting"
    >
      <li v-for="(item, index) in warningData" :key="index">
        <div class="warningItem">
          <div class="left-type" :class="typeClassMap[item.eventType]">
            <span>{{ item.eventType }}</span>
          </div>
          <div class="message" :class="`border-${typeClassMap[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"
                >时长： {{ item.duration }}min</span
              >
              <span :title="`事件来源:` + item.source"
                >事件来源： {{ item.source }}</span
              >
            </div>
          </div>
        </div>
      </li>
    </vue-seamless-scroll>
  </msg-card>
</template>

<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import "vue-seamless-scroll";
import { getData } from "../../../dao/requestByUrl.js";
export default {
  components: { msgCard },
  data() {
    return {
      // 告警信息
      warningData: [],
      typeClassMap: {
        疑似事故: "acci",
        轻微拥堵: "crod",
        中度拥堵: "crodz",
      },
    };
  },
  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)
      };
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let req = await fetch("DATA.json");
      let allData = await req.json();
      let api = allData.intersectionGroups.apis.warningData.url;
      getData(api).then(res=>{
        this.warningData = res.content;
      })
    },
  },
};
</script>

<style lang="less" scoped>
.item-warningData {
  color: white;

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

  .warningItem {
    align-items: center;
    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: #3c1b25;
        border: 1px solid #3c1b25;
        color: #ff666b;
      }

      .crod {
        background-color: #061b47;
        border: 1px solid #061b47;
        color: #2a82e4;
      }

      .crodz {
        background-color: #522e1c;
        border: 1px solid #522e1c;
        color: #f69d1d;
      }
      .border-acci {
        border: 1px solid #3c1b25;
      }

      .border-crod {
        border: 1px solid #061b47;
      }

      .border-crodz {
        border: 1px solid #522e1c;
      }

    .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: 8px;
    }

    .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 {
        height: 22px;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 12px;
        display: flex;
        align-items: center;
        color: rgba(155, 177, 212, 1);

        span {
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 33.3%;
        }
      }
    }
  }
}
</style>
