<template>
  <div class="service_tab-comments">
    <comments-score :data="scoreDetail"></comments-score>
    <comments-list :data="commentsList"></comments-list>
    <comments-pagination
      :total="commentsTtotal"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :current-page="currentPage"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    ></comments-pagination>
  </div>
</template>

<script>
import commentsScore from "@/components/comments-score";
import commentsList from "@/components/comments-list";
import commentsPagination from "@/components/comments-pagination";

export default {
  components: {
    commentsScore,
    commentsList,
    commentsPagination,
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    url: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    commentsTtotal: 0,
    commentsList: [],
    pageSizes: [10, 50, 100],
    pageSize: 10,
    currentPage: 1,
  }),
  computed: {
    scoreDetail() {
      let data = this.data || {};

      return {
        score: data.avgScore || 0,
        starInfo: [1, 2, 3, 4, 5].map((star) => {
          let percent =
            this.commentsTtotal > 0
              ? (((data.scoreStatic && data.scoreStatic[star]) || 0) /
                  this.commentsTtotal) *
                100
              : 0;

          return {
            star,
            percent,
          };
        }),
        total: this.commentsTtotal,
      };
    },
  },
  methods: {
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.init();
    },
    changeCurrentPage(value) {
      this.currentPage = value;
      this.init();
    },
    init() {
      this.$http
        .get(this.url, {
          params: {
            page: this.currentPage,
            size: this.pageSize,
          },
        })
        .then(({ data }) => {
          this.commentsTtotal = data.total;
          this.commentsList = data.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.service_tab-comments > .comments_score,
.service_tab-comments > .comments_list {
  padding: 0 30px;
}
.service_tab-comments > .comments_pagination {
  margin-top: 60px;
}
</style>
