<template>
  <div
    class="the_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.PicturePath || require('../../assets/imgs/img_head.png')" />
        <p class="text_clip">
          <span class="name">{{ item.UserName }}</span><br>
          <span class="init">{{ item.SystemName }}</span>
        </p>
        <span class="count">{{ getCount(item.Count) }}次</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    data: {
      handler() {
        this.autoScroll();
      },
      deep: true,
    },
  },
  methods: {
    getCount(val) {
      let a = val + "";

      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 = 60;
        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();
    });
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style scoped>
.the_list {
  overflow-x: hidden;
  overflow-y: auto;
}
.item {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.item > .pm {
  flex-shrink: 0;
  width: 14px;
  font-family: Arial-Black;
  font-style: italic;
  font-stretch: normal;
  letter-spacing: 0px;
  font-weight: bold;
  font-size: 20px;
}
.item > .pm.one {
  color: #d9ac64;
}
.item > .pm.two {
  color: #c4c4c0;
}
.item > .pm.three {
  color: #ba6e40;
}
.item > .pm.lis {
  color: #333;
}
.item > img {
  flex-shrink: 0;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  margin-left: 15px;
}
.item > p {
  flex-grow: 1;
  flex-shrink: 1;
  margin-left: 10px;
}
.item > p > .init {
  color: #8890a7;
  margin-top: 3px;
}
.item > .count {
  flex-shrink: 0;
  height: 19px;
  font-family: ArialMT;
  font-size: 22px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 17px;
  letter-spacing: 0px;
  color: #515fe7;
  white-space: nowrap;
  margin-left: 10px;
}
</style>
