<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>

    <div style="margin-left: 50px" v-if="repaymentInfo.length!=0">
      <sub-title>贷款试算结果</sub-title>
      <div class="content-box">
        <div class="total-box" >
          <div style="font-size: 16px">还款总额(元):{{ totalMoney }}</div>
          <div style="font-size: 16px">利息总额(元):{{ totalInterest }}</div>
        </div>
        <table style="margin-left: 20px;width: 80%;margin-top: 30px" class="customer-management-information-form">
          <tr>
            <td>期次</td>
            <td>还款金额(元)</td>
            <td>本金(元)</td>
            <td>利息(元)</td>
          </tr>
          <tr v-if="repaymentInfo.length == 0">
            <td style="text-align: center" colspan="6">暂无数据！</td>
          </tr>
          <tr
            v-if="repaymentInfo.length != 0 && item"
            v-for="(item, index) in repaymentInfo"
            :key="index"
          >
            <td>{{ index + 1 }}</td>
            <td>{{ item.everyMonthMoney }}</td>
            <td>{{ item.monthLoanMoney }}</td>
            <td>{{ item.curMonthInterest }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div v-else align="center">
      <img
        src="@/assets/images/nodata.png"
        style="width: 40%; margin-top: 137px"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { NativeUI } from "@/public/ts/NativeUI";
import TableDoubleView from "@/public/TableDoubleView.vue";
import TableSingleView from "@/public/TableSingleView.vue";
import Public from "@/public/ts/Public";

/**
 * @Description 项目信息
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:17
 */
@Component({
  name: "LoanCalculationDetail",
  components: { TitleBar }
})
export default class LoanCalculationDetail extends Vue {
  title = "贷款试算结果"; // 页面标题
  repaymentInfo = this.$store.getters.getCalculateRes;
  totalMoney: any = 0; //总共要还的钱
  totalInterest: any = 0;//总共要还的利息
  // keyValueDouble: any = {
  //   totalMoney: "还款总额(元)",
  //   totalInterest: "利息总额(元)"
  // };
  // totalInfo: any = {};

  mounted() {
    console.log(this.repaymentInfo);
    this.formatNum();
  }

  formatNum() {
    this.totalInterest = Public.formatMoney(this.repaymentInfo[this.repaymentInfo.length - 1].repayInterestMoney, ",");
    for (let i = 0; i < this.repaymentInfo.length; i++) {
      if (i == this.repaymentInfo.length - 1) {
        let temp: any =
          parseFloat(this.repaymentInfo[this.repaymentInfo.length - 1].repayLoanMoney) +
          parseFloat(this.repaymentInfo[this.repaymentInfo.length - 1].repayInterestMoney);
        temp = String(temp);
        this.totalMoney = Public.formatMoney(temp, ",");
        console.log(temp, "=============================");
      }
      this.repaymentInfo[i].curMonthInterest = Public.formatMoney(this.repaymentInfo[i].curMonthInterest, ",");
      this.repaymentInfo[i].monthLoanMoney = Public.formatMoney(this.repaymentInfo[i].monthLoanMoney, ",");
      this.repaymentInfo[i].everyMonthMoney = Public.formatMoney(this.repaymentInfo[i].everyMonthMoney, ",");
      this.repaymentInfo[i].repayLoanMoney = Public.formatMoney(this.repaymentInfo[i].repayLoanMoney, ",");
      this.repaymentInfo[i].repayInterestMoney = Public.formatMoney(this.repaymentInfo[i].repayInterestMoney, ",");
    }
  }
}
</script>

<style scoped>
::v-deep .van-index-bar__sidebar {
  top: 130px !important;
  right: 5px !important;
  transform: unset;
}

.no-data-class {
  width: 40%;
}

.content-box {
  margin-bottom: 1.5%;
  overflow-y: auto;
  overflow: scroll;
  height: calc(100vh - 170px);
}
.total-box{
  width: 60%;
  /*margin-top: 30px;*/
  justify-content: space-around;
  /*margin: 20px;*/
  margin-right: 40%;
  font-size: 16px;
  display: flex
}
</style>