
<template>   
    <main class="wrap">
        <section>
            <div class="wrap-box"> 
                <div class="no-data refunds-data" v-show="nodataListPlay">                  
                    <h3>很遗憾您的授信未能通过！</h3>
                    <p>请联系客服:400-687-3977</p>
                </div>
                 
                <div class="no-data nodata-data" v-show="refundsListPlay">                   
                    <h3>贷款审批已通过</h3>
                    <p>您的贷款审批已通过，可以使用！</p>
                </div>

                <div class="no-data review-data" v-show="reviewListPlay">                   
                    <h3>您的授信申请正在审核中！</h3>
                    <p>您的授信申请正在审核中，请耐心等待！</p>
                </div>

                <div class="details-box" >
                    <div class="refundsBtext">申请人详细信息</div>
                    <div class="details-table">                    
                        <table  :data="detailData" style="" >                           
                            <tr>
                                <td class="tdconent">姓名</td>
                                <td>{{ detailData.name }}</td>
                                <td class="tdconent">身份证号</td>
                                <td>{{ detailData.cardId }}</td>
                            </tr>
                            <tr>
                                <td class="tdconent">手机号</td>
                                <td class="tdconent-border">{{ detailData.mobile }}</td>
                                <td class="tdconent">邮箱</td>
                                <td class="tdconent-border">{{ detailData.email }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

            </div>
        </section>
    </main>     
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_queryAccessDetails } from "api/loan.js";
import utils from "utils/utils.js";
export default {
    data() {
        return {
            detailData: [],
            resList: [],
            repayWay:[
                {
                    id: '01',
                    text:'按日计息，入账自动还款，支持银行卡还款',
                    show:false,
                },
                {
                    id: '02',
                    text:'其他',
                    show:false,
                }
            ],
            refundsListPlay:false, 
            nodataListPlay:false,
            reviewListPlay:false,           
            loading:false,
        };
    },
    methods: {      
        init() {
            let riskNo = this.$route.query.riskNo; 
            this.loading = true;
            let bankListData = {
                    params: {
                        riskNo: riskNo
                    }
                };
            api_queryAccessDetails(bankListData).then(res => {
                if(res.code == '-999'){
                    this.nodataListPlay = true;
                    this.refundsListPlay = false;  
                    this.reviewListPlay = false;              
                    return;
                }
                if (res.success) {
                    if (res.data.applyStatus == 2) {                       
                        

                        this.refundsListPlay = true;
                        this.nodataListPlay = false;
                        this.reviewListPlay = false; 
                        this.detailData = res.data;
                      

                    }else if (res.data.applyStatus == 1) {                       
                        
                        this.reviewListPlay = true; 
                        this.refundsListPlay = false;
                        this.nodataListPlay = false;
                        this.detailData = res.data;
                      

                    } else {
                        this.nodataListPlay = true;
                        this.refundsListPlay = false;
                        this.reviewListPlay = false; 
                        this.detailData = res.data;
                    }
                }
                this.loading = false;                   
            }); 
        },    
    },
    created() {
        this.init();
    }
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/common.css";
.way-cost /deep/ .el-input {
    width: 331px;
   
}
.way-cost /deep/ .el-radio {
    font-size:14px; 
}

.wrap {
    min-height: calc(100vh - 154px);   
    section {       
        margin: 60px auto 0;
        .wrap-box {              
            margin:0 auto;
            .no-data {  
                width:100%;
                box-sizing:border-box;                            
                height: max-content;                           
                h3 {
                    padding-top: 20px;
                    font-size: 24px;
                    font-weight: normal;
                    color: #3f87e9;
                }
                p {
                    padding-top: 20px;
                    padding-bottom:67px;
                    font-size: 14px;
                    color: #999;
                }
            } 
            .nodata-data{
                background: url(~assets/images/icon-status-through.png) center 54px no-repeat #fff;  
                padding-top:195px;
                background-size:276px 158px;    
            }         
            
            .refunds-data{
                background: url(~assets/images/icon-status-nothrough.png) center 54px no-repeat #fff; 
                padding-top:195px;
                background-size:276px 158px;    
            }
            .review-data{                         
                background: url(~assets/images/icon-status-inreview.png) center 54px no-repeat #fff; 
                padding-top:195px;
                background-size:276px 158px;     
            }  
            .details-box{     
                display: inline-block;    
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                vertical-align: text-top;
                font-size:9px;
                background: #f7f7f7; 
                width: 1080px;
                margin: 0 auto 20px;
                .refundsBtext{ 
                    text-align: left;
                    margin: 0;
                    padding: 27px 0;                    
                    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;  
                    padding: 20px;                 
                    table{   
                        width: 100%;
                        box-sizing:border-box;
                        background: #ffffff;    
                        border-collapse: collapse;                         
                        text-align:left;
                        font-size:14px;
                      
                        tr td{   
                            height:48px;
                            border-bottom:1px solid #F4F4F7;
                            text-indent: 25px;
                        }
                        .tdconent{
                            text-align: center;
                            background: #F4F4F7;
                            border-bottom:1px solid #ffffff;
                            color:#999999;
                            border-left:1px solid #ffffff;
                            font-size:12px;
                            width: 200px;
                            text-indent: 0px;
                        } 
                        .tdconent-border{
                            width: 340px;
                            height: 48px;
                            border-bottom: 0px solid #F4F4F7;
                            text-indent: 25px;
                        } 
                    }
                }
            }
            .clear{ clear:both} 
        }
    }
}
</style>
