<template>
  <h-view id="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 class="my-content" style="margin-top:-1px">
      <div class="top-head">
        <div class="center">
          <div class="now-pay">
            <div class="title">当前应付</div>
            <div class="data">
              <span>￥</span>
              {{ money |currency }}
            </div>
          </div>
        </div>
      </div>
      <section class="pay-content">
        <section v-for="(item,index) in prj_lists" :key="index" class="contract-item">
          <div class="header">
            <img src="@/assets/payment/file.png" >
            <p>&nbsp; {{ item.project_number }}</p>
            <span>{{ item.bp_name }}</span>
          </div>
          <div class="content">
            <div v-for="(e,i) in item.cf_lists" :key="i" class="list-item">
              <span class="item-left">{{ e.cf_item_name }}</span>
              <div class="item-center">
                <p>应还金额</p>
                <p>已还金额</p>
                <p>本次还款</p>
              </div>
              <div class="item-right">
                <p>￥{{ parseFloat(e.due_amount).toFixed(2)|currency }}</p>
                <p>￥{{ e.received_amount|currency }}</p>
              <CurrencyInput v-model="e.amount" placeholder="请输入还款金额"/></div>
            </div>
          </div>
        </section>
      </section>
    </div>
    <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>
  </h-view>
</template>

<script>
import CurrencyInput from '../../../components/currencyInput'
export default {
  components: {
    CurrencyInput,
  },
  data () {
    return {
      money: 0,
      pagenum: 1,
      prj_lists: [],
    }
  },
  watch: {
    'prj_lists': {
      handler (newName, oldName) {
        let vm = this
        let sumL = []
        for (let i of this.prj_lists) {
          i.cf_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)
                vm.money = a
              }
              vm.money = a
            })
          } else if (notNaN.length === 0) {
            vm.money = 0
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.pagenum = 1
      vm.prj_lists = []
      vm.getDetail()
    })
  },
  methods: {
    getDetail () {
      let vm = this
      let url = process.env.basePath + 'payment_prj_list_query'
      let param = {
        bp_id: window.localStorage.getItem('bp_id'),
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.prj_lists = res.prj_lists
          /*   vm.prj_lists.forEach(i => {
            i.cf_lists.forEach(j => {
              // let num = parseFloat(j.due_amount) - parseFloat(j.received_amount)
              let num = ''
              vm.$set(j, 'amount', num)
            })
          }) */
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    makeDetailData () {
      let data = []
      this.prj_lists.forEach(i => {
        i.cf_lists.forEach(j => {
          j.project_id = i.project_id
          if (!j.amount || j.amount === 0) {

          } else {
            data.push(j)
          }
        })
      })
      data.forEach(i => {
        delete i.cf_item_name
        delete i.due_amount
        delete i.received_amount
        delete i.project_number
        i.bp_id = window.localStorage.getItem('bp_id')
      })
      return data
    },
    checkPay () {
      let money = parseFloat(this.money)
      // let theDefault = parseFloat(this.defaultMoney)
      if (money > 0) {
        this.createDetail()
      } else if (money === 0) {
        hlsPopup.showLongCenter('当前支付金额为0元，无需支付！')
      }
      // else if (money > theDefault) {
      //   hlsPopup.showLongCenter('当前支付金额超出应还金额！')
      // }
    },
    createDetail () {
      let vm = this
      let url = process.env.basePath + 'create_detail_0_part'
      let data = vm.makeDetailData()
      let param = {
        order_id: window.localStorage.getItem('order_id'),
        pay_lists: data,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let e = res.order_id
          vm.toPayEntry(e)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    toPayEntry (e) {
      this.$router.push({
        name: 'PayEntry',
        params: {
          money: this.money,
          order_id: e,

        },
      })
    },
  },
}
</script>
<style lang='less' >
#contract-record {
  .top-head {
    position: relative;
    width: 100%;
    height: 142px;
    background: url("../../../assets/payment/back1.png");
    background-size: 100% 142px;
  }
  .center {
    .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;
    }
  }

  .pay-content {
    position: absolute;
    bottom: 150px;
    left:0;
    right:0;
    margin:auto;
    width: 355px;
    //margin-top:-60px;
    height:8rem;
    overflow: scroll;
    //background-color: #FFF;
    .contract-item {
      width: 100%;
      background-color: #fff;
      box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);

      .header {
        height: 44px;
        background: #fff;
        display: flex;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #383f45;
        letter-spacing: 0;
        line-height: 44px;
        padding: 0 16px;

        img {
          height: 30px;
          margin-top: 10px;
          margin-right: 6px;
        }

        p {
          flex: 2;
          border-bottom: 1px solid #f3f3f7;
          font-weight: 700;
        }

        span {
          border-bottom: 1px solid #f3f3f7;
          font-weight: 700;
        }
      }

      .title {
        padding: 0 16px;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #383f45;

        div {
          border-bottom: 1px solid #eee;
          display: flex;
          text-align: center;
          padding: 0 14px;
          height: 37px;
          line-height: 37px;
          justify-content: space-between;
        }
      }

      .content {
        margin-bottom: 8px;
        background-color: #fff;
        .list-item:not(:last-of-type) {
          background: url("../../../assets/payment/border.png") 0px 90px
            no-repeat;
        }
        .list-item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 99px;
          padding-bottom: 12px;
          .item-left {
            font-family: PingFangSC-Semibold;
            font-size: 13px;
            color: #383f45;
            letter-spacing: 0;
            // flex: 3;
            margin-top: -63px;
          }
          .item-center {
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: rgba(56, 63, 69, 0.6);
            letter-spacing: 0;
            line-height: 30px;
            // flex: 5;
          }
          .item-right {
            // flex: 4;
            line-height: 30px;

            p:nth-of-type(1) {
              font-family: Verdana-Bold;
              font-size: 12px;
              color: #1d3fff;
              letter-spacing: 0;
              text-align: right;
            }
            p:nth-of-type(2) {
              font-family: Verdana-Bold;
              font-size: 12px;
              color: #383f45;
              letter-spacing: 0;
              text-align: right;
            }
            input {
              width: 90px;
              border: none;
              border-bottom: 1px solid #1d3fff;
              font-size: 13px;
              text-align: right;
              float: right;
            }
            input::placeholder {
              font-family: PingFangSC-Regular;
              font-size: 13px;
              color: rgba(56, 63, 69, 0.4);
              letter-spacing: 0;
            }
          }
        }
      }
    }
  }

  .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;
        line-height: 20px;
        padding-right: 16px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: rgba(101, 100, 100, 0.8);
        letter-spacing: 0.37px;
        margin-left: -22px;
      }
    }
  }

  .footer {
    background-color: @headerColor;
    color: #fff;
  }
}
.platform-ios {
  #contract-record  {
    .pay-content {
      height: 370px;
    }
  }
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #contract-record {
      .pay-content {
        height: 9.4rem;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #contract-record {
      .pay-content {
        height: 9.4rem;
      }
    }
  }
}

</style>
