<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="60" fit="cover" :src="item.picture_path || require('../assets/imgs/img_head.png')" />
      </div>
      <div class="comment-right">
        <p class="comment-user_name" v-text="item.user_name"></p>
        <div class="commnet-rate">
          <el-rate
            :colors="['#fac266', '#fac266', '#fac266']"
            :value="item.score"
            disabled
            score-template="{value}"
            disabled-void-color="#d9dce5"
          >
          </el-rate>
        </div>
        <p class="comment-description" v-text="item.content"></p>
        <p class="comment-time" v-text="getTimeText(item.add_time || '')"></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>
.comment_card {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 25px 0;
  border-top: 2px solid #f4f7fc;
}
.comment_card:last-child {
  border-bottom: 2px solid #f4f7fc;
}
.comment-left {
  flex-shrink: 0;
  padding-top: 5px;
  margin-right: 27px;
  margin-left: 10px;
}
.comment-right {
  font-size: 16px;
  line-height: 25px;
}
.comment-right > .comment-user_name {
  padding-left: 3px;
  color: #58617a;
}
.comment-right > .comment-description {
  padding-left: 3px;
  color: #242c43;
  margin-top: 10px;
}
.comment-right > .comment-time {
  padding-left: 3px;
  color: #8890a7;
  margin-top: 3px;
}
</style>

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