<!--pages/payment/payment.wxml-->
<view class="container payment">
  <view class="card">
    <view class="box">
      <!--  <view class="item">
        <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
          <view class="picker">
            <text class="label">账单1</text>
            <image class="icon-up" src="/static/img/icon_up.png"></image>
          </view>
        </picker>
      </view> -->
      <view class="item">
        <text class="label">欠费金额</text>
        <text>{{debtInfo.totalDebt}}元</text>
      </view>
      <view class="item">
        <text class="label">预存金额</text>
        <text>{{debtInfo.remaining}}元</text>
      </view>
      <!-- <view class="item">
        <text class="label">预存水量</text>
        <text>{{debtInfo.volume}}吨</text>
      </view> -->
      <view class="item">
        <text class="label">缴费单位</text>
        <text>{{debtInfo.uintName}}</text>
      </view>
      <view class="item">
        <text class="label">缴费户名</text>
        <text>{{debtInfo.accountName}}</text>
      </view>
      <view class="item">
        <text class="label">缴费户号</text>
        <text>{{debtInfo.accountNumber}}</text>
      </view>
      <view class="item">
        <text class="label">客户地址</text>
        <text>{{debtInfo.address}}</text>
      </view>
    </view>
    <image class="bg" src="/static/img/bg-payment-card.png"></image>
  </view>
  <view class="volume">
    <view class="box">
      <view class="title line">购水量</view>
      <view class="input">
        <image class="shuidi" src="/static/img/icon_shuidi.png"></image>
        <input type="number" maxlength="3" value="{{volume}}" bindinput="setAmount" placeholder="{{amountTip}}"
          placeholder-style="font-size:30rpx;color:rgba(66, 70, 86, 0.4)" />
        <text class="unit">吨</text>
      </view>
      <view class="tags">
        <button wx:for="{{volumeTags}}" class="tag {{item == volume ? 'active' : ''}}" wx:key="index"
          type="default" size="mini" plain="{{true}}" data-value="{{item}}" bindtap="setAmount">{{item}}</button>
      </view>
    </view>
    <view class="box payable">
      <view class="title">
        <span class="h">应缴金额</span>
        <span class="amount">{{amount}}</span>
        <span class="unit">元</span>
        <span class="arrears-tip" wx:if="{{debtInfo.totalDebt > 0}}">（含欠费金额）</span>
      </view>
    </view>
  </view>
  <button class="btn-big" bindtap="submit">立即缴费</button>
  <view class="tips">
    <text>温馨提示：1. 存在欠费情况，购水需要将欠费缴清。2. 购水仅支持整数吨</text>
  </view>
  <view class="nav">
    <text data-url="history" bindtap="toOtherPage">历史账单</text>
    <text class="line">|</text>
    <text data-url="record" bindtap="toOtherPage">缴费记录</text>
  </view>
</view>