<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-sign2.png"
                                        alt
                                    />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-Loan2.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="state-text">签署支用合同</div>
                            </div>
                            <div class="content">
                                <div class="state-text">等待放款</div>
                            </div>
                            <div class="content">
                                <div class="state-text">借款审批完成</div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 审核 -->
                <section class="toexamine">
                    <div class="toexamine-icon">
                        <img src="~assets/images/icon-status-auth-waiting.png" alt />
                    </div>
                    <div class="toexamine-texto" v-if="states == 66 ||  states == 6">借款申请提交成功，请耐心等待审核</div>
                    <div class="toexamine-textc" v-if="states == 7">审核成功</div>
                    <div class="text">温馨提示：签署合同是借款人和担保人均需查收验证码进行校验!</div>
                    <div class="toexamine-menuc" @click="nowrite" v-if="states == 66 || states == 6">返回</div>
                    <div class="toexamine-menuc" @click="write" v-if="states == 7">签署合同</div>
                </section>
            </section>
        </div>
    </section>
</main>

</template>

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

    methods: {
        write(){
            this.$router.push({
                path:"/loan/borrowMoneywrite",
                query:{
                    loan:this.loanid
                }
            })
        },
        nowrite(){
            this.$router.push({
                path:"/loan/borrowMoney",
                query:{
                    loan:this.loanid
                }
            })
        }
    },
    created() {
        document.getElementsByTagName("html")[0].style.background = "#f7f7f7";
        let applicationparams = {
            params: {}
        };
        api_loan_condition(applicationparams).then(res => {
            this.information = res.data;
            this.states = res.data.reverseStatus;
            console.log(this.states);
            // console.log(res.data.reverseStatus);
        });
    }
};
</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;
            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;
                                }
                            }
                        }
                    }
                }
                .toexamine {
                    width: 960px;
                    margin: 9px auto 0;
                    .toexamine-icon {
                        width: 276px;
                        height: 158px;
                        line-height: 158px;
                        margin: 0 auto 3px;
                        img {
                            width: 243px;
                            height: 126px;
                            margin: 16px auto 0;
                        }
                    }
                    .toexamine-texto {
                        font-size: 24px;
                        color: rgba(61, 134, 233, 1);
                        margin: 40px auto;
                        text-align: center;
                    }
                    .toexamine-textc {
                        font-size: 24px;
                        color: rgba(61, 134, 233, 1);
                        margin: 40px auto;
                        text-align: center;
                    }
                    .text{font-size:14px;font-weight:400;margin-bottom: 40px;color: #999999;}
                    .toexamine-menuc {
                        border-radius: 4px;
                        background: rgba(61, 134, 233, 1);
                        width: 331px;
                        height: 46px;
                        margin: 0 auto 44px;
                        text-align: center;
                        line-height: 46px;
                        color: #ffffff;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
