<template>
    <main>
    <!-- 借款流程 -->
    <section class="container">
        <div class="body">
            <div class="top-apply">
                <div class="apply-left"></div>
                <div class="apply-text">借款申请</div>
            </div>
            <section class="procedure">
                <section class="big">
                    <div class="top-state">
                        <div class="state-topbig">
                            <div class="state-top">
                                <div class="state-icon">
                                    <img src="~assets/images/icon-input.png" alt />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-examine.png"
                                    />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-sign.png"
                                        alt
                                    />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-Loan.png"
                                        alt
                                    />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-complete.png"
                                        alt
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="state-bottom">
                            <div class="content">
                                <div
                                    class="biankuang"
                                ></div>
                                <div class="state-text">输入意向借款金额</div>
                            </div>
                            <div class="content">
                                <div
                                    class="biankuang"
                                ></div>
                                <div class="state-text">等待审核</div>
                            </div>
                            <div class="content">
                                <div
                                    class="biankuang"
                                ></div>
                                <div class="state-text">签署支用合同</div>
                            </div>
                            <div class="content">
                                <div
                                    class="biankuang"
                                ></div>
                                <div class="state-text">等待放款</div>
                            </div>
                            <div class="content">
                                <div class="biankuang"></div>
                                <div class="state-text">借款审批完成</div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 借款完成 -->
                <section class="complete" >
                    <div class="complete-icon">
                        <img src="~assets/images/icon-loancom.png" alt />
                    </div>
                    <div class="complete-text">恭喜你，借款完成啦</div>
                    <div class="complete-textsmall">温馨提示：目前只支持一笔在贷，如果需要申请新的借款，需要先还清上一笔哦</div>
                    <div class="complete-big">
                        <div class="complete-money">还款金额（元）</div>
                        <div class="complete-account">还款账户</div>
                    </div>
                    <div class="complete-hao">
                        <div class="complete-moneyhao">{{formatNum(realAmt)}}</div>
                        <div class="complete-accounthao">
                            <div class="accounthao-icon">
                                <img src="bankCode" alt />
                            </div>{{paymentaccount}}
                        </div>
                    </div>
                    <a class="completemenu-homepage" href="/loan/borrowMoney">回到首页</a>
                </section>
            </section>
        </div>
    </section>
</main>

</template>

<script>
import { mapState, mapMutations } from "vuex";
import {api_loan_loanApplicationDetailed,api_loan_condition} from "api/loan.js";
import utils from "utils/utils.js";
let host = process.env.NODE_ENV == "development" ? "/api" : "";
export default {
    data() {
        return {
            states:'',
        }
    },
    name: "borrowMoneysuccess",

    methods: {
        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() {
        document.getElementsByTagName("html")[0].style.background = "#f7f7f7";
        
        let applicationparams = {
            params: {}
        };
        api_loan_condition(applicationparams).then(res => {
            if (res.success) {
                this.states = res.data.reverseStatus;
                let loanApplicationDetailedparams = {
                    params: {
                        loanNo: res.data.loanNo
                    }
                };
                api_loan_loanApplicationDetailed(
                    loanApplicationDetailedparams
                ).then(res => {
                    if (res.success) {
                        console.log(res.data);
                        this.realAmt = res.data.realAmt;
                        this.paymentaccount =
                            res.data.bankName +
                            "( 尾号：" +
                            res.data.acctNo.replace(/.*(.{4})$/, "$1") +
                            ")";
                        this.bankCode = require("assets/images/bankcard/" +
                            res.data.bankCode +
                            ".png");
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            } else {
                this.$message.error(res.msg);
            }
        })
    },
};
</script>

<style lang="less" scoped>
main {
    display: block;
    margin: 40px 0 49px 0;
    .container {
        width: 100%;
        padding: 30px 0 0 0;
        .body {
            width: 1080px;
            height: auto;
            margin: 0 auto 0;
            left: 50%;
            background: #ffffff;
            padding-bottom: 55px;
            .top-apply {
                width: 100%;
                .apply-left {
                    width: 4px;
                    height: 20px;
                    float: left;
                    background: #3d86e9;
                    margin-right: 18px;
                    transform: translateY(27.3px);
                }
                .apply-text {
                    margin: 0 0 0 16px;
                    font-size: 18px;
                    font-weight: bold;
                    border-bottom: 1px solid #EAEAEA;
                    width: 1040px;
                    height: 22px;
                    transform: translateY(-0.7px);
                    text-align: left;
                    padding: 28px 0 10px 0;
                }
            }
            .procedure {
                .big {
                    width: 960px;
                    margin: auto;
                    padding-top: 31px;
                    .top-state {
                        width: 960px;
                        margin: 0 auto 45px;
                        text-align: center;
                        .state-topbig {
                            width: 960px;
                            height: auto;
                            border-bottom: 1px solid #E6E6E6;
                            .state-top {
                                width: 840px;
                                margin: auto;
                                padding-bottom: 9px;
                                height: 40px;
                                .state-icon {
                                    width: 163px;
                                    display: inline-block;
                                    text-align: center;
                                    img {
                                        width: 40px;
                                        height: 40px;
                                    }
                                }
                            }
                        }
                        .state-bottom {
                            width: 840px;
                            margin: -1px auto 0;
                            .content {
                                width: 163px;
                                display: inline-block;
                                .biankuang {
                                    width: 110px;
                                    margin: auto;
                                    border-top: 1px solid rgba(61, 134, 233, 1);
                                }
                                .state-text {
                                    text-align: center;
                                    font-size: 14px;
                                    font-weight: 400;
                                    color: rgba(51, 51, 51, 1);
                                    padding-top: 20px;
                                }
                            }
                        }
                    }
                }
                .complete {
                    width: 960px;
                    margin: auto;
                    .complete-icon {
                        width: 276px;
                        height: 158px;
                        margin: auto;
                        img {
                            width: 276px;
                            height: 158px;
                        }
                    }
                    .complete-text {
                        font-size: 24px;
                        color: rgba(61, 134, 233, 1);
                        margin: 43px auto 0;
                        text-align: center;
                    }
                    .complete-textsmall {
                        color: rgba(102, 102, 102, 1);
                        font-size: 14px;
                        text-align: center;
                        margin: 24px auto 0;
                    }
                    .complete-big {
                        width: 625px;
                        height: 36px;
                        text-align: center;
                        margin: 32px auto 0;
                        line-height: 36px;
                        background: #F5F5F5;
                        .complete-money {
                            width: 258.5px;
                            display: inline-block;
                            font-size: 14px;
                        }
                        .complete-account {
                            width: 258.5px;
                            display: inline-block;
                            font-size: 14px;
                        }
                    }
                    .complete-hao {
                        width: 625px;
                        height: 36px;
                        text-align: center;
                        margin: 0 auto 0;
                        line-height: 36px;
                        .complete-moneyhao {
                            width: 258.5px;
                            display: inline-block;
                            font-size: 14px;
                        }
                        .complete-accounthao {
                            width: 258.5px;
                            display: inline-block;
                            font-size: 14px;
                            .accounthao-icon {
                                width: 28px;
                                height: 28px;
                                display: inline-block;
                                img {
                                    width: 28px;
                                    height: 28px;
                                    border-radius: 50%;
                                    transform: translateY(8px);
                                }
                            }
                        }
                    }
                    .completemenu-homepage {
                        width: 331px;
                        height: 46px;
                        line-height: 46px;
                        background: rgba(61, 134, 233, 1);
                        border-radius: 4px;
                        font-size: 18px;
                        color: rgba(255, 255, 255, 1);
                        text-align: center;
                        display: block;
                        margin: 25px auto 94px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
