
<template>   
    <main class="wrap">
        <section class="details-form">  
            <div  class="details-form-box">  
                <p class="money"><font class="money-font">¥</font>{{formatNum(refundsdetailData.loanTotal)}}</p>
                <p class="repay">借款金额</p>          
                <a class="downway"   @click="handleCheck(refundsdetailData.loanNo)">查看该笔贷款详情</a>                   
                <span :class="status"></span>  
            </div> 
                                           
        </section>
        <section class="wrap-form">
            <div class="wrap-box">  
                <div class="details-box">
                    <div class="refundsBtext">还款详情</div>
                    <div class="details-table">                    
                        <table>                           
                            <tr>
                                <td class="tdconent">本金（元）</td>
                                <td>{{ formatNum(refundsdetailList[0].indeedCapital) }}</td>
                                <td class="tdconent">利息及费用（元）</td>
                                <td>{{ formatNum(refundsdetailData.plannedInterestAll) }}</td>
                            </tr>
                            <tr>
                                <td class="tdconent">还款时间</td>
                                <td>{{ refundsdetailData.latestRepayDate  }}</td>
                                <td class="tdconent">还款类型</td>
                                <td v-if="refundsdetailData.repayWay=='7'">入账单自动还款</td> 
                                <td v-if="refundsdetailData.repayWay=='02'">其他</td>
                            </tr>
                            <tr>
                                <td class="tdconent">还款手续费（元）</td>
                                <td class="tdconent-border">{{ formatNum(refundsdetailData.otherFee) }}</td>
                                <td class="tdconent"></td>
                                <td class="tdconent-border"></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="details-box">
                    <div class="refundsBtext">借款详情</div>
                    <div class="details-table">                    
                        <table >                           
                            <tr>
                                <td class="tdconent">借款金额（元）</td>
                                <td>{{ formatNum(refundsdetailData.loanTotal) }}</td>
                                <td class="tdconent">借款时间</td>
                                <td >{{ refundsdetailData.maxTerm }}</td>
                            </tr>
                            <tr>
                                <td class="tdconent">还款方式</td>                                
                                <td class="tdconent-border" v-if="refundsdetailData.repayWay =='7'">按日计息，入账自动还款，支持银行卡还款</td> 
                                <td  class="tdconent-border" v-if="refundsdetailData.repayWay =='02'">其他</td> 
                                <td class="tdconent"></td>
                                <td class="tdconent-border"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </main>     
</template>

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

export default {
    data() {
        return {
            total:"",
            refundsdetailData: [],
            refundsdetailList: [],
            status:"", 
        };
    },
    methods: {  
        handleCheck(item) {
            this.loading = true;
            this.$router.push({
                path: "/loan/recordQueryDetails",
                query: {
                    loanNo: item
                }
            });
            this.loading = false;
        },    
        init() {           
            let loanNo = this.$route.query.loanNo;
            let applyId = this.$route.query.applyId; 
             
            this.loading = true;
            let bankListData = {
                params: {
                    loanNo: loanNo,
                    applyId: applyId
                }
                };
            api_capitalDetailedDetails(bankListData).then(res => { //店铺贷->记录查询->资金明细->详情
                if (res.success) {
                    if (res.data.lenght == 0) {
                        this.$message.error(res.msg);
                    } else {
                         this.refundsdetailData = res.data;
                          this.refundsdetailList = res.data.indeedList;
                         let repayType = res.data.repayType;
                        switch (repayType) {
                            case "1":
                                this.status = "choose-one employ"; //使用中
                                break;
                            case "2":
                                this.status = "choose-one settle"; //结清
                                break;
                            case "3":
                                this.status = "choose-one overdue"; //逾期
                                break;
                            case "4":
                                this.status = "choose-one release"; //发放中
                                break;
                            case "5":
                                this.status = "choose-one failure"; //失败
                                break;
                            case "0":
                                this.status = "choose-one apply"; //申请中
                                break;
                        }
                    }
                } 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";
.way-cost /deep/ .el-input {
    width: 331px;
   
}
.way-cost /deep/ .el-radio {
    font-size:14px; 
}

.wrap {
    min-height: calc(100vh - 120px);
    .details-form{   
        width: 100%;
        text-align: center;
        margin: 0 auto;
        background: url(~assets/images/query-banner.png) center center no-repeat;
        background-size:100% 100%;
        padding: 37px 0 24px 0;
        margin-top:-1px;
        min-height:250px;
        .details-form-box{
            margin: 0 auto;
            width: 1080px;  
            position: relative;
            /deep/  .steps {                
                padding-top: 20px;
                padding-bottom: 10px;
                text-align:left;
                margin: 0 auto;
                ul {
                    overflow: hidden;
                    padding-bottom: 6px;                    
                    box-sizing: border-box;
                    li {
                        position: relative;
                        float: left;
                        padding-right:67px;
                        font-size: 18px; 
                        &:first-of-type::after{                  
                            content: "";
                            display: block;
                            position: absolute;
                            left: 50%;
                            box-sizing:border-box;
                            bottom: -6px;
                            width: 69px;
                            height: 1px;
                            margin-left: -67px;
                            background: #3d86e9;  
                        }
                    }

                    .licolor{ color: #3d86e9;  }
                                
                }
            } 
            p{
                margin:15px 0; 
                font-size:12px; 
            }
            .details-font{
                margin:15px 0 62px 0; 
                color:#999999;
                font-size:14px;
            }  
            .repay{
                margin-top:23px;
                font-size:24px;
            }
            .money{ 
                margin:44px 0 20px 0; 
                font-size:48px;
            }
            .money-font{
                font-size:30px;
            }
            .downway {
                width: 330px;
                height: 46px;
                line-height: 46px;
                margin: 24px 0;
                background: #3d86e9;
                color: #fff;
                font-size: 18px;
                font-weight: 200px;
                display: block;
                text-align: center;
                margin: 25px auto 0;
                border: 0px solid transparent;
                cursor: pointer;
                border-radius: 4px;
            }
            .choose-one {
                position: relative;
                margin-top: -81px;
                margin-right: 235px;
                width: 99px;
                height: 81px;

                color: #3d86e9;
                margin-bottom: -1px;
                float: right;
            }
            .employ {
                background: url(~assets/images/icon-employ.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .failure {
                background: url(~assets/images/icon-failure.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .overdue {
                background: url(~assets/images/icon-overdue.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .release {
                background: url(~assets/images/icon-release.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .settle {
                background: url(~assets/images/icon-settle.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .apply {
                background: url(~assets/images/icon-apply.png) left center
                    no-repeat;
                background-size: 100% auto;
            }            
        }         
    }
    .wrap-form {       
        margin: 0 auto ;
        .wrap-box {            
            margin:0 auto; 
            .no-data {  
                width:100%;
                box-sizing:border-box;
                background: #fff;
                height: max-content; 
                img {
                    margin-top: 57px;
                }
                h3 {
                    margin-top: 20px;
                    font-size: 24px;
                    font-weight: normal;
                    color: #3f87e9;
                }
                p {
                    margin: 20px auto 67px;
                    font-size: 14px;
                    color: #999;
                }
            }
            
            .details-box{     
                display: inline-block;    
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                vertical-align: text-top;
                font-size:9px;
                width: 1080px;
                margin: 0 auto 20px;
                .refundsBtext{ 
                    text-align: left;
                    margin: 0;
                    padding: 30px 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;
                            text-indent: 0px;
                            width:200px;
                        }
                        .tdconent-border{ 
                            width:340px; 
                            height:48px;
                            border-bottom:0px solid #F4F4F7;
                            text-indent: 25px;
                        }
                    }
                }
            }
            .clear{ clear:both} 
        }
    }
}
</style>
