<template>
  <ul class="comments_list apaas_scroll">
    <li
      class="comment_card"
      v-for="(item, index) in data"
      :key="'comment_' + index"
    >
      <div class="comment-left">
        <el-avatar
          :size="45"
          fit="cover"
          :src="item.picture_path || require('../../assets/imgs/img_head.png')"
        />
      </div>
      <div class="comment-right">
        <p class="comment-base">
          <span
            class="comment-user_name text_clip"
            v-text="item.user_name"
          ></span>
          <span
            class="comment-time text_clip"
            v-text="getTimeText(item.add_time || '')"
          ></span>
        </p>
        <div class="commnet-rate">
          <el-rate
            :colors="['#e69232', '#e69232', '#e69232']"
            :value="item.score"
            disabled
            score-template="{value}"
          ></el-rate>
        </div>
        <p class="comment-description" v-text="item.message"></p>
      </div>
    </li>
  </ul>
</template>

<script>
import helper from "@/services/helper.js";

export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  watch: {
    data: {
      handler() {
        this.autoScroll();
      },
      deep: true,
    },
  },
  methods: {
    getTimeText(time) {
      return helper.dateStringTransform(time);
    },
    autoScroll() {
      if (this.timer) {
        clearInterval(this.timer);
      }

      this.$el.scrollTop = 0;

      this.timer = setInterval(() => {
        let itemHeight = 77;
        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>
.comments_list {
  overflow-x: hidden;
  overflow-y: auto;
}
.comment_card {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 2px solid #f4f7fc;
}
.comment_card:nth-child(1) {
  border-top: none;
}
.comment_card:last-child {
  border-bottom: 2px solid #f4f7fc;
}
.comment-left {
  flex-shrink: 0;
  padding-top: 8px;
  margin-right: 20px;
}
.comment-right {
  flex-grow: 1;
  line-height: 20px;
}
.comment-base {
  padding-left: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #58617a;
}
.comment-user_name {
  flex-grow: 1;
  color: #58617a;
  margin-right: 10px;
}
.comment-time {
  flex-shrink: 0;
  color: #8890a7;
}
.comment-description {
  padding-left: 3px;
  color: #242c43;
}
</style>

<style>
.comment-right > .commnet-rate .el-rate {
  height: 20px;
}
.comment-right > .commnet-rate .el-rate__icon {
  font-size: 20px;
  margin-right: 0;
}
</style>
