<template>
    <main class="wrap">
        <section>
            <div class="add-bankcard recordDialog" >
                <div class="repay-dialog">   
                    <div class="accont-title clearfix">
                        <h5>查看合同</h5>                         
                    </div>                    
                    <div class="number-table">
                        <table :data="detailData">                 
                            <tr>
                                <td class="tdconent">贷款名称</td>
                                <td>{{detailData.productName}}</td>
                                <td class="tdconent">还款方式</td>
                                <td v-if="detailData.repayType=='7'"  >按日计息，入账自动还款，支持银行卡还款</td> 
                                <td v-if="detailData.repayType=='02'">其他</td>
                            </tr>
                            <tr>
                                <td class="tdconent">最晚还款期限</td>
                                <td>{{detailData.loanDays}}天</td>
                                <td class="tdconent">日利率费</td>
                                <td>{{detailData.interestRate}}</td>
                            </tr>
                            <tr>
                                <td class="tdconent">借款时间</td>
                                <td class="tdconent-border">{{detailData.applyDate}}</td>
                                <td class="tdconent"></td>
                                <td class="tdconent-border"></td>
                            </tr>                             
                        </table>
                    </div>                        
                    <div class="bankcard-div">                      
                        <span>在线点击查看 <a v-for="(item,index) in detaillist" :key="index"  @click="download(item)">{{item.docTitle}}</a></span>                 
                    </div>                                       
                </div>
            </div> 
        </section>  
    </main>             
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_queryContract } from "api/loan.js";
import utils from "utils/utils.js";
export default {
    name: "recordDialog",
    data() {
        return {
            detailData:[], 
            detaillist:[], 
            
           
        };
    },
    props: {
        dialogFormVisible: Boolean
    },   
    methods: {
        download(val){        
            window.open(val.viewUrl , "_blank");
        },           
        init() {
            let loanNo = this.$route.query.loanNo;  
            console.log(loanNo);
            this.loading = true;
            let queryParams = {
                params: {
                    loanNo: loanNo
                }
            };
            api_queryContract(queryParams).then(res => {
                if (res.success) {           
                    this.detailData = res.data; 
                    this.detaillist = res.data.urlList;
                    if(this.detaillist == 0){
                        this.$message.warning("未签署合同！");
                    }
                    for (var i = 0; i < res.data.urlList.length; i++) {                        
                        if(i == 2){                            
                            var starts = res.data.urlList[i].docTitle.toString();
                            this.detaillist[i].docTitle = "《"+starts.substring(0, 12)+"》";
                              
                        }else{
                            var start = res.data.urlList[i].docTitle.toString();
                            this.detaillist[i].docTitle = "《"+start.substring(0, 9)+"》、";
                        }
                    }   
                } else {
                    this.$message.error(res.msg);
                } 
                this.loading = false;
            });
        },                    
    },  
    created() {
        this.init();               
    }

};
</script>
<style lang="less" scoped>
@import "../../assets/styles/common.css";
.add-bankcard /deep/ .el-input.is-disabled .el-input__inner {
    color: #333;
}
.wrap {
    min-height: calc(100vh - 184px); 
    margin: 40px 0;
    .repay-dialog{
        background: #ffffff;
        margin:0  auto;
        margin-top:60px;
        height: min-content;  
        border: none;
        width: 1080px;

        .accont-title{
            position: relative;                   
        }
        .accont-title h4{
            float: left;
            padding-left: 20px;
            margin-left: -20px;
            border-left: 4px solid #3d86e9;
        }
        .number-table{ 
            width:100%;
            background: #ffffff;   
            height: min-content;
            .accont-title{
                position: relative;  
                margin-top:20px;              
            }
            .accont-title .accont-border-bg{
                border-bottom: 1px solid transparent;
            }
            .accont-title h5{
                border-left: 2px solid #3D86E9;
                text-align: left;
                font-size: 18px;
                padding-left: 20px;
                margin-left: -20px;
                font-weight: bold;
            } 
            .repay-arrows{
                position: relative;
                width: 27px;
                height: 15px;
                float: right;
                background: url(~assets/images/icon-arrows.png) 0 0 no-repeat;
                cursor:pointer;
            }
            .btn-reg{
                color:#3D86E9;
                position:relative;
                left:97px;
            }         
            table{   
                display: -webkit-inline-box;
                margin:20px;
                background: #ffffff;    
                border-collapse: collapse;  
                text-align:left;
                font-size:14px;   
                tr th{   
                    height:64px;
                    color:#999;
                    font-size:12px;
                    strong{
                        padding:  0 5px;
                        font-size: 14px;
                        font-weight: 200;
                    }
                }
                tr td{ 
                    width:340px; 
                    height:48px;
                    border-bottom:1px solid #f7f7f7;
                    text-indent: 25px;
                }
                .tdconent-border{ 
                    width:200px; 
                    height:48px;
                    border-bottom:0px solid #F4F4F7;
                    text-indent: 25px;
                }
                .tdconent{
                    text-align: center;                 
                    border-bottom:1px solid #ffffff;
                    color:#999999;
                    background:#f7f7f7;
                    border-left:1px solid #ffffff;
                    font-size:12px;
                    width:200px;
                    text-indent: 0px;
                }
                .tdconent-overflow{
                    text-overflow:ellipsis;
                    overflow:hidden;
                    white-space:nowrap;
                    text-indent: 0px;
                }
                
            }
        } 

        .bankcard-div{
            padding-bottom:114px;
            text-align: left;
            span{
                width:340px;
                height:36px;                
                line-height:36px;
                text-align: left;
                padding-left: 21px;
                color:#666666; 
                font-size:14px;
                font-weight:400;
            }
            a{                    
                color:rgba(61,134,233,1); 
                font-size:14px;
                font-weight:400;
                cursor: pointer;
            }
        }      
    }

}
</style>