<template>
  <div class="service_tab-comments">
    <comments-score
      :data="is_app_detail ? scoreDetail2 : 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,
    },
    is_app_detail: {
      type: Boolean,
      default: false,
    },
  },
  data: () => ({
    commentsTtotal: 0,
    commentsList: [],
    pageSizes: [10, 50, 100],
    pageSize: 10,
    currentPage: 1,
    scoreDetail2: {
      score: 0,
      starInfo: [
        {
          star: 5,
          percent: 0,
        },
        {
          star: 4,
          percent: 0,
        },
        {
          star: 3,
          percent: 0,
        },
        {
          star: 2,
          percent: 0,
        },
        {
          star: 1,
          percent: 0,
        },
      ],
      total: 0,
    },
  }),
  computed: {
    scoreDetail() {
      let data = this.data || {};

      return {
        score: data.avgScore || 0,
        starInfo: [5,4,3,2,1].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() {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
      };

      if (this.is_app_detail) {
        params = {
          page: this.currentPage,
          limit: this.pageSize,
        };
      }

      this.$http
        .get(this.url, { params })
        .then(({ data }) => {
          if (this.is_app_detail) {
            this.commentsTtotal = data.data.overview.total;
            this.commentsList = data.data.list || [];

            this.scoreDetail2.score = data.data.overview.ave;
            this.scoreDetail2.total = data.data.overview.total;
            data.data.overview.detail_counts.forEach((item) => {
              let percent = (item.count / this.scoreDetail2.total) * 100;
              this.scoreDetail2.starInfo[item.score - 1].percent = percent;
            });
          } else {
            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>
