<!-- 融资明细 -->
<template>
  <h-view id="financing-apply-financing" 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>

    <h-content>
      <div class="header">
        <div class="header-title">
          <p class="key">融资金额</p>
          <p class="value">￥ {{ currency(currencyObj.financing_num) }}</p>

          <div class="times">
            {{ currencyObj.lease_times }}期
          </div>
        </div>
        <div class="header-bottom">
          <table>
            <tr class="key">
              <td>保证金</td>
              <td>首付款</td>
              <td>手续费</td>
            </tr>
            <tr class="secend_value">
              <td>￥{{ currency(currencyObj.deposit) }}</td>
              <td>￥{{ currency(currencyObj.down_payment) }}</td>
              <td>￥{{ currency(currencyObj.lease_charge) }}</td>
            </tr>
          </table>
        </div>
      </div>

      <div class="list">
        <p>还款计划</p>
        <div class="plan-list">
          <div class="plan_item" v-for="ele, i in currencyObj.cashFlow">
            <div class="space" style="flex: 1 0 15%">
              <div class="item-times">{{ ele.times }}期</div>
              <div class="item-date">{{ getYear(ele.due_date) }}</div>
              <div style="margin-top: 0;">{{ getDate(ele.due_date) }}</div>
            </div>
            <div class="space">
              <div>本金 ￥ {{ currency(ele.principal) }}</div>
              <div>租金 ￥ {{ currency(ele.rental) }}</div>
            </div>
            <div class="space">
              <div>利息 ￥ {{ currency(ele.interest) }}</div>
            </div>
          </div>
        </div>
      </div>
    </h-content>
  </h-view>
</template>

<script>

export default {
  prop: [],
  data() {
    return {
      currencyObj: {
        financing_num: '',
        deposit: '',
        down_payment: '',
        lease_charge: '',
        lease_times: 12,
        cashFlow: [
          {

          }
        ]
      }
    }
  },
  mounted() {
    let headInfo = JSON.parse(this.$route.params.headInfo)
    this.currencyObj = { ...this.currencyObj, ...headInfo }
    this.currencyObj.cashFlow = JSON.parse(this.$route.params.cash_lists)
  },
  methods: {
    currency(num, dotNum = 2) {
      if (num === null || num === undefined || isNaN(+num)) return num;
      return (+num).toLocaleString("en-US", { style: "decimal", minimumFractionDigits: dotNum, maximumFractionDigits: dotNum });
    },
    getYear(date) {
      if (!date) return
      return date.split('-')[0]
    },
    getDate(date) {
      if (!date) return
      let list = date.split('-')
      return list[1] + '-' + list[2]
    }
  }
}
</script>

<style lang="less" scoped>
@bc: #3079d8;

.header {
  height: 19vh;
  width: 100%;
  padding-left: 10vw;
  background-color: #02459a;
  color: #fff
}

.list {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 25vh);
  background-color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-sizing: border-box;
  padding: 10px 15px 0 15px;
  color: black;
  overflow: hidden;

  p {
    margin-bottom: 3px;
    color: #02459a;
    font-size: 16px;
  }
}

.plan-list {
  flex: 1 0 auto;
  height: 80%;
  overflow-y: auto;
}

.plan-footer {
  flex: 0 1 50px;
  display: flex;
  justify-content: center;
}

.header-title {
  position: relative;
  height: 11vh;
  display: flex;
  flex-direction: column;
}

.key {
  line-height: 4vh;
}

.value {
  font-size: 23px;
  font-weight: 600;
  line-height: 4vh;
}

.times {
  position: absolute;
  right: 10vw;
  top: 2vw;
  height: 5vh;
  width: 7vh;
  background-color: #fff;
  border-radius: 5px;
  font-weight: 600;
  color: @bc;
  line-height: 5.5vh;
  text-align: center;
  font-size: 14px;
}

.times::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: linear-gradient(143deg, #fff 0%, #fff 50%, transparent 50%);
  transform: translateY(-10px);
}

table {
  width: 100%;
}

.secend_value {
  font-weight: 600;
}

.bar-custom {
  background-color: #02459a;
}

.plan_item {
  height: 65px;
  background-color: #f6f0e8;
  width: 100%;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 5px;
  color: #7f7f7f;

  div {
    flex: 1 0 33%;
    height: 20px;
  }

  .item-times {
    background-color: #f9dab2;
    padding-right: 5px;
    width: 36px;
    line-height: 18px;
  }

  .item-date {
    flex: 0 0 auto;
    padding-right: 5px;
    margin: 0;
    line-height: 18px;
  }
}

.plan_item+.plan_item {
  margin-top: 10px;
}

.space div+div {
  margin-top: 15px;
}
</style>
