<template>
  <div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
    <ul>
      <li class="item" v-for="(item ,idx) in data" :key="idx">
        <span :class="idx==0?'one':idx==1?'two':idx==2?'three':'lis'" class="pm">{{idx+1}}.</span>
        <img :src="item.img" alt />
        <p class="name">{{item.name}}</p>
        <p class="init">{{item.init}}</p>
        <span class="count">{{getCount(item.count)}}次</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return [
          {
            name: "123",
            init: "122222",
            count: 1080
          }
        ];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    getCount(val) {
      let a = val + "";
      //   console.log((val + "").length);
      if (a.length > 3) {
        return a.substr(0, 1) + "," + a.substr(1);
      } else {
        return a;
      }
    },
    autoScroll() {
      if (this.timer) {
        clearInterval(this.timer);
      }

      this.$el.scrollTop = 0;

      this.timer = setInterval(() => {
        let itemHeight = 50;
        let curScrollTop = this.$el.scrollTop + itemHeight;
        if (
          curScrollTop >=
          this.$el.scrollHeight - this.$el.clientHeight + itemHeight
        ) {
          curScrollTop = 0;
        }
        this.$el.scrollTop = Math.min(
          curScrollTop,
          this.$el.scrollHeight - this.$el.clientHeight
        );
      }, 1500);
    },
    mouseenter() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    mouseleave() {
      this.autoScroll();
    }
  },
  mounted() {
    this.autoScroll();
    window.addEventListener("resize", () => {
      this.autoScroll();
    });
  }
};
</script>

<style scoped>
.top_list {
  overflow-x: hidden;
  overflow-y: auto;
}
li {
  list-style: none;
}
.item {
  height: 50px;
  position: relative;
}
.item img {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  margin-left: 15px;
  margin-top: 7px;
}
.item .pm {
  width: 14px;
  height: 12px;
  font-family: Arial-Black;
  font-style: italic;
  font-stretch: normal;
  letter-spacing: 0px;
  font-weight: bold;
  font-size: 20px;
  float: left;
  margin-top: 12px;
}
.one {
  color: #d9ac64;
}
.two {
  color: #c4c4c0;
}
.three {
  color: #ba6e40;
}
.lis {
  color: #333;
}
.item p {
  display: inline-block;
}
.item .name {
  position: absolute;
  left: 85px;
}
.item .init {
  position: absolute;
  top: 25px;
  left: 85px;
  color: #8890a7;
}
.item .count {
  float: right;
  margin-right: 25px;
  margin-top: 15px;
  height: 19px;
  font-family: ArialMT;
  font-size: 22px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 17px;
  letter-spacing: 0px;
  color: #515fe7;
}
</style>