<template>
  <div class="service_tab-comments" v-if="data">
    <comments-score :data="data.baseInfo"></comments-score>
    <comments-list :data="data.list"></comments-list>
    <comments-pagination
      :total="data.baseInfo.total"
      :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: {
    url: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    data: null,
    pageSizes: [10, 50, 100],
    pageSize: 10,
    currentPage: 1,
  }),
  methods: {
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
    },
    changeCurrentPage(value) {
      this.currentPage = value;
    },
    init() {
      this.$http
        .get("/static/serviceInfo.json")
        .then((response) => {
          this.data = response.body[this.url].comments;
        })
        .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>
