<view class="comPage-wrap page" id="commentPage">
  <view class="comPage-top-section">
    <label bindtap="clickCommentLabel" data-type="0" class="comPage-comment-label {{ commnetType == 0 ? 'active' : '' }}"> 全部 </label>
    <label bindtap="clickCommentLabel" data-type="1" class="comPage-comment-label {{ commnetType == 1 ? 'active' : '' }}">好评 (<label class="comPage-positive-comment">{{ commentNums[1] }}</label>)</label>
    <label bindtap="clickCommentLabel" data-type="2" class="comPage-comment-label {{ commnetType == 2 ? 'active' : '' }}">中评 (<label class="comPage-neutral-comment">{{ commentNums[2] }}</label>)</label>
    <label bindtap="clickCommentLabel" data-type="3" class="comPage-comment-label {{ commnetType == 3 ? 'active' : '' }}">差评 (<label class="comPage-negative-comment">{{ commentNums[3] }}</label>)</label>
    <label bindtap="clickCommentLabel" data-type="4" class="comPage-comment-label {{ commnetType == 4 ? 'active' : '' }}">有图 (<label class="comPage-pic-comment">{{ commentNums[4] }}</label>)</label>
  </view>
  <view class="comPage-bottom-section">
    <scroll-view class="comPage-comment-list" scroll-y="true" bindscrolltolower="scrollLoadComment">
      <view wx:for="{{ comments }}" class="comPage-comment-item">
        <view>
          <image class="comPage-comment-photo" src="{{ item.buyer_headimgurl }}"></image>
          <text class="comPage-comment-name">{{ item.buyer_nickname }}</text>
          <text class="comPage-comment-date pull-right">{{ item.add_time }}</text>
        </view>
        <view class="comPage-comment-content">{{ item.assess_info.content }}</view>
        <view wx:if="{{ item.assess_info.has_img }}" class="comPage-comment-pics">
          <image wx:for="{{ item.assess_info.img_arr }}" wx:for-item="imgSrc" src="{{ imgSrc }}"></image>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

.comPage-wrap {
  background-color: #f6f6f6;
}
.comPage-top-section {
  margin: 12px 0;
  padding: 12px 10px 0;
  background-color: #fff;
}
.comPage-comment-label {
  display: inline-block;
  padding: 5px 7px;
  margin-right: 5px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #7c7877;
  background-color: #f5ece7;
  border-radius: 2px;
}
.comPage-comment-label.active {
  color: #fff;
  background-color: #ff4200;
}
.comPage-comment-list {
  color: #000;
  background-color: #fff;
}
.comPage-comment-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.comPage-comment-photo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.comPage-comment-name {
  font-size: 15px;
}
.comPage-comment-content {
  margin: 13px 0 7px;
  font-size: 13px;
  line-height: 16px;
}
.comPage-comment-date, .comPage-comment-model {
  color: #aaa;
  font-size: 13px;
}
.comPage-comment-pics {
  margin: 10px 0 5px;
}
.comPage-comment-pics image {
  width: 50px;
  height: 50px;
  margin-right: 8px;
}

var app = getApp()
var util = require('../../utils/util.js')

Page({
  data: {
    goodsId: '',
    commnetType: 0,
    comments: [],
    commentNums: [],
    loadPage: 1
  },
  onLoad: function(options){
    var goodsId = options.detail,
        franchiseeId = options.franchisee || '';

    this.setData({
      goodsId: goodsId,
      franchiseeId: franchiseeId
    })
    this.getAssessList(0, 1);
  },
  getAssessList: function(commnetType, page, append){
    var that = this;
    app.getAssessList({
      method: 'post',
      data: {
        goods_id: that.data.goodsId,
        idx_arr: {
          idx: 'level',
          idx_value: commnetType
        },
        page: page,
        page_size: 20,
        sub_shop_app_id: this.data.franchiseeId
      },
      success: function(res){
        var commentArr = res.data;
        for (var i = commentArr.length - 1; i >= 0; i--) {
          commentArr[i].add_time = util.formatTime(new Date(commentArr[i].add_time*1000));
        }
        if(append){
          commentArr = that.data.comments.concat(commentArr);
        }
        that.setData({
          comments: commentArr,
          commentNums: res.num,
          loadPage: that.data.loadPage + 1
        })
      }

    });
  },
  clickCommentLabel: function(e){
    var commentType = e.target.dataset.type,
        data = {};

    data.loadPage = 1;
    data.commnetType = commentType;

    this.setData(data);
    this.getAssessList(commentType, 1);
  },
  scrollLoadComment: function(){
    this.getAssessList(this.data.commentType, this.data.loadPage, 1);
  }
})