<template>
    <main class="main" :data="detailData">
        <section class="details-form">
            <p class="money">
                <font class="moneyfont">¥</font>
                {{ formatNum(detailData.plannedTotalAll) }}
            </p>
            <p class="repay">应还金额</p>
            <p>{{ detailData.loanDate }}</p>
            <p class="details-font">自动还款，一旦收款账户入账即自动发起汇兑还款</p>
        </section>
        <div class="clear"></div>
        <section class="details-box">
            <div class="refundsBtext">及时雨贷款</div>
            <div class="details-table">
                <table class="tdconent-div">
                    <tr>
                        <th colspan="4">
                            <div class="vLine-div">
                                <span class="vtitle">借款总金额:</span>
                                <span class="vmoney">
                                    <font class="vmoneyfont">¥</font>
                                    {{ formatNum(detailData.plannedCapitalAll) }}
                                </span>
                            </div>
                            <p class="vLine"></p>
                            <div class="vLine-div">
                                <span class="vtitle">放款时间</span>
                                <span>{{ detailData.loanDate }}</span>
                            </div>
                        </th>
                    </tr>
                    <tr>
                        <td class="tdconent">放款机构</td>
                        <td class="tdconent-border-text">{{ detailData.loanOrg }}</td>
                        <td class="tdconent">收款账号</td>
                        <td class="tdconent-border-text">{{ detailData.repayNo }}</td>
                    </tr>
                    <tr>
                        <td class="tdconent">还款方式</td>
                        <td
                            class="tdconent-border-text"
                            v-if="detailData.repayWay=='7'"
                        >按日计息，入账自动还款，支持银行卡还款</td>
                        <td class="tdconent-border-text" v-if="detailData.repayWay=='02'">其他</td>
                        <td class="tdconent">日利率费</td>
                        <td class="tdconent-border-text">{{ detailData.totalRate }}</td>
                    </tr>
                    <tr>
                        <td class="tdconent">最早还款日期</td>
                        <td class="tdconent-border-text">{{ detailData.earliestRepayDate }}</td>
                        <td class="tdconent">最早还款日应还本息(元)</td>
                        <td
                            class="tdconent-border-text"
                        >{{ formatNum(detailData.earliestPlannedTotal) }}</td>
                    </tr>
                    <tr>
                        <td class="tdconent">最晚还款日期</td>
                        <td class="tdconent-border">{{ detailData.latestRepayDate }}</td>
                        <td class="tdconent">最晚还款日应还本息(元)</td>
                        <td class="tdconent-border">{{ formatNum(detailData.latestPlannedTotal) }}</td>
                    </tr>
                </table>
            </div>

            <div class="refunds" v-show="refundsListPlay">
                <div class="refunds-box" v-for="(item,index) in resList" :key="index">
                    <table class="tdconent-div">
                        <tr>
                            <th colspan="4" class="refunds-th">
                                <span class="vtitle">还款金额:</span>
                                <span class="vmoney">
                                    <font class="vmoneyfont">¥</font>
                                    {{ formatNum(item.indeedTotal) }}
                                </span>
                                <p class="vLine-p"></p>
                                <span class="vtitle">还款时间</span>
                                <span>{{ item.repayDate }}</span>
                                <p class="vmoney-one">
                                    第<font>{{ index + 1 }}</font>次还款
                                </p>
                            </th>
                        </tr>
                        <tr>
                            <td class="tdconent">应还总额(元)</td>
                            <td class="tdconent-border-text">{{ formatNum(item.indeedTotal) }}</td>
                            <td class="tdconent">实还总额(元)</td>
                            <td class="tdconent-border-text">{{ formatNum(item.indeedTotal) }}</td>
                        </tr>
                        <tr>
                            <td class="tdconent">应还本金(元)</td>
                            <td class="tdconent-border-text">{{ formatNum(item.indeedCapital) }}</td>
                            <td class="tdconent">实还本金(元)</td>
                            <td class="tdconent-border-text">{{ formatNum(item.indeedCapital) }}</td>
                        </tr>
                        <tr>
                            <td class="tdconent">应还利息及费用(元)</td>
                            <td
                                class="tdconent-border-text"
                            >{{ formatNum(item.indeedInterest+item.indeedAccountAmt+item.indeedAmerce)}}</td>
                            <td class="tdconent">实还利息及费用(元)</td>
                            <td
                                class="tdconent-border-text"
                            >{{ formatNum(item.indeedInterest+item.indeedAccountAmt+item.indeedAmerce)}}</td>
                        </tr>
                        <tr>
                            <td class="tdconent">还款方式</td>
                            <td class="tdconent-border">
                                <p v-if="detailData.repayWay=='7'">按日计息，入账自动还款，支持银行卡还款</p>
                                <p v-else-if="detailData.repayWay=='02'">其他</p>
                            </td>
                            <td class="tdconent">还款账号</td>
                            <td class="tdconent-border">{{ item.repayAccount }}</td>
                        </tr>
                    </table>
                </div>
                <div class="clear"></div>
            </div>
            <div class="refunds" v-show="nodataListPlay">
                <div class="advance clearfix">
                    <p class="submit">
                        <span class="submit-img">
                            <img src="~assets/images/icon-project.png" alt />
                        </span>
                        <span class="way">很遗憾您还没有还款计划！</span>
                        <router-link to="/loan/borrowMoney" target="_blank">快去交易吧！</router-link>
                    </p>
                </div>
            </div>
        </section>
    </main>
</template>


<script>
import { mapState, mapMutations } from "vuex";
import { api_detailed } from "api/loan.js";
import utils from "utils/utils.js";

export default {
    data() {
        return {
            detailData: [],
            resList: [],
            refundsListPlay: false,
            nodataListPlay: false,
            loading: false
        };
    },
    methods: {
        init() {
            this.loading = true;
            let loanNo = this.$route.query.loanNo;
            let applyId = this.$route.query.applyId;

            console.log(loanNo);

            let bankListData = {
                params: {
                    loanNo: loanNo,
                    applyId: applyId
                }
            };
            api_detailed(bankListData).then(res => {
                if (res.success) {
                    if (res.data.lenght == 0) {
                        this.nodataListPlay = true;
                    } else {
                        this.refundsListPlay = true;
                        this.detailData = res.data;
                        this.resList = res.data.indeedList;
                    }
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        formatNum(strNum) {
            var outputmoney = function(number) {
                number = number.replace(/\,/g, ""); //把所有的逗号，清除
                if (isNaN(number) || number == "") return "";
                number = Math.round(number * 100) / 100;
                if (number < 0)
                    return (
                        "-" +
                        outputdollars(Math.floor(Math.abs(number) - 0) + "") +
                        outputcents(Math.abs(number) - 0)
                    );
                else
                    return (
                        outputdollars(Math.floor(number - 0) + "") +
                        outputcents(number - 0)
                    );
            };
            //格式化金额
            var outputdollars = function(number) {
                if (number.length <= 3) {
                    return number == "" ? "0" : number;
                } else {
                    var mod = number.length % 3;
                    var output = mod == 0 ? "" : number.substring(0, mod);
                    for (let i = 0; i < Math.floor(number.length / 3); i++) {
                        if (mod == 0 && i == 0) {
                            output += number.substring(
                                mod + 3 * i,
                                mod + 3 * i + 3
                            );
                        } else {
                            output +=
                                "," +
                                number.substring(mod + 3 * i, mod + 3 * i + 3);
                        }
                    }
                    return output;
                }
            };
            var outputcents = function(amount) {
                amount = Math.round((amount - Math.floor(amount)) * 100);
                return amount < 10 ? ".0" + amount : "." + amount;
            };
            return outputmoney(strNum + "");
        }
    },
    created() {
        this.init();
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";

.main {
    display: block;
    min-height: calc(100vh - 224px);
    margin: 40px 0;
    .details-form {
        width: 100%;
        text-align: center;
        background: url(~assets/images/pmtbanner.png) center center no-repeat;
        background-size: auto 100%;
        margin-top: -1px;
        p {
            padding: 15px 0;
            font-size: 12px;
        }
        .details-font {
            padding: 15px 0 62px 0;
            color: #999999;
            font-size: 14px;
        }
        .repay {
            padding-top: 23px;
            font-size: 24px;
        }
        .money {
            padding: 44px 0 20px 0;
            font-size: 48px;
        }
        .moneyfont {
            font-size: 30px;
        }
    }
    .details-box {
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: text-top;
        font-size: 9px;
        background: transparent;
        width: 1080px;
        margin: 0 auto;

        .refundsBtext {
            text-align: left;
            margin: 0 0;
            padding-top: 20px;
            font-size: 18px;
            border-bottom: 0px solid #eaeaea;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-weight: bold;
        }

        .details-table {
            width: 1080px;
            background: #ffffff;
            margin: 0 auto 20px;
            padding-bottom: 10px;
            height: min-content;
            table {
                width: 1030px;
                background: #ffffff;
                border-collapse: collapse;
                margin: 20px auto;
                text-align: left;
                font-size: 14px;

                tr th {
                    height: 64px;
                    span {
                        padding: 0 5px;
                        font-size: 14px;
                        font-weight: 400;
                        float: left;
                    }
                    .vmoney {
                        font-weight: 400;
                        padding-right: 25px;
                        font-size: 18px;
                    }
                    .vmoneyfont {
                        font-size: 14px;
                    }
                }
                tr td {
                    height: 48px;
                    border-bottom: 1px solid #f4f4f7;
                }
            }
        }
        .vLine-div {
            float: left;
        }
        .vLine {
            border-left: solid 1px #ccc;
            height: 20px;
            vertical-align: middle;
            float: left;
            padding-right: 25px;
        }
        .vLine-p {
            border-left: solid 1px #ccc;
            height: 20px;
            vertical-align: middle;
            display: inline-block;
            padding-right: 25px;
        }

        .vmoney-one {
            background: #4b87fa;
            color: #fff;
            display: inline-block;
            margin-left: 12px;
            padding: 7px 20px;
            border-radius: 4px;
            -moz-border-radius: 4px; /* Old Firefox */
            height: 24px;
            background: url(~assets/images/icon-vmoneyone.png) no-repeat;  
            background-size: 100% 100%; 
        }
        .vtitle {
            color: #999999;
        }
    }

    /deep/ .refunds {
        width: 1080px;
        background: #ffffff;
        margin: 0 auto;
        height: min-content;
        .refunds-box {
            width: 1030px;
            margin: 0 auto;
            padding-bottom: 20px;
            table {
                width: 1030px;
                background: #ffffff;
                border-collapse: collapse;
                margin: 0 auto;
                padding: 80px 10px;
                text-align: left;
                font-size: 14px;
                tr th {
                    width: 20%;
                    height: 64px;
                    span {
                        padding: 0 5px;
                        font-size: 14px;
                        font-weight: 400;
                    }
                    .vmoney {
                        font-weight: 400;
                        padding-right: 25px;
                        font-size: 18px;
                    }
                    .vmoneyfont {
                        font-size: 14px;
                    }
                }
                tr td {
                    height: 48px;
                    border-bottom: 1px solid #f4f4f7;
                }
            }
        }
        .refunds-th {
            text-align: left;
        }
        .refunds-box:nth-child(1) {
            border-bottom: 1px solid #eaeaea;
        }

        .advance {
            width: 100%;
            background: #ffffff;
            margin: 0 auto;
            font-size: 12px;
            color: #333333;
            p.submit {
                width: 100%;
                padding: 34px 0;
                margin: 0 auto;
                span,
                a {
                    display: block;
                    font-size: 14px;
                    width: 80%;
                    margin: 25px auto;
                    text-align: center;
                    color: #999999;
                }
                .submit-img {
                    width: 80%;
                    margin-bottom: 35px;
                }
                .way {
                    color: #3d86e9;
                    font-size: 24px;
                    font-weight: 200px;
                }
            }
        }
    }

    .tdconent-div {
        .tdconent {
            width: 20%;
            background: #f4f4f7;
            border-bottom: 1px solid #ffffff !important;
            color: #999999;
            border-left: 1px solid #ffffff;
            font-size: 12px;
            text-indent: 0px;
            text-align: center;
        }
        .tdconent-border {
            width: 340px;
            height: 48px;
            border-bottom: 0px solid #f4f4f7 !important;
            text-indent: 25px;
        }
        .tdconent-border-text {
            width: 340px;
            height: 48px;
            border-bottom: 1px solid #f4f4f7 !important;
            text-indent: 25px;
        }
    }

    /deep/.contentpage {
        display: inline-block;
        padding: 29px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: text-top;
        font-size: 12px;
        width: 1080px;
        margin: 0 auto;
        .el-pagination .el-pagination__total,
        .el-input__inner,
        .el-pagination__jump {
            color: #9b9b9b;
        }
    }

    .clear {
        clear: both;
    }
}
</style>

