<template>    
    <main class="main">          
        <section class="details-form">  
            <div  class="details-form-box">
                
                <div class="steps clearfix">
                    <ul>
                        <li class="licolor">
                            借款记录
                        </li>
                        <li>
                            资金明细
                        </li>
                        <li>
                            申请记录
                        </li>                    
                    </ul>                        
                </div>          
                <p class="money"><font class="money-font">¥</font>10,000.00</p>
                <p class="repay">借款金额</p> 
                <span class="choose-one"></span>  
            </div> 
                                           
        </section>
        <div class="clear"></div>
        <section class="details-box">                
            <div class="refunds-text">编号20190412010</div>
            <div class="number-table">                                 
                <table>                 
                    <tr>
                        <td class="tdconent">放款机构</td>
                        <td>****小贷公司</td>
                        <td class="tdconent">收款账号</td>
                        <td>华夏银行卡 （****2345）</td>
                    </tr>
                    <tr>
                        <td class="tdconent">放款机构</td>
                        <td>****小贷公司</td>
                        <td class="tdconent">收款账号</td>
                        <td>华夏银行卡 （****2345）</td>
                    </tr>
                    <tr>
                        <td class="tdconent">放款机构</td>
                        <td>****小贷公司</td>
                        <td class="tdconent">收款账号</td>
                        <td>华夏银行卡 （****2345）</td>
                    </tr>
                    <tr>
                        <td class="tdconent">放款机构</td>
                        <td>****小贷公司</td>
                        <td class="tdconent">收款账号</td>
                        <td>华夏银行卡 （****2345）</td>
                    </tr>
                </table>
            </div>

            <div class="repay-table">   
               <div class="accont-title clearfix">
                    <h4>已还总额 ¥700,000.00</h4>
                    <span class="repay-arrows"></span>
                </div> 
                <div class="repal-text">
                     还款详情信息     
                </div>
                 <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"          
                    row-key="id" style="text-align:center;"
                    >
                    <el-table-column
                    prop="money_be_also"
                    label="借款本金(元)" align="center">
                       
                    </el-table-column>
                    <el-table-column
                    prop="repayment_way"
                    label="最晚还款日" align="center">
                    
                    </el-table-column> 
                    <el-table-column
                    prop="repayment_account"
                    label="最大逾期天数" align="center">
                        
                    </el-table-column>                     
                </el-table>
               <div class="repal-text">
                     历史还款记录     
                </div>
                 <el-table
                    ref="multipleTable"
                   
                    tooltip-effect="dark"          
                    row-key="id" style="text-align:center;"
                    border>
                    <el-table-column
                    prop="early_due_date"
                    label="还款日期" align="center" class="thbg">
                        
                    </el-table-column>
                    <el-table-column
                    prop="late_due_date"
                    label="实还本金（元）" align="center">
                        
                    </el-table-column> 
                    <el-table-column
                    prop="should_be_also"
                    label="实还总额（元）" align="center">
                        
                    </el-table-column>
                    <el-table-column
                    prop="principal"
                    label="实还利息及费用（元）" align="center">
                      
                    </el-table-column>
                    <el-table-column
                    prop="interest"
                    label="还款账号" align="center">
                      
                    </el-table-column>  
                             
                </el-table>
                <div class="contentpage">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    ></el-pagination>
                </div>
                <div class="clear"></div>

                 <p class="submit">
                    <span class="submit-img"><img src="~assets/images/icon-status-no-record.png" alt></span>   
                    <span class="submit-text">很遗憾您还没有记录！</span> 
                    <span>无还款记录！</span>                                                
                </p>
            </div>
            <div class="refunds">
                 <div class="accont-title clearfix">
                    <h4>未还本金 ¥600,000.00</h4>
                    <span class="repay-arrows"></span>
                </div> 
                <div class="repal-text">
                     还款详情信息<span>*按店铺入账先后顺序，按实时汇率汇兑成应还人民币后扣款</span> 
                     <span class="eltable-text">自动划扣的显示为打开页面的当前日期</span>    
                </div>
                 <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"          
                    row-key="id" style="text-align:center;"
                     :header-row-class-name="handlemclass" 
                    >
                    <el-table-column
                    prop="money_be_also"                                        
                    label="借款本金(元) "  align="center">
                        <template slot="header">
                            <el-popover
                            ref="popover"
                            placement="bottom-start"
                            width="204"
                            trigger="hover"
                            content="自动划扣的显示为打开页面的当前日期">
                            </el-popover>
                            <span>借款本金(元) </span>
                            <el-button v-popover:popover><img src="~assets/images/icon-question.png" alt /></el-button>
                        </template>

                    </el-table-column>
                    <el-table-column
                    prop="repayment_way"
                    label="最晚还款日" align="center">
                    
                    </el-table-column> 
                    <el-table-column
                    prop="repayment_account"
                    label="最大逾期天数" align="center">
                        
                    </el-table-column>                     
                </el-table>              
                <div class="contentpage">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    ></el-pagination>
                </div>
                <div class="clear"></div>
            </div>  
            <div class="number-table">
                 <div class="accont-title clearfix">
                    <h4>贷款详细信息</h4>
                    <span class="repay-arrows"></span>
                </div>                
               <table>                 
                    <tr>
                        <td class="tdconent">贷款名称</td>
                        <td>贷款名称</td>
                        <td class="tdconent">还款方式</td>
                        <td>还款方式</td>
                    </tr>
                    <tr>
                        <td class="tdconent">贷款金额（元）</td>
                        <td>800,000.00</td>
                        <td class="tdconent">还款时间</td>
                        <td>2019-10-10</td>
                    </tr>
                    <tr>
                        <td class="tdconent">最早还款日</td>
                        <td>2019-10-10</td>
                        <td class="tdconent">日利率费</td>
                        <td>0.04%</td>
                    </tr>
                    <tr>
                        <td class="tdconent">最晚还款日</td>
                        <td>2019-10-10</td>
                        <td class="tdconent">收款账户</td>
                        <td>中国工商银行（尾号：0979）</td>
                    </tr>
                    <tr>
                        <td class="tdconent">合同编号</td>
                        <td>201910016789<router-link to="/help" class="btn-reg">详情</router-link></td>
                        <td class="tdconent">放贷机构</td>
                        <td>**小贷公司</td>
                    </tr>
                </table>            
              
            </div>                  
        </section>  
    </main>
</template>


<script>
export default {
    name: "refund",
    data() {
         return {
            tableData: [{
                
                money_be_also: '100,000,000.00',                
                repayment_way: '2019-02-02',
                repayment_account: '0'
            }, 
            {
               
                money_be_also: '100,000,000.00',              
                repayment_way: '2019-02-02',
                repayment_account: '0'
            },        
           
            ]
        }
    },
    methods: {
        handleCheck(row) {
        const $table = this.$refs.table
        
        $table.toggleRowExpansion(row)
        $table.toggleRowSelection(row)
      },
      handlemclass:function({row, column, rowIndex, columnIndex}){
         
            return 'refunds';
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";


.main {
    min-height: calc(100vh - 224px);
    margin-top:-0.01px;
    .details-form{   
        width: 100%; 
        text-align: center;
        margin: 0 auto;
        background: url(~assets/images/pmtbanner.png) 0 0 no-repeat;
        padding: 42px 0 24px 0; 
            .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%;
                                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:#999999FF;
                    font-size:14px;
                }  
                .repay{
                    margin-top:23px;
                    font-size:24px;
                }
                .money{ 
                    margin:44px 0 20px 0; 
                    font-size:48px;
                }
                .money-font{
                    font-size:30px;
                }
                .choose-one{
                    position: relative;
                    margin-top: -160px;
                    margin-right: 197px;
                    width:99px;
                    height:81px;
                    background: url(~assets/images/icon-employ.png) left center no-repeat;
                    color: #3d86e9;
                    margin-bottom:-1px;                    
                    float: right;
                }
                

            }
         
    }
    .details-box{     
        display: inline-block;    
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: text-top;
        font-size:9px;
        background: #f3f3f3; 
        width: 1080px;
        margin: 0 auto;
        .refunds-text{ 
            text-align: left;
            margin: 0 0;
            padding: 20px 0;           
            font-size: 18px;
            border-bottom: 0px solid #eaeaea;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;   
            font-weight:bold; 
        }
        .number-table{ 
            width:100%;
            background: #ffffff;   
            height: min-content;
            margin-bottom:20px; 
            .accont-title{
                position: relative;
            }
            .accont-title h4{
                float: left;
                padding-left: 20px;
                margin-left: -20px;
                border-left: 4px solid #3d86e9;
            } 
            .repay-arrows{
                position: relative;
                width: 27px;
                height: 15px;
                float: right;
                background: url(~assets/images/icon-arrows.png) 0 0 no-repeat;
            }
            .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 #F4F4F7;
                    text-indent: 25px;
                }
                .tdconent{
                    text-align: center;                 
                    border-bottom:1px solid #ffffff;
                    color:#999999FF;
                    background:#F4F4F7;
                    border-left:1px solid #ffffff;
                    font-size:12px;
                    width:200px;
                }
                
            }
        }
           /deep/ .repay-table{ 
               
                background: #ffffff;
                margin:18px auto;
                height: min-content;  
                border: none;
                .accont-title{
                    position: relative;
                }
                .accont-title h4{
                    float: left;
                    padding-left: 20px;
                    margin-left: -20px;
                    border-left: 4px solid #3d86e9;
                }
                .repay-arrows{
                    position: relative;
                    width: 27px;
                    height: 15px;
                    float: right;
                    background: url(~assets/images/icon-arrows.png) 0 0 no-repeat;
                }
                .repal-text{
                    padding: 20px 0 10px ;
                    text-align: left;
                    margin-left: 20px;
                    font-size: 14px;
                   
                }
                table{  
                    width: 1040px !important;                
                    background: #ffffff;
                    margin: 10px;
                    display: -webkit-inline-box;     
                    border-collapse: collapse;
                    text-align: center;
                    font-size: 14px;    
                    tr th{   
                        background: #F5F5F5;
                        text-align: center;  
                        border: none;
                        color:#999;
                        font-size:12px;
                        
                    }
                    tr td{   
                        height:48px;
                        border-bottom:0px solid #f3f3f3;
                        border: none;
            
                    } 
                }
                .el-button--primary{    
                    background:none;              
                    color: #3a8ee6;
                    border:0;
                }
                .el-button--primary:active{    
                    background:none;              
                    color: #3a8ee6;
                    border:1px;
                }      
                .el-table{
                    position: relative;
                }
                .el-table::before{height:0;}
                .el-table::after{width:0;}
                .el-table--border{
                    border: 0;
                }   
                
                p.submit{
                width: 100%;
                padding:34px 0; 
                margin:0 auto;      
                span{
                    
                     
                }
                
                .submit-img{
                    display: block;                    
                    font-size: 14px;
                    width:80%;    
                    margin:22px auto 0;                 
                    text-align: center;
                } 
                .submit-text{
                    display: block;
                    font-size: 28px;
                    color:#3F87E9;
                    padding:12px 0;
                }
            
            } 

            
            }
       
    }


/deep/ .refunds{         
        background: #ffffff;
        margin:18px auto;
        height: min-content;  
        border: none;
        .accont-title{
            position: relative;
        }
        .accont-title h4{
            float: left;
            padding-left: 20px;
            margin-left: -20px;
            border-left: 4px solid #3d86e9;
        }
        .repay-arrows{
            position: relative;
            width: 27px;
            height: 15px;
            float: right;
            background: url(~assets/images/icon-arrows.png) 0 0 no-repeat;
        }
        .repal-text{
            padding: 20px 0 10px ;
            text-align: left;
            margin-left: 20px;
            font-size: 14px;
            span{
                    font-size:12px;
                    color:#CC6666;
                    margin-left:12px;
                }
            .eltable-text{
                  position:absolute;
                  top:50px;
                  background: url(~assets/images/icon-arrows.png) 0 0 no-repeat;
            }
        }
        table{  
            width: 1040px !important;                
            background: #ffffff;
            margin: 10px;
            display: -webkit-inline-box;
            border-collapse: collapse;
            text-align: center;
            font-size: 14px;           
                
            tr th{   
                background: #F5F5F5;
                text-align: center;  
                border: none;
                color:#999;
                font-size:12px;
            }
            tr td{   
                height:48px;
                border-bottom:0px solid #f3f3f3;
                border: none;
    
            } 
           tr th:first-child{
                img {
                height: 24px;
                width: 24px;
                border-radius: 50%;
                background: #ffecc7;
                display: inline-block;
                margin: -8px 0;
                
            }
            span{
                padding:2px 0;
            }
         
            
            .el-button{
                    border: 0 solid #DCDFE6;
                    background:none;
                    padding:0;
            }
           
            
           }
        }

        
        .el-button--primary{
            background: #fff;
            color: #3a8ee6;
            border:0;
        }
       .el-button--primary:active{
            background: #fff;
            color: #3a8ee6;
            border:1px;
        }      
        .el-table{
            position: relative;
        }
        .el-table::before{height:0;}
        .el-table::after{width:0;}
        .el-table--border{
            border: 0;
        }    

    }





    /deep/.contentpage{ 
        display: inline-block;   
        padding: 29px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: text-top;
        font-size: 12px;  
        width: 1080px;
        margin: 0 auto;
    .el-pagination .el-pagination__total,.el-input__inner,.el-pagination__jump{
            color:#9B9B9B;
        }
    }

    .clear{ clear:both} 
}
</style>
