<template>
  <div class="timelinebox">
    <div v-for="(item,index) in dataList" :key="index" class="timeLinecard">
      <div class="timeLineradio"></div>
      <div class="timeLineTime">{{item.datetime|dataTimeFilter}}</div>
      <div class="timelinetimecard" v-for="(el,index2) in item.dataList" :key="index2">
        <slot :el="el"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rtTimeLine2',
  props: {
    dataList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      tabValue: 0
    };
  },
  filters: {
    dataTimeFilter(value) {
      let d = new Date();
      let TodayStr = d.getFullYear() + '.' + (d.getMonth() + 1) + '.' + d.getDate();
      let YesterdayStr = d.getFullYear() + '.' + (d.getMonth() + 1) + '.' + (d.getDate() - 1);
      let BeforYesterdayStr = d.getFullYear() + '.' + (d.getMonth() + 1) + '.' + (d.getDate() - 2);
      if (value === TodayStr) {
        return '今天';
      }
      if (value === YesterdayStr) {
        return '昨天';
      }
      if (value === BeforYesterdayStr) {
        return '前天';
      }
      return value;
    }
  }
};
</script>

<style lang="less" scoped>
.timelinebox {
  height: 300px;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  padding-top: 30px;
  .timeLinecard {
    border-left: 1px solid #b4bdcf;
    width: 92%;
    margin-left: 4%;
    padding-bottom: 10px;
    .timeLineradio {
      border: 2px solid #b4bdcf;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: relative;
      left: -6px;
      top: -6px;
      background-color: white;
      display: inline-block;
    }
    .timeLineTime {
      display: inline-block;
      color: #555555;
      font-size: 15px;
      font-weight: 600;
      position: relative;
      top: -6px;
    }
    .timelinetimecard {
      background-color: white;
      border-radius: 10px;
      padding: 10px 10px 15px 10px;
      width: 90%;
      position: relative;
      left: 20px;
      margin-top: 10px;
      margin-bottom: 5px;
    }
  }
}
</style>