<!-- pages/payment/history/history.wxml -->
<view class="container payment-history">
  <view class="top-opt">
    <picker class="left" bindchange="bindPickerChange" value="{{index}}" range="{{years}}">
      <view class="picker">
        <text class="label">{{years[index]}}</text>
        <image class="icon-up" src="/static/img/icon_up.png"></image>
      </view>
    </picker>
  </view>
  <mp-tabs tabs="{{months}}" activeTab="{{activeTab}}" bindtabclick="onTabClick" bindchange="onChange" tab-underline-color="#0091FF" tab-active-text-color="#0091FF" swiperClass="tabs-swiper">
    <block wx:for="{{months}}" wx:key="title">
      <view class="tab-content" data-set="{{item}}" slot="tab-content-{{activeTab}}">
        <scroll-view class="wrap" scroll-y="true">
          <page-tips icon="img_nodata" content="暂无相关信息" wx:if="{{history[activeTab] && !history[activeTab].length}}"></page-tips>
          <view class="card" wx:for="{{history[activeTab]}}" wx:key="index">
            <image class="icon-bg" src="/static/img/bg_circleline.png" style="margin-bottom:20rpx"></image>
            <image class="icon-method" src="/static/img/img_{{item.debt > 0 ? 'un' : ''}}paidoff.png"></image>
            <view class="top">
              <view class="item">
                <text class="label">缴费户名：</text>
                <text>{{item.accountname}}</text>
              </view>
              <view class="item">
                <text class="label">缴费户号：</text>
                <text>{{item.accountnumber}}</text>
              </view>
              <view class="item">
                <text class="label">水表档案号:</text>
                <text>{{item.metercode}}</text>
              </view>
              <view class="item">
                <text class="label">客户地址：</text>
                <text>{{item.address}}</text>
              </view>
              <view class="item">
                <text class="label">用水时间：</text>
                <text>{{item.recorddate}}-{{item.lastrecorddate}}</text>
              </view>
              <view class="item">
                <text class="label">本期止度：</text>
                <text>{{item.reading}}</text>
              </view>
              <view class="item">
                <text class="label">计费水量：</text>
                <text>{{item.payamount}}吨</text>
              </view>
              <view class="item">
                <text class="label">应收金额：</text>
                <text>{{item.receivefee}}元</text>
              </view>
              <view class="item">
                <text class="label">欠费金额：</text>
                <text>{{item.debt}}元</text>
              </view>
            </view>
            <view class="bottom" wx:if="{{item.feelist.length}}">
              <view class="item" wx:for="{{item.feelist}}" wx:key="index" wx:for-index="key" wx:for-item="value">
                <text>{{key}}：</text>
                <text>{{value}}元</text>
              </view>
            </view>
            <image class="icon-bg" src="/static/img/bg_circleline.png" style="margin-top:20rpx"></image>
          </view>
        </scroll-view>
      </view>
    </block>
  </mp-tabs>
</view>