<import
  name="comment-item"
  src="../../components/book-detail/comment-item"
></import>
<import name="my-load-more" src="apex-ui/components/load-more/index"></import>

<template>
  <div class="page-wrapper comment-all-wrapper">
    <list id="book" onscrollbottom="queryList">
      <list-item type="comment-title" class="section-title-bordered">
        <text class="text-title">{{ title }}</text>
        <text class="text-primary" onclick="publishComment">发表评论</text>
      </list-item>
      <list-item type="comment" for="{{comment.list}}">
        <comment-item
          item="{{$item}}"
          onreply-comment="replyComment"
        ></comment-item>
      </list-item>
      <list-item type="loadMore" class="load-status" if="{{comment.load}}">
        <my-load-more tip="加载更多"></my-load-more>
      </list-item>
      <list-item type="noMore" class="load-status" if="{{!comment.load}}">
        <my-load-more tip="没有更多内容了" loading="{{ false }}"></my-load-more>
      </list-item>
    </list>
  </div>
</template>

<script>
import { commentData } from '../../assets/data/comment.js'
export default {
  public: {
    id: '',
    image: '',
    title: '',
    author: '',
    description: '',
    count: '',
    score: ''
  },
  private: {
    bookInfo: {},
    comment: {
      list: [],
      pageNo: 1,
      pageSize: 10,
      total: null,
      load: true
    }
  },
  onInit() {
    // this.bookInfo = this.info ? JSON.parse(this.info) : {}
    console.log('info')
    // 查询评论列表
    this.queryList(1)
  },
  /* -------------------SelfCustomEvent------------------ */
  queryList(pageNo) {
    if (!isNaN(pageNo) && pageNo !== this.comment.pageNo) {
      return
    }
    if (
      this.comment.total &&
      (this.comment.pageNo - 1) * this.comment.pageSize >= this.comment.total
    ) {
      this.comment.load = false
      return
    }
    this.queryFn()
  },
  queryFn() {
    /* 
    开发时，根据pageNo和pageSize查询列表
    返回total和对应pageNo的list
    */
    this.comment.total = 30
    this.comment.list = this.comment.list.concat(commentData)
    this.comment.pageNo++
  },
  publishComment() {
    $utils.route2theUrl('pages/comment', {
      title: this.title,
      id: this.id
    })
  },
  replyComment(parameter) {
    let comment = parameter.detail.comment
    $utils.route2theUrl('pages/comment-reply', {
      title: this.title,
      id: this.id,
      commentId: comment.id,
      commentText: comment.comment,
      commentName: comment.name
    })
  }
}
</script>

<style lang="less">
@import '../../assets/styles/index.less';
.comment-all-wrapper {
  background-color: @white;
}

.description {
  padding: @gap-4;
  width: 100%;
  margin-bottom: @gap-2;
  background-color: @white;
  .flex-box-mixins(column, flex-start, flex-start);
  .description-title {
    .text-title;
    margin-bottom: @gap-2;
  }
  .g22kjdgy{
    color: #ffffff;
  }
}

.comment-title {
  .flex-box-mixins(column, flex-start, flex-start);
}
.comment-more {
  margin-right: @gap-3;
}
</style>
