<ion-view view-title="自动交费" class="repair newRepair automatic-payment-view">
  <ion-header-bar align-title="center" class="bar-stable">
    <div class="buttons" ng-click="goBack()">
      <button class="button button-icon icon ion-ios-arrow-back">
      </button>
    </div>
    <h1 class="title">自动交费</h1>
    <div class="buttons" ng-if="isEdit" ng-click="queryUserGasNbBinding()">
      <button class="button">解约</button>
    </div>
  </ion-header-bar>
  <ion-content class="mine-subfile new-repair automatic-payment-content">
    <div class="card-div">
      <div class="row-div">
        <div class="left-cell name-text">{{label}}</div>
        <div class="right-cell"><i class="icon ion-chevron-right" style="color: #9DA7B7;"></i></div>
      </div>
      <div class="row-div number-row info-text">
        <div class="left-cell">用气户号：</div>
        <div class="right-cell">{{userCode}}</div>
      </div>
      <div class="row-div info-text">
        <div class="left-cell">地址：</div>
        <div class="right-cell">{{address}}</div>
      </div>
    </div>
    <div class="card-div">
      <div class="deduction-row-div">
        <div class="title-left name-text">
          阈值扣款
          <span class="tip-span">（余额小于扣款阈值开始扣款）</span>
        </div>
        <div class="title-right">
          <ion-toggle ng-checked="isThreshold" ng-click="changeThreshold()"></ion-toggle>
        </div>
      </div>
      <div ng-if="isThreshold">
        <div class="deduction-threshold-div">
          扣款阈值
        </div>
        <div class="money-list">
          <div class="money-div" ng-class="{'select': deductionThreshold == '50'}"
               ng-click="changeDeductionThreshold('50')">
            50元
          </div>
          <div class="money-div" ng-class="{'select': deductionThreshold == '100'}"
               ng-click="changeDeductionThreshold('100')">
            100元
          </div>
        </div>
        <div class="deduction-threshold-div">
          扣款金额
        </div>
        <div class="money-list">
          <div class="money-div" ng-class="{'select': deductionAmount == '50'}" ng-click="changeDeductionAmount('50')">
            50元
          </div>
          <div class="money-div" ng-class="{'select': deductionAmount == '100'}"
               ng-click="changeDeductionAmount('100')">
            100元
          </div>
          <div class="money-div" ng-class="{'select': deductionAmount == '200'}"
               ng-click="changeDeductionAmount('200')">
            200元
          </div>
          <div class="money-div" ng-class="{'select': deductionAmount == '500'}"
               ng-click="changeDeductionAmount('500')">
            500元
          </div>
        </div>
      </div>
    </div>
    <div class="card-div">
      <div class="deduction-row-div">
        <div class="title-left name-text">
          每月扣款
          <span class="tip-span">（按照扣款时间开始扣款）</span>
        </div>
        <div class="title-right">
          <ion-toggle ng-checked="!isThreshold" ng-click="changeThreshold()"></ion-toggle>
        </div>
      </div>
      <div ng-if="!isThreshold">
        <div class="row-div date-row">
          <div class="left-cell date-title">扣款时间</div>
          <div class="right-cell date-value" ng-click="AutomaticPayment.showItems('monthlyDebitTime')">
            <span class="date-span">{{AutomaticPayment.monthlyDebitTime}}号</span>
            <img ng-src="img/new/payment/date.png" width="14px">
          </div>
        </div>
        <div class="deduction-threshold-div">
          扣款金额
        </div>
        <div class="money-list">
          <div class="money-div" ng-class="{'select': monthlyDeductionAmount == '50'}"
               ng-click="changeMonthlyDeductionAmount('50')">
            50元
          </div>
          <div class="money-div" ng-class="{'select': monthlyDeductionAmount == '100'}"
               ng-click="changeMonthlyDeductionAmount('100')">
            100元
          </div>
          <div class="money-div" ng-class="{'select': monthlyDeductionAmount == '200'}"
               ng-click="changeMonthlyDeductionAmount('200')">
            200元
          </div>
          <div class="money-div" ng-class="{'select': monthlyDeductionAmount == '500'}"
               ng-click="changeMonthlyDeductionAmount('500')">
            500元
          </div>
        </div>
      </div>
    </div>
    <div class="card-div">
      <div class="deduction-row-div deduction-method-row">
        <div class="mode-title-left name-text">
          扣款方式
<!--          <span class="tip-span">（根据以下顺序扣款，长按拖动）</span>-->
        </div>
        <div class="mode-title-right" ng-click="addBankCard()" id="isShowAddCard">
          <img ng-src="img/new/payment/add-card.png" width="15px">
          添加银行卡
        </div>
      </div>
      <div>
        <ion-list show-reorder="true" show-delete="true">
          <ion-item ng-repeat="item in items" class="item-remove-animate bank-item">
            <ion-reorder-button class="ion-navicon reorder-button" on-reorder="moveItem(item, $fromIndex, $toIndex)">
              <div class="row-div bank-row">
                <div class="left-cell date-title bank-name">
                  <!--<img ng-src="{{item.src}}" width="21px">-->
                  <span class="bank-span">{{item.antBankCardNo}}</span>
                </div>
                <!--<div class="right-cell delete-bank">
                  <img ng-src="img/new/payment/delete.png" width="15px">
                </div>-->
              </div>
            </ion-reorder-button>
            <ion-delete-button class="delete-button" ng-if="!AutomaticPayment.isAutoPay" ng-click="getCardUserInfo(item)">
              <img src="img/new/payment/delete.png" width="15px">
            </ion-delete-button>
          </ion-item>
        </ion-list>
      </div>
    </div>
    <div class="agreement-div">
      <input type="checkbox" name="agreement" value="agreement">
      <span class="agreement-span">
        我已阅读并同意
        <span class="agreement-title" ng-click="goPayAgreement()">《北京燃气自动交费协议》</span>
      </span>
      <div class="activate-div">
        <button class="btn-open" ng-click="activateNow()">{{AutomaticPayment.buttonText}}</button>
      </div>
    </div>
  </ion-content>
</ion-view>
