<template>
  <h-view id="contract-repayment" 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>
    <scroll
      v-if="data!==null"
      ref="scroll" :updateData="[lists]" :pullUp="true" class="pay-content"
      @pullingUp="getList">
      <div v-for="(item,index) in lists" :key="index" class="contract-item">
        <div class="header">
          <img src="@/assets/contractRepayment/contract.png" alt="">
          <h2>{{ item.project_number }}</h2>
          <!-- 状态用类名控制  待还款orange,待签约blue,还款中green -->
          <p :class="{'green':item.repayment_status==='首付还款中','blue':item.repayment_status==='待首付','orange':item.repayment_status==='还款中','grey':item.repayment_status==='已结清'}">{{ item.repayment_status }}</p>
        </div>
        <div class="center">
          <div><span>合同金额</span><p>{{ item.total_price|currency }}</p></div>
          <div><span>已还金额</span><p class="bold">{{ item.received_amount|currency }}</p></div>
          <span v-if="item.overdue_status==='已逾期'" class="red">已逾期</span>
          <section @click="toRepayDetails(item)">
            <img src="@/assets/contractRepayment/view.png" alt="">
            <span>查看合同明细</span>
          </section>
        </div>
      </div>
    </scroll>
    <div v-if="data===null">
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="">
      </div>
    </div>
   <!-- <h-content v-if="data===null" class="null has-header">
      <div class="noData">
        <img src="@/assets/messageCenter/noMsg.png" alt="">
      </div>
    </h-content>-->
  </h-view>
</template>

<script>

export default {
  name: 'ContractRepayment',
  components: {
  },
  data () {
    return {
    //   data: null,  无记录时
      pagenum: 1,
      lists: [],
    }
  },
  computed: {
    data () {
      if (this.lists.length === 0) {
        return null
      } else {
        return 1
      }
    },
  },
  watch: {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'HomePage') {
        vm.pagenum = 1
        vm.lists = []
        vm.getList()
      }
    })
  },
  methods: {
    getList () {
      let vm = this
      let url = process.env.basePath + 'con_repayment_list_query'
      let param = {
        user_phone: window.localStorage.getItem('user_phone'),
        pagesize: 10,
        pagenum: vm.pagenum,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.lists.push(array[index])
            })
            vm.pagenum++
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.lists.push(array[index])
            })
            vm.pagenum++
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    toRepayDetails (e) {
      this.$router.push({
        name: 'RepayDetails',
        params: {
          project_id: e.project_id,
          overdue_status: e.overdue_status,
        },
      })
    },
  },
}
</script>
<style lang='less' >
#contract-repayment {
  .display {
    position: fixed;
   // top: 0;
    img {
      width: 100%;
      height: 100%;
      // margin-top: -70px;
    }
  }
  .null{
    margin-top:46px;
  }
  .noData{
     width:100%;
     height:100%;
    img{
     height:100%;
      width:100%;
    }
  }
  .h-header {
    background-color: @headerColor;
    .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;
      }
    }
  }

  .pay-content {
    padding: 0 8px;

    .contract-item {
      height: 150px;
      background-color: #fff;
      margin-top: 8px;

      .header {
        position: relative;
        height: 44px;

        img {
          position: absolute;
          width: 30px;
          height: 30px;
          left: 10px;
          top: 8px;
        }

        h2 {
          position: absolute;
          top: 13px;
          left: 50px;
          font-family: PingFangSC-Semibold;
          font-size: 15px;
          color: #4B4A4B;
          letter-spacing: 0;
          margin: 0px;
          font-weight: 700;
        }

        p {
          position: absolute;
          right: 20px;
          top: 13px;
          width: 57px;
          height: 21px;
          line-height: 19px;
          text-align: center;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }

        p.orange {
          border: 1px solid #FDB62F;
          color: #FDB62F;
        }
        p.grey{
          border: 1px solid grey;
          color: grey;
        }
        p.blue {
          color: @headerColor;
          border: 1px solid @headerColor;
        }

        p.green {
          color: #1BA261;
          border: 1px solid #1BA261;
        }
      }

      .center {
        padding-left: 50px;
        height: 106px;
        padding-right: 24px;
        position: relative;

        div {
          display: flex;
          padding: 8px 0;

          span {
            flex:1;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #4B4A4B;
          }

          p {
            flex:2;
            text-align: right;
            font-family: Verdana;
            font-size: 14px;
            color: #4B4A4B;
          }

          p.bold {
            font-weight: 700;
            font-family: Verdana-Bold;
          }
        }

        div:first-child {
          border-top: 1px solid #F3F3F7;
        }
        span.red{
          margin-top: 10px;
          position: relative;
          top: 10px;
          color: #F04747;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }

        span.red::before {
          position: absolute;
          bottom: -1px;
          content: "";
          width: 100%;
          height: 4px;
          background-color: rgb(255, 169, 169);
        }

        section {
          position: absolute;
          width: 123px;
          height: 30px;
          right: 24px;
          bottom: 13px;
          line-height: 30px;
          background: rgba(33, 37, 76,.1);
          border-radius: 4px;

          img {
            width:16px;
            position: absolute;
            top: 8px;
            left: 8px;
          }

          span {
            position: absolute;
            left: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #21254C;
          }
        }
      }
    }
  }
  .content {
    position: absolute;
    top: 0;
  }
  .scrollContent {
    padding-top: 0.8rem;
    padding-bottom: 20px;
  }
}

.platform-ios {
  #contract-repayment {
    .scrollContent {
      padding-top: 1.2rem;
    }
    .null{
    margin-top:1.32em;
  }
  }
}

@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #contract-repayment {
      .scrollContent {
        padding-top: 1.6rem;
      }
      .null{
    margin-top:1.72em;
  }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #contract-repayment {
      .scrollContent {
        padding-top: 1.6rem;
      }
      .null{
    margin-top:1.72em;
  }
    }
  }
}
</style>
