<template>
  <div class="listbox" v-if="list.length">
      <div class="trbox">
        <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in list"
              :key="index">
              <div slot="dot" class="sidx" :class="index==list.length-1?'act':''">
                     {{Number(index)+1}}
              </div>
              <div class="trlist flexc">
                <img src="@/assets/images/profile.jpg" class="limg flex0"/>
                <div class="flex1 trlbox">
                  <div class="flexc">
                    <img src="@/assets/images/search/tracka.png"/>
                    <div class="over">4# 中间道路西南侧…</div>
                  </div>
                  <div class="flexc">
                    <img src="@/assets/images/search/trackb.png" class="img"/>
                    <div class="over">06-12 10:34:16</div>
                  </div>
                  <div class="flexc">
                    <img src="@/assets/images/search/trackc.png" class="imga"/>
                    <div class="over">4#旁 3号摄像头</div>
                  </div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
      </div>
  </div>
  <div class="nobox flex1" v-else>
    <img src="@/assets/images/search/nodata.png"/>
    <div>没有检索到信息喔</div>
    <div>请重新检索</div>
  </div>
</template>
<script>


export default {
  props: {
    list: {
      type: Array,
      default: []
    },
    reverse:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
    };
  },
  created() {
    // this.initConnect()
  },
  methods: {

  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-timeline{padding-left: 16px;}
  .el-timeline-item__tail{border: 1px dashed #DADADA;}
  .el-timeline-item__wrapper{top: 0;}
  .el-timeline-item{padding-bottom: 0;}
  .el-timeline-item__timestamp.is-bottom{margin-top: 0;}
  .el-timeline-item__dot{top: 50%;margin-top: -12px;}
  .el-timeline-item__tail{top: 50%;}
}
.flexc{display: flex;align-items: center;}
.over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.overh{overflow: hidden;}
.listbox{flex: 1;overflow: hidden;}
.trbox{height: 100%;overflow: auto;
  .sidx{font-weight: 500;font-size: 14px;color: #3D455B;min-width: 22px;padding: 0 4px;box-sizing: border-box;
  height: 22px;background: #E6E6E6;border-radius: 8px;display: flex;align-items: center;justify-content: center;transform: translate(-50%);margin-left: 4px;
    &.act{background: #7BCCB2;color:#fff;}
  }
  .trlist{border-bottom: 1px solid #E6E6E6;padding: 10px 0;
    .limg{width: 80px;height: 80px;margin-right: 12px;}
    .trlbox{overflow: hidden;
    >div{padding: 5px 0;}
      img{width: 12px;height: 14px;margin-right: 11px;
      &.img{width: 13px;height: 13px;margin-right: 10px;}
      &.imga{width: 13px;height: 14px;margin-right: 10px;}
      }
    }
  }
}

.nobox{display: flex;flex-direction: column;align-items: center;justify-content: center;
      img{width: 222px;height: 120px;margin-bottom: 20px;}
      div{font-weight: 500;font-size: 12px;color: #AAAAAA;}
}
</style>
