<view class="myIntegral-wrap page" id="myIntegral">
  <scroll-view class="myIntegral-content" wx:if="{{ integralPage == 0 }}" scroll-y="true"  bindscroll="fixedMessageNav" lower-threshold="116" bindscrolltolower="checkMoreMessageData">
    <view class="integral-detail">
      <view class="detail-name">
        <view class="single-icon">积</view>
        <text>现有积分/总积分</text>
      </view>
      <view class="detail-num">
        <text>{{ canUseIntegral }} / {{ totalIntegral }}</text>
      </view>
      <view class="detail-rule" catchtap="showIntegralRule">
        <view class="single-icon">?</view>
        <text>积分规则</text>
      </view>
    </view>
    <view class="message-nav">
      <view class="type-item {{ currentMessageType == 'income' ? 'active' : '' }}" catchtap="setCurrentMessageType" data-type="income" >收入</view>
      <view class="type-item {{ currentMessageType == 'outcome' ? 'active' : '' }}" catchtap="setCurrentMessageType" data-type="outcome" >支出</view>
    </view>
    <view class="message-nav {{ navFixed ? 'fixed' : 'nofixed' }}">
      <view class="type-item {{ currentMessageType == 'income' ? 'active' : '' }}" catchtap="setCurrentMessageType" data-type="income" >收入</view>
      <view class="type-item {{ currentMessageType == 'outcome' ? 'active' : '' }}" catchtap="setCurrentMessageType" data-type="outcome" >支出</view>
    </view>
    <view class="message-content {{ currentMessageType == 'income' ? 'active' : '' }}" >
      <block wx:for="{{ incomeBranch.data }}">
        <view class="message-item">
          <view class="message-title">{{ item.content }}</view>
          <view class="message-time">{{ item.time }}</view>
          <view class="message-num">{{ item.num }}</view>
        </view>
      </block>
    </view>
    <view class="message-content {{ currentMessageType == 'outcome' ? 'active' : '' }}" >
      <block wx:for="{{ outcomeBranch.data }}">
        <view class="message-item">
          <view class="message-title">{{ item.content }}</view>
          <view class="message-time">{{ item.time }}</view>
          <view class="message-num">{{ item.num }}</view>
        </view>
      </block>
    </view>
  </scroll-view>
  <view class="myIntegral-rule" wx:if="{{ integralPage == 1 }}">
    <view class="rule-list">
      <view class="rule-item">
        <view class="item-name">积累规则</view>
        <view class="item-content">消费 {{ integralRule.consumeNum }} 元，获得 1 积分</view>
      </view>
      <view class="rule-item" wx:if="{{ integralRule.loginNum != 0 }}">
        <view class="item-name">额外积分</view>
        <view class="item-content">每天登录送 {{ integralRule.loginNum }} 积分</view>
      </view>
      <view class="rule-item" wx:if="{{ integralRule.shareNum != 0 }}">
        <view class="item-name">额外积分</view>
        <view class="item-content">推荐好友送 {{ integralRule.shareNum }} 积分</view>
      </view>
      <view class="rule-item" wx:if="{{ integralRule.postCommentNum != 0 }}">
        <view class="item-name">额外积分</view>
        <view class="item-content">商品评论送 {{ integralRule.postCommentNum }} 积分</view>
      </view>
      <view class="rule-item">
        <view class="item-name">使用积分</view>
        <view class="item-content">{{ integralRule.convertNum }} 积分 = 1元</view>
      </view>
      <view class="rule-item">
        <view class="item-name">提醒</view>
        <view class="item-content">消费积分并不会影响升级会员卡，与会员升级相关的是总积分</view>
      </view>
    </view>
    <view class="confirm-btn" catchtap="hideIntegralRule">确定</view>
  </view>
</view>

#myIntegral {
  min-height: 100vh;
  background-color: #eeeeee;
}
#myIntegral .myIntegral-content {
  height: 100vh;
}
#myIntegral .integral-detail {
  position: relative;
  background: #5db968;
  height: 125px;
  margin-bottom: 10px;
  color: #fff;
}
#myIntegral .integral-detail .detail-name .single-icon {
  width: 20px;
  height: 20px;
  background: #fff;
  color: #5db968;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
  margin-right: 5px;
  font-size: 12px;
}
#myIntegral .integral-detail .detail-name {
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 18px;
}
#myIntegral .integral-detail .detail-name text {
  vertical-align: middle;
}
#myIntegral .integral-detail .detail-num {
  position: absolute;
  left: 35px;
  bottom: 18px;
  font-size: 24px;
}
#myIntegral .integral-detail .detail-rule {
  position: absolute;
  top: 32px;
  right: 30px;
}
#myIntegral .integral-detail .detail-rule .single-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  margin-right: 5px;
  background: #5db968;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  border: 1px solid #fff;
}
#myIntegral .integral-detail .detail-rule text {
  font-size: 14px;
}
#myIntegral .message-nav {
  width: 100%;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background-color: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #e9e9e9;
  z-index: 1;
}
#myIntegral .message-nav.fixed {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
#myIntegral .message-nav.nofixed {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}
#myIntegral .message-nav .type-item {
  position: relative;
  display: inline-block;
  min-width: 70px;
}
#myIntegral .message-nav .type-item:first-child {
  margin-right: 15px;
}
#myIntegral .message-nav .type-item.active {
  color: #55b737;
  border-bottom: 1px solid #55b737;
}
#myIntegral .message-content {
  display: none;
  /*max-height: calc(100vh - 177px);*/
}
#myIntegral .message-content.active {
  display: block;
}
#myIntegral .message-item {
  position: relative;
  margin: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
}
#myIntegral .message-item:last-child {
  margin-bottom: 16px; 
}
#myIntegral .message-item .message-title {
  width: calc(100% - 110px);
  padding: 15px 0 0 15px;
  font-size: 16px;
  overflow: hidden;
}
#myIntegral .message-item .message-time {
  margin: 10px 0 12px 15px;
  color: #d6d6d6;
  font-size: 12px;
}
#myIntegral .message-item .message-num {
  position: absolute;
  top: 18px;
  right: 15px;
  overflow: hidden;
  font-size: 14px;
  color: #5db968;
}

/* 积分商品 积分规则页面*/
#myIntegral .myIntegral-rule {
  display: block;
}
#myIntegral .rule-list {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  background: #feffff;
}
#myIntegral .rule-item {
  min-height: 36px;
  margin: 0 10px;
  padding: 5px 0;
  line-height: 36px;
}
#myIntegral .rule-item:last-child {
  border: 0;
}
#myIntegral .rule-item .item-name {
  display: inline-block;
  height: 36px;
  width: 85px;
  margin-right: 8px;
  vertical-align: top;
  color: #878889;
  text-align: center;
  overflow: hidden;
}
#myIntegral .rule-item .item-content {
  display: inline-block;
  max-width: calc(100% - 100px);
  min-height: 36px;
  line-height: 36px;
  overflow: hidden;
  vertical-align: top;
}
#myIntegral .rule-item .data-img {
  display: inline-block;
  width: 60px;
  height: 60px;
}
#myIntegral .myIntegral-rule .confirm-btn {
  margin: 14px 10px;
  padding: 10px 0;
  background: #55b737;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  font-size: 16px;
}

var app = getApp()

Page({
  data: {
    integralPage: 0, // 控制是否展开 0:显示主页 1:显示积分规则页
    canUseIntegral: 0, // 现有积分
    totalIntegral: 0, // 总积分
    currentMessageType: 'income', // income:收入 / outcome:支出
    // navStyle: '',
    navFixed: false, // 固定导航条
    // 积分规则
    integralRule: {
      convertNum: 100, // xx积分对应1元
      consumeNum: 0, // 消费xx元积累1积分
      loginNum: 0, // 每天登录送xx积分
      postCommentNum: 0, // 商品评论送xx积分
      shareNum: 0, // 推荐好友送xx积分
    },
    /*
      xxxBranch 对象
      data: 对应分支的数据
      isMore: 是否拥有更多的新的数据
      currentPage: 当前已经加载到页数
      onload: 是否处在数据加载中， true加载中，false加载完毕
    */
    incomeBranch: {
      data: [],
      isMore: 0,
      currentPage: 1,
      onload: false
    },
    outcomeBranch: {
      data: [],
      isMore: 0,
      currentPage: 1,
      onload: false
    },
  },
  onLoad: function(){
    this.getIntegralDetailData();
    this.getIntegralRuleData();
    this.getMessageData('income');
    this.getMessageData('outcome');
  },
  // onShow: function(){
  //   app.checkIfBindPhone();
  // },
  // 获得积分详情数据
  getIntegralDetailData: function(){
    let that = this;
    app.sendRequest({
      url: '/index.php?r=AppShop/GetIntegralInfo',
      // data: {
      //   'id': app.getUserInfo().id
      // },
      success: function(res){
        that.setData({
          'canUseIntegral': res.data.can_use_integral,
          'totalIntegral': res.data.total_integral
        });
      }
    });
  },
  // 获得积分规则数据
  getIntegralRuleData: function(){
    let that = this;
    app.sendRequest({
      url: '/index.php?r=AppShop/IntegralRule',
      success: function(res){
        that.setData({
          'integralRule.convertNum': res.data.convert_num,
          'integralRule.consumeNum': res.data.consume_num,
          'integralRule.loginNum': res.data.login_num,
          'integralRule.postCommentNum': res.data.post_comment_num,
          'integralRule.shareNum': res.data.share_num
        });
      }
    });
  },
  // 获取对应消息数据
  getMessageData: function(type, page){
    let that = this;
    let action = '';
    if (type == 'income') {
      action = 'add';
    } else if (type = 'outcome') {
      action = 'minus';
    }
    app.sendRequest({
      url: '/index.php?r=AppShop/UserIntegralAction',
      data: {
        'action': action,
        'page': page || 1
      },
      success: function(res){
        switch(type){
          // 收入消息
          case 'income':
            that.setData({
              'incomeBranch.data': that.data.incomeBranch.data ? that.data.incomeBranch.data.concat(that.parseMessageData(res.data)) : that.parseMessageData(res.data) ,
              'incomeBranch.isMore': res.is_more,
              'incomeBranch.currentPage': res.current_page,
              'incomeBranch.onload': false,
            });
            break;
          // 支出消息
          case 'outcome':
            that.setData({
              'outcomeBranch.data': that.data.outcomeBranch.data ? that.data.outcomeBranch.data.concat(that.parseMessageData(res.data)) : that.parseMessageData(res.data) ,
              'outcomeBranch.isMore': res.is_more,
              'outcomeBranch.currentPage': res.current_page,
              'outcomeBranch.onload': false,
            })
            break;
        }
      }
    });
  },
  // 解析对应消息数据
  parseMessageData: function(data){
    var that = this;
    let array = [];
    let item = {};
    for (var i = 0; i < data.length; i++) {
      item = {
        content: data[i].content,
        num: data[i].num,
        time: data[i].time
      }
      array.push(item);
    }
    return array;
  },
  // 底部触发是否获取数据
  checkMoreMessageData: function(){
    let that = this;
    switch(that.data.currentMessageType) {
      case 'income':
        // 有更多数据 并且 不在加载中时 执行
        if ((that.data.incomeBranch.isMore != 0 ) && ( !that.data.incomeBranch.onload)) {
          that.getMessageData('income', (that.data.incomeBranch.currentPage + 1));
          that.setData({
            'incomeBranch.onload': true
          });
        }
        break;
      case 'outcome':
        // 有更多数据 并且 不在加载中时 执行
        if ((that.data.outcomeBranch.isMore != 0 ) && ( !that.data.outcomeBranch.onload)) {
          that.getMessageData('outcome', (that.data.outcomeBranch.currentPage + 1));
          that.setData({
            'outcomeBranch.onload': true
          });
        }
        break;
    }
  },
  // 固定消息导航条
  fixedMessageNav: function(event){
    var that = this;
    if (event.detail.scrollTop <= 135) {
      that.setData({
        // navStyle: ''
        navFixed: false
      });
    } else {
      that.setData({
        // navStyle: 'position: fixed; top: 0; left: 0;'
        navFixed: true
      });
    }
  },
  // 切换显示的消息类型
  setCurrentMessageType: function(event){
    this.setData({
      'currentMessageType': event.target.dataset.type
    });
  },
  // 积分规则：打开积分详情
  showIntegralRule: function(){
    // 设置页面标题
    app.setPageTitle('积分规则');
    // 请求数据
    this.setData({
      'integralPage': 1
    });
  },
  // 积分规则：关闭积分详情(返回:个人积分主页)
  hideIntegralRule: function(){
    // 设置页面标题
    app.setPageTitle('个人积分');
    // 回到系统通知页面,清空表单数据
    this.setData({
      'integralPage': 0
    });
  }
})