<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-complete2.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="state-text">借款审批完成</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- 等待放款 -->
                    <section class="collectmoney">
                        <div class="collectmoney-icon">
                            <img src="~assets/images/icon-Receivables.png" alt />
                        </div>
                        <div class="collectmoney-text">成功提交，等着收钱吧</div>
                        <div class="collectmoney-textsmall">预计两个小时后到账，我们会以短信通知到您</div>
                        <div class="collectmoney-big">
                            <div class="collectmoney-money">贷款金额（元）</div>
                            <div class="collectmoney-account">收款账户</div>
                        </div>
                        <div class="collectmoney-hao">
                            <div class="collectmoney-moneyhao">{{formatNum(realAmt)}}</div>
                            <div class="collectmoney-accounthao">
                                <img :src="bankCode" alt />
                                {{paymentaccount}}
                            </div>
                        </div>
                        <a class="menu-homepage" href="/loan/borrowMoney">回到首页</a>
                        <a class="menu-completeok" href="/loan/borrowMoneysuccess" v-if="completestate == 9">借款完成</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() {
        var checkPhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入意向金额"));
            } else if (!utils.regNum(value)) {
                callback(new Error("只能输入数字"));
            } else {
                callback();
            }
        };
        return {
            completestate: 2,
            realAmt: "",
            paymentaccount: "",
            bankCode: ""
        }
    },
    name: "borrowMoneymake",

    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;
                                }
                            }
                        }
                    }
                }
                .collectmoney {
                    width: 960px;
                    margin: auto;
                    text-align: center;
                    .collectmoney-icon {
                        width: 276px;
                        height: 158px;
                        margin: auto;
                        img {
                            width: 276px;
                            height: 158px;
                            margin: auto;
                        }
                    }
                    .collectmoney-text {
                        font-size: 24px;
                        color: rgba(61, 134, 233, 1);
                        margin: 43px auto 0;
                        text-align: center;
                    }
                    .collectmoney-textsmall {
                        color: rgba(102, 102, 102, 1);
                        font-size: 14px;
                        text-align: center;
                        margin: 24px auto 0;
                    }
                    .collectmoney-big {
                        width: 625px;
                        height: 36px;
                        text-align: center;
                        margin: 32px auto 0;
                        line-height: 36px;
                        font-size: 14px;
                        background: #F5F5F5;
                        .collectmoney-money {
                            width: 258.5px;
                            display: inline-block;
                        }
                        .collectmoney-account {
                            width: 258.5px;
                            display: inline-block;
                        }
                    }
                    .collectmoney-hao {
                        width: 625px;
                        height: 36px;
                        text-align: center;
                        margin: 0 auto 0;
                        line-height: 36px;
                        font-size: 14px;
                        .collectmoney-moneyhao {
                            width: 258.5px;
                            display: inline-block;
                        }
                        .collectmoney-accounthao {
                            width: 258.5px;
                            display: inline-block;
                            img {
                                width: 28px;
                                height: 28px;
                                transform: translateY(8px);
                            }
                        }
                    }
                    .menu-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;
                        margin: 46px 30px 0 0;
                        display: inline-block;
                        cursor: pointer;
                    }
                    .menu-completeno {
                        display: inline-block;
                        width: 331px;
                        height: 46px;
                        background: rgba(204, 204, 204, 1);
                        border-radius: 4px;
                        font-size: 18px;
                        color: rgba(255, 255, 255, 1);
                        line-height: 46px;
                        text-align: center;
                        margin: 46px 0 50px 30px;
                        cursor: pointer;
                    }
                    .menu-completeok {
                        display: inline-block;
                        width: 331px;
                        height: 46px;
                        background: rgba(61, 134, 233, 1);
                        border-radius: 4px;
                        font-size: 18px;
                        color: rgba(255, 255, 255, 1);
                        line-height: 46px;
                        text-align: center;
                        margin: 46px 0 53px 30px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    /deep/.el-input__inner {
        height: 46px;
    }
    /deep/.el-form-item__content {
        margin-left: 0 !important;
    }
    /deep/.el-form-item {
        margin-bottom: 0px;
    }
    /deep/.el-form-item__error {
        padding-top: 0px;
        line-height: 0;
        left: 133px;
    }
}
</style>
