<template>
  <section :style="{height:height+'px'}" class="overflow">
    <flat-list
      @fetch="fetch"
    >
      <template v-slot:item="{item}">
        <aside class="comment-item rowACenter">
          <v-image class="comment-item-avatar" :src="item.head_pic" radius="50%"></v-image>
          <section class="flex-1">
            <div class="comment-item-title line-1">{{item.nick_name || item.base64_nick_name}}</div>
            <div class="comment-item-introduce line-1">{{item.service_comment}}</div>
          </section>
          <article>
            <a-rate class="comment-rate" :value="item.service_rate" disabled />
            <div class="comment-item-time">{{item.comment_time}}</div>
          </article>
        </aside>
      </template>

    </flat-list>

  </section>
</template>

<script>
import VImage from "$components/v-image/lib/main";
import {
  Rate
} from 'ant-design-vue';
import props from '../props';
import FlatList from "$components/flat-list/src/main";
import {DateFormat} from '$utils/tool/date';
export default {
  name: "comment-list",
  components: {
    FlatList,
    VImage,
    [Rate.name]:Rate
  },
  methods:{
    fetch(obj){
      return this.$request({
        url:'player/player_evaluate_lists',
        data:{
          pid: this.config.pid
        },
        page:obj
      }).then((data)=>{
        return obj.success((data.data || []).map((item)=>{
          item.comment_time = DateFormat(item.comment_time,'MM-DD hh:mm');
          return item;
        }));
      }).catch(obj);
    }
  },
  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
