<template>
  <div id="alermList">
   <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">最新报警信息</span>
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>
       <!-- <div class="row2" style="margin-top: 20px;">
        <div class="type">#类型</div>
        <div class="car-no">车号</div>
        <div class="time">时间</div>
        <div class="speed">车速</div>
      </div>

      <div class="row1" :class="index%2==0 ? 'row1':' row2'"  v-for="(item,index) in alermList">
        <div class="type">
          <img :src="item.icon"/>
        {{item.alarmTypeName}}</div>
        <div class="car-no">{{item.carCode}}</div>
        <div class="time">{{item.createDate1}}</div>
        <div class="speed">{{item.speed}}km/h</div>
      </div> -->
      <div class="d-flex jc-center body-box">
        <dv-scroll-board :config="config" style="width:100%;height:300px"/>
      </div>
     
  </div>
</template>
<script>
// import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
export default {
  data() {
    return {
      config: {
        header: [ "类型","车号","时间", "车速"],
        data: [],
        rowNum: 7, //表格行数
        headerHeight: 45,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: false,
        columnWidth: [280,150,120],
        align: ["left"]
      }
    }
    
  },
  components: {
  },
  props:{
      cdata: {
      type: Array,
      default: () => ([])
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.config.data=[];
        for(var i=0;i<newData.length;i++){
          var item = newData[i];
          if(item.dataType== '1'){
              item.icon = 'image/adas3_lldw.png';
          }else if(item.dataType =='2'){
              item.icon = 'image/adas4_rldw.png';
          }else if(item.dataType =='3'){
              item.icon = 'image/adas6_hmw.png';
          }else if(item.dataType =='4'){
              item.icon = 'image/adas1_pcw.png';
          }else if(item.dataType =='5'){
              item.icon = 'image/adas7_ufcw.png';
          }else if(item.dataType =='5_1'){
              item.icon = 'image/adas8_vb.png';
          }else if(item.dataType =='6_1'){
              item.icon = 'image/adas2_fcw.png';
          }else if(item.dataType =='6_2'){
              item.icon = 'image/adas2_fcw.png';
          }else if(item.dataType =='6_3'){
              item.icon = 'image/adas2_fcw.png';
          }else if(item.dataType =='8'){
              item.icon = 'image/adas2_fcw.png';
          }else if(item.dataType =='10'){
              item.icon = 'image/adas5_sli.png';
          }else if(item.dataType =='12'){
              item.icon = 'image/adas2_fcw.png';
          }

          item.createDate1 = this.friendlyFormatTime(item.createDate);
          var d = [];
          d.push('<img src="'+item.icon+'"/>'+item.alarmTypeName);
          d.push(item.carCode+"");
          d.push(item.createDate1+"");
          d.push(item.speed+"km/h");
          this.config.data.push(d);
        }
        // console.log("===alermList============")
        // console.log(newData);
        // console.log(this.config.data)
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
  },
  methods: {
    friendlyFormatTime(stringTime) {
      let minute = 1000 * 60;
      let hour = minute * 60;
      let day = hour * 24;
      let week = day * 7;
      let month = day * 30;
      let time1 = new Date().getTime(); //当前的时间戳
      let time2 = (new Date(stringTime)).getTime(); //指定时间的时间戳
      let time = time1 - time2;
     
      let result = null;
      if (time < 0) {
          result = "--";
      } else if (time / month >= 1) {
          result = parseInt(time / month) + "月前";
      } else if (time / week >= 1) {
          result = parseInt(time / week) + "周前";
      } else if (time / day >= 1) {
          result = parseInt(time / day) + "天前";
      } else if (time / hour >= 1) {
          result = parseInt(time / hour) + "小时前";
      } else if (time / minute >= 1) {
          result = parseInt(time / minute) + "分钟前";
      } else {
          result = "刚刚";
      }
      return result;
    }
  }
}
</script>
<style lang="scss" scoped>
  $box-width: 100%;
  $box-height: 410px;

 #alermList {
   padding: 16px;
   height: $box-height;
   width: $box-width;
   padding:15px;

   .dv-dec-3{
    width:200px;
   }
  .row1,.row2{
    display: flex;
    justify-content: space-between;
    height:50px;
    line-height:40px;
    padding:0 15px;
    .type{
      display: flex;
      align-items: center;
      width:220px;
      text-align:left;
      font-size: 16px;
      font-weight: 600;
      color: #E5E6EB;

      img{
        width:32px;
        height:32px;
      }
    }
    .car-no{
      display: flex;
      align-items: center;
      width:190px;
      font-size: 16px;
      font-weight: 600;
      color: #2060D4;
    }
    .time{
      display: flex;
      align-items: center;
      width:100px;
      font-size: 16px;
      font-weight: 600;
      color: #EE6666;
    }
    .speed{
      display: flex;
      align-items: center;
      text-align:right;
      font-size: 16px;
      font-weight: 600;
      color: #2060D4;
      width:80px
    }
  }
  .row2{
    background-color:#171d32;
  }

}
</style>