<template>
  <ul class="comments_list">
    <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" />
      </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.content"></p>
      </div>
    </li>
  </ul>
</template>

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

export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  methods: {
    getTimeText(time) {
      return helper.dateStringTransform(time);
    },
  },
};
</script>

<style scoped>
.comments_list {
  overflow-x: hidden;
  overflow-y: auto;
}
.comment_card {
  margin-right: 10px;
  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>
