<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">
        <table style="margin-left: 20px;width: 80%;margin-top: 30px" class="customer-management-information-form">
          <tr>
            <td>期次</td>
            <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>{{ getDate(item.date) }}</td>
            <td>{{ item.CMoney }}</td>
            <td>{{ item.money }}</td>
            <td>{{ item.BMoney }}</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: wanghang
 *@date: 2022/2/24
 */
@Component({
  name: "RepaymentTrialDetail",
  components: { TitleBar }
})
export default class RepaymentTrialDetail extends Vue {
  title = "随意分提用试算"; // 页面标题
  repaymentInfo = this.$store.getters.getCalculateRes;

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

  formatNum() {
    for (let i = 0; i < this.repaymentInfo.length; i++) {
      this.repaymentInfo[i].CMoney = Public.formatMoney(this.repaymentInfo[i].CMoney, ",");
      this.repaymentInfo[i].BMoney = Public.formatMoney(this.repaymentInfo[i].BMoney, ",");
      this.repaymentInfo[i].money = Public.formatMoney(this.repaymentInfo[i].money, ",");
    }
  }
  getDate(date:any) {
    return date.year + '年' + date.monthValue + '月' + date.dayOfMonth + '日';
  }
}
</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>
