<template>
  <h-view id="payment-contract-record" class="public-style">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
        <span>租金还款明细</span>
      </div>
    </h-header>
    <div style="margin-top:-1px;">
      <div class="top-head">
        <div class="center">
          <div class="now-pay">
            <div class="title">当前应付</div>
            <div class="data">
              <span>￥</span>
              {{ sumMoney |currency }}
            </div>
          </div>
        </div>
      </div>
      <div class="search">
        <input v-model="keyWords" type="text" placeholder="请输入合同号/承租人名称" >
        <img src="@/assets/payment/search.png" alt >
      </div>
      <section class="pay-content">
        <section v-for="(item,index) in showList" :key="index" class="contract-item">
          <div class="header">
            <img src="@/assets/payment/file.png" alt >
            <p>&nbsp; {{ item.project_number }}</p>
            <span>还款中</span>
          </div>
          <div class="my-content">
            <div v-for="(detail,index) in item.con_lists" :key="index" class="item">
              <div class="list">
                <div>
                  <span>承租人</span>
                  <span class="bp-name">{{ item.bp_name }}</span>
                </div>
                <div>
                  <span>车辆型号</span>
                  <span>{{ detail.vehicle_model }}</span>
                </div>
              </div>
              <div class="list">
                <div>
                  <span>设备识别号</span>
                  <span>{{ detail.product_code }}</span>
                </div>
                <div>
                  <span>应还金额</span>
                  <span class="orange">￥{{ detail.due_amount|currency }}</span>
                </div>
              </div>
              <div class="list">
                <div>
                  <span>发动机号</span>
                  <span>{{ detail.engine }}</span>
                </div>

                <div>
                  <span>已还金额</span>
                  <span class="blue">￥{{ detail.received_amount|currency }}</span>
                </div>
              </div>
              <div class="list">
                <div>
                  <span>合格证编号</span>
                  <span>{{ detail.certificate_number }}</span>
                </div>
                <div>
                  <span>本次还款</span>
                  <section>
                    <CurrencyInput v-model="detail.amount" placeholder="请输入还款金额" />
                  </section>
                </div>
              </div>
            </div>
            <list-item :item-height="44">
              <item>
                <div slot="name">逾期利息</div>
                <span slot="content">￥{{ money|currency }}</span>
              </item>
            </list-item>
          </div>

        </section>
      </section>

      <div class="prompt has-footer">
        <div>
          <img src="@/assets/payment/prompt.png" alt >
        </div>
        <div>
          <p>温馨提示</p>
          <p>推荐使用农行卡，农行卡支付免收手续费！</p>
          <p>由于存在款项到账时差性，“已还金额”字段可能XXX，给您造成的不便，请谅解，谢谢！</p>
        </div>
      </div>
      <bottom-tab>
        <tab-button class="footer" @click.native="checkPay()">提交订单</tab-button>
      </bottom-tab>
    </div>
  </h-view>
</template>
<script>
import CurrencyInput from '../../../components/currencyInput'
export default {
  name: 'PaymentContractRecord',
  components: {
    CurrencyInput,
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.pagenum = 1
      vm.searchPagenum = 1
      vm.getRentInfo()
      vm.money = vm.$route.params.money
      vm.sumMoney = vm.money
      vm.keyWords = ''
      vm.info = []
      vm.showList = []
      vm.searchList = []
    })
  },
  data () {
    return {
      sumMoney: '',
      money: '',
      reFund1: '',
      reFund2: '',
      keyWords: '',
      pagenum: 1,
      searchPagenum: 1,
      info: [],
      showList: [],
      searchList: [],
    }
  },
  computed: {},
  watch: {
    info: {
      handler (newName, oldName) {
        let vm = this
        let sumL = []
        vm.sumMoney = vm.money
        for (let i of this.info) {
          i.con_lists.forEach(j => {
            sumL.push(j.amount)
          })
          let a = 0
          let newSum = sumL.filter(item => {
            return item !== ''
          })
          let notNaN = newSum.filter(item => {
            return !isNaN(item)
          })
          if (notNaN.length !== 0) {
            notNaN.forEach(i => {
              if (!isNaN(parseFloat(i))) {
                a = a + parseFloat(i)
                if (vm.money !== '') {
                  vm.sumMoney = parseFloat(a + parseFloat(vm.money))
                } else {
                  vm.sumMoney = a
                }
              }
            })
          } else {
            if (vm.money !== '') {
              vm.sumMoney = vm.money
            } else {
              vm.sumMoney = 0
            }
          }
        }
      },
      deep: true,
    },
    keyWords (newVal, oldVal) {
      this.getRentInfo()
    },
    'sumMoney': {
      handler (newVal, oulVal) {
        if (newVal === null || isNaN(newVal) || newVal === '') {
          this.sumMoney = 0
        }
      },
    },
  },
  methods: {
    checkPay () {
      let money = parseFloat(this.sumMoney)
      // let theDefault = parseFloat(this.defaultMoney)
      if (money > 0) {
        this.payDetail()
      } else if (money === 0) {
        hlsPopup.showLongCenter('当前支付金额为0元，无需支付！')
      }
      // else if (money > theDefault) {
      //   hlsPopup.showLongCenter('当前支付金额超出应还金额！')
      // }
    },
    getRentInfo () {
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url =
        process.env.basePath +
        'payment_con_list_query' +
        '&index' +
        `'${randomString}'`
      let param = {
        bp_id: window.localStorage.getItem('bp_id'),
        searchInput: vm.keyWords,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.info = res.prj_lists
         /* vm.info.forEach(i => {
            i.con_lists.forEach(j => {
              // let num = (parseFloat(j.due_amount) - parseFloat(j.received_amount))
              let num = ''
              vm.$set(j, 'amount', num)
            })
          })*/
          vm.showList = vm.info
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    createData () {
      let pushList = []
      this.info.forEach(i => {
        i.con_lists.forEach(j => {
          if (!j.amount || j.amount === 0) {

          }else{
            let obj = {}
            obj.bp_id = window.localStorage.getItem('bp_id')
            obj.amount = j.amount
            obj.contract_id = j.contract_id
            pushList.push(obj)
          }
        })
      })
      return pushList
    },
    payDetail () {
      let vm = this
      let url = process.env.basePath + 'create_detail_1_part'
      let payLists = vm.createData()
      let param = {
        order_id: window.localStorage.getItem('order_id'),
        pay_lists: payLists,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.toPayEntry(res.order_id)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    toPayEntry (e) {
      this.$router.push({
        name: 'PaymentPayEntry',
        params: {
          sumMoney: this.sumMoney,
          money: this.money,
          order_id: e,
        },
      })
    },
  },
}
</script>
<style lang='less' >
#payment-contract-record {
  .list{
    span{
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .none {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top-head {
    position: relative;
    width: 100%;
    height: 92px;
    background: url("../../../assets/payment/back1.png");
    background-size: 100% 142px;
  }
  .now-pay {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
  }
  .title {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ffffff;
    margin-top: 1.8%;
  }
  .data {
    font-family: Verdana-Bold;
    font-size: 24px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 18px;
    margin-top: 16px;
  }
  .search {
    width: 351px;
    margin: 0 auto;
    height: 44px;
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    border-radius: 0.08rem;
    top: -23px;
    img {
      //position: absolute;
      width: 16px;
      height: 16px;
     // bottom: 28px;
    //  right: 31px;
     // top: 83px;
     // z-index: 999;
    }
    input {
      //position: absolute;
      //top: 69px;
     // width: 351px;
      width: 84%;
      height: 94%;
     // height: 44px;
     // border-radius: 4px;
      padding-left: 12px;
     // box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
    }

    input::placeholder {
      opacity: 0.4;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #b4b4b5;
    }
  }
  .pay-content {
    width: 95%;
    position: absolute;
    bottom: 150px;
    left:0;
    right:0;
    margin:auto;
    height: 53%;
    overflow: scroll;
    .contract-item {
      background-color: #fff;
      box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
      border-radius: 2px;
      width: 359px;
      margin: 0 auto;
      .header {
        height: 34px;
        background: #fff;
        display: flex;
        align-items: center;
        line-height: 37px;
        padding: 0 16px;
        img {
          height: 30px;
        }

        p {
          flex: 2;
          font-family: PingFangSC-Semibold;
          font-size: 15px;
          color: #383f45;
          letter-spacing: 0;
          font-weight: 700;
        }
        span {
          display: inline-block;
          width: 57px;
          height: 21px;
          text-align: center;
          line-height: 21px;
          border: 1px solid #1d3fff;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #3957ff;
          letter-spacing: 0;
        }
      }
      .my-content {
        margin-bottom: 8px;
        .item {
          padding: 4px 0;
          background-color: #fff;
          margin-bottom: 4px;
          .list {
            margin-bottom: 0;
            display: flex;
            .bp-name {
              width: 75px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            div {
              flex: 1;
              display: flex;
              height: 28px;
              line-height: 29px;
              margin-left: -0px;
              section {
                flex: 1;
              }
              input {
                text-align: left;
                width: 96px;
                height: 28px;
                border-bottom: 1px solid #00469c;
                border-radius: 2px;
                font-family: PingFangSC-Regular;
                font-size: 12px;
              }

              input::placeholder {
                color: #b4b4b5;
              }

              &:first-child {
                flex: 2;
              }

              &:last-child {
                flex: 3;
                margin-left: -40px;
              }

              span:last-child {
                flex: 1;
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: #383f45;
              }

              span.orange {
                font-family: DIN-Bold;
                font-size: 13px;
                color: #1d3fff;
                font-weight: 700;
              }

              span.blue {
                font-family: DIN-Bold;
                font-size: 13px;
                font-weight: 700;
                color: #383f45;
              }

              span:first-child {
                flex: 1;
                text-align: right;
                margin-right: 10px;
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: rgba(56, 63, 69, 0.6);
              }
            }
          }
        }
      }
    }
  }
// .rate{
//    position: absolute;
//     width: 100%;
//     bottom: 134px;
//     box-shadow: -2px -2px 10px #ccc;
// }
  .prompt {
    position: absolute;
    width: 100%;
    bottom: 40px;
    background: rgba(142, 195, 30, 0.1);
    height: 111px;
    display: flex;
    div:first-child {
      flex: 1;
      padding: 16px 0 0 16px;

      img {
        width: 16px;
        height: 16px;
      }
    }

    div:last-child {
      flex: 12;

      p:first-child {
        padding-top: 16px;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #8ec31e;
        letter-spacing: 0.5px;
        margin-bottom: 7px;
      }

      p:nth-child(n + 2) {
        text-indent: 2em;
        padding-right: 16px;
        line-height: 20px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: rgba(101, 100, 100, 0.8);
        letter-spacing: 0.37px;
        margin-left: -22px;
      }
    }
  }

  .footer {
    background: @headerColor;
    color: white;
  }
  .hls-list-item{

  }
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #payment-contract-record {
      .pay-content {
        height: 63%;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #payment-contract-record {
      .pay-content {
        height: 63%;
      }
    }
  }
}
</style>
