<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="center">
      <div class="now-pay">
        <div>当前应付</div>
        <div><span>￥</span>{{ money |currency }}</div>
      </div>
    </div>
    <h-content class="pay-content">
      <section v-for="(item,index) in prj_lists" :key="index" class="contract-item">
        <div class="header">
          <img src="@/assets/payment/contract.png" alt="">
          <p>合同号  &nbsp; {{ item.project_number }}</p>
          <span>{{ item.bp_name }}</span>
        </div>
        <div class="title">
          <div><span>款项</span><span>应还金额</span><span>已还金额</span><span>本次还款额</span></div>
        </div>
        <div class="content">
          <div v-for="(e,i) in item.cf_lists" :key="i" class="list">
            <span>{{ e.cf_item_name }}</span>
            <div>{{ e.due_amount|currency }}</div>
            <p>{{ e.received_amount|currency }}</p>
            <input v-model="e.amount" type="text" placeholder="请输入还款金额">
          </div>
        </div>
      </section>
    </h-content>
    <div class="prompt">
      <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="createDetail">
        支&nbsp;&nbsp;付
      </tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>

export default {
  name: 'ContractRecord',
  components: {
  },
  data () {
    return {
      money: 0,
      inputNum: 0,
      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 => {
              a = a + parseFloat(i)
              vm.money = a
            })
          } else {
            vm.money = 0
          }
        }
      },
      deep: true,
    },

  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getDetail()
    })
  },

  methods: {
    getDetail () {
      let vm = this
      let url = process.env.basePath + 'payment_prj_list_query'
      let param = {
        bp_id: window.sessionStorage.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
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    makeDetailData () {
      let data = []
      this.prj_lists.forEach(i => {
        i.cf_lists.forEach(j => {
          j.project_id = i.project_id
          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.sessionStorage.getItem('bp_id')
      })
      return data
    },
    createDetail () {
      let vm = this
      let url = process.env.basePath + 'create_detail_0_part'
      let data = vm.makeDetailData()
      console.log(data)
      let param = {
        order_id: window.sessionStorage.getItem('order_id'),
        pay_lists: data,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.toPayEntry(vm.money)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    toPayEntry (money) {
      this.$router.push({
        name: 'PayEntry',
        params: {
          money,
        },
      })
    },
  },
}
</script>
<style lang='less' >
#contract-record {
  .h-header {
    background-color: #00469C;
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }

      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.61px;
        line-height: 24px;
      }
    }
  }

  .center {
    position: relative;
    height: 50px;
    background-color: #00469C;

    .now-pay {
      background: url('../../../assets/payment/background.png');
      background-size: 365px;
      background-position: -5px;
      position: absolute;
      left: 10px;
      z-index: 2;
      text-align: center;
      width: 355px;
      height: 89px;
      border-radius: 4px;
      box-shadow: 0 1px 3px 2px rgba(168,168,168,0.14);

      :first-child {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #383F45;
        height: 35px;
        line-height: 42px;
      }

      :last-child {
        font-family: DIN-Bold;
        font-size: 24px;
        color: #FF8300;
        font-weight: 700;

        span {
          font-size: 16px;
          margin-right: 5px;
        }
      }
    }
  }

  .pay-content {
    padding-top: 50px;
    .contract-item {
      background-color: #fff;
      .header {
        height: 34px;
        background: rgba(0,70,156,.1);
        display: flex;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #00469C;
        line-height: 37px;
        padding: 0 16px;

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

        p {
          flex:2;
          font-weight: 700;
        }

        span {
          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;

        .list {
          display: flex;
          justify-content : space-between;
          padding: 0 16px 0 20px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          margin-bottom: 0px;

          span {
            flex:3;
            text-align: left;
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: rgba(56,63,69,0.60);
          }

          div {
            flex:5;
            font-family: DIN-Bold;
            font-size: 15px;
            color: #00469C;
            text-align: center;
            font-weight: 700;
          }

          p {
            flex:5;
            font-family: DIN-Regular;
            font-size: 14px;
            color: rgba(56,63,69,0.60);
          }

          input {
            flex: 5;
            margin-top: 9px;
            width: 96px;
            height: 28px;
            border: 1px solid #00469C;
            border-radius: 2px;
            font-size: 12px;
            text-align: center;
          }

          input::placeholder {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #B4B4B5;
          }

        }
      }
    }

  }

  .prompt {
    background: rgba(142,195,30,0.10);
    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.80);
        letter-spacing: 0.37px;
        margin-left: -22px;
      }
    }
  }

  .bottom-tab-button{
    background: #00469C;
    border-radius: 4px;
    color:white;
    height: 40px;
    margin: 4px 2% 0 2%;
  }

}
</style>