
<template>   
    <main class="wrap">
        <section>
            <div class="layout-box"> 
                <div class="steps clearfix">
                    <ul>
                        <li>
                             <router-link to="/loan/recordQuery">借款记录</router-link>
                        </li>
                        <li>
                            <router-link to="/loan/recordCapital">资金明细</router-link>
                        </li>
                        <li>
                            <router-link to="/loan/recordAccess"  class="steps-down">申请记录</router-link>
                        </li>
                       
                    </ul>                        
                </div> 
                <div class="refundinput-content">  
                    <div class="reimbursement-list">                            
                        <div class="reimbursement-list-box loan-situation">                   
                            <el-table
                                :data="loanSituationList"                   
                                ref="multipleTable"                
                                tooltip-effect="dark"                 
                                style="text-align:center;" 
                                v-loading="loading"
                                >
                                <el-table-column                             
                                label="申请时间" >
                                    <template slot-scope="scope">{{ scope.row.applyTime }}</template>
                                </el-table-column>
                                <el-table-column label="申请类型">  
                                    <template slot-scope="scope" > 
                                        <p v-if="scope.row.applyType=='1'">
                                            授信
                                        </p>
                                        <p v-else-if="scope.row.applyType=='2'">
                                            借款
                                        </p>  
                                    </template> 
                                </el-table-column> 

                                <el-table-column width="200"  show-overflow-tooltip label="申请编号">
                                    <template  width="200" slot-scope="scope">{{ scope.row.riskNo }}</template>
                                </el-table-column>

                                <el-table-column label="产品">
                                    <template slot-scope="scope"  v-if="scope && scope.row && scope.row.product">{{ scope.row.product }}</template>
                                </el-table-column>                               
                                <el-table-column
                                label="申请状态" >
                                    <!--审核状态开始-->
                                    <template slot-scope="scope">                                            
                                        <p :style="status[scope.row.applyStatus].color" >
                                           {{status[scope.row.applyStatus].title}}
                                        </p>
                                                                    
                                        <!--审核状态结束-->
                                    </template>                                
                                </el-table-column>
                                <el-table-column                               
                                label="详情"  >
                                    <template slot-scope="props">
                                        <el-button class="count-down-button" type="primary" @click="handleCheck(props.row.riskNo)">查看详情</el-button>
                                    </template>
                                </el-table-column>
                                <div slot="empty" class="no-data">
                                    <img src="~assets/images/icon-status-no-record.png" alt />
                                    <h3>很遗憾您还没有记录！</h3>
                                    <p>快去交易吧！</p>    
                                </div>    
                            </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="clear"></div>
                    </div>
                </div> 
            </div>
        </section>
    </main>     
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { api_queryAccess } from "api/loan.js";
import utils from "utils/utils.js";
export default {      
    data() {
         return {        
            loanSituationList: [],
            status:{
                "1":{
                    color:"color:#333333",
                    title:"待审核"
                },
                "2":{
                    color:"color:#333333",
                    title:"通过"
                },
                "3":{
                    color:"color:#cc3333",
                    title:"拒绝"
                },
                "4":{
                    color:"color:#cc3333",
                    title:"打回"
                },
            },           
            loading:true,  
            total: 0,
            size: 10, 
            currentPage:1,                     
        }
    },
    methods: { 
        handleSizeChange(val) {
            this.size = val;
            this.selectSort(this.currentPage, val);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.selectSort(val, this.size);
        },
        handleCheck(item) {
            this.loading = true;
            this.$router.push({
                path: "/loan/recordAccessDetails",
                query: {
                    riskNo: item
                }
            });
            this.loading = false;
        },
        selectSort(pageNum,pageSize) {         
            this.loading = true;   
            let bankListData = {
                params: {
                    pageNum: pageNum,
                    pageSize: pageSize, 
                }      
            };
            api_queryAccess(bankListData).then(res => {              
                if (res.success) { 
                    this.loanSituationList = res.data.list;                                              
                    this.total = res.data.total;                    
                } else {
                    this.$message.error(res.msg);
                }
               this.loading = false;   
            });           
        },
        
    },
    created() {   
        this.selectSort(this.currentPage, this.size);
    }
}
</script>

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

.layout-box /deep/ .el-radio {
    position: relative;
    display: inline-block;
    outline: none;
    margin: 0 10px;
    .el-radio__input {
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
    }
    .el-radio__input.is-checked + .el-radio__label {
        padding: 4px 10px;
        border-radius: 4px;
        background: #3d86e9;
        color: #fff;
    }
    .el-radio__label {
        padding: 10px;
    }
}

.reimbursement-bxo {
    width: 100%;
    background: #fff;
    box-sizing:border-box;
/deep/  .reimbursement-choose{
        width:1080px;
        background: #ffffff;
        margin: 0 auto;
        height: min-content;
        text-align:left;
        p {
            padding: 12px 0;
            font-size: 14px;    
            cursor:pointer;      
            .active{
              display:block;
            }
            .activeno{
              display:none;
            }
        }
        
    }
}

.wrap {     
    min-height: calc(100vh - 186px);
    section {      
         background: #fff;
        .layout-box{
            width: 1080px;
            margin: 60px auto 0;  
             /deep/  .steps {
                    position: relative;
                    width: 100%; 
                    box-sizing:border-box;           
                    text-align: left;
                    padding-top: 20px;
                    padding-bottom: 10px;
                    text-align:left;
                ul {
                    height: 28px;
                    padding-bottom: 8px;
                    border-bottom: 1px solid #e6e6e6;
                    box-sizing: border-box;
                    li {
                        position: relative;
                        float: left;
                        padding-right:56px;
                        font-size: 14px;                   
                        a{
                            color:#333;
                            font-size:18px;
                        }
                        .steps-down{
                            color: #3d86e9; 
                            font-size:18px;
                        }
                        
                        &:nth-of-type(3)::after{
                            content: "";
                            display: block;
                            position: absolute;
                            left: 50%;
                            box-sizing:border-box;
                            bottom: -7px;
                            width: 74px;
                            height: 2px;
                            margin-left: -66px;                        
                            background: #3d86e9;
                        
                            
                        }
                    }                
                }                   
            }
        
            .refundinput-content {
                        
                /deep/ .reimbursement-list-box{ 
                    width:100%;
                    box-sizing:border-box;
                    background: #ffffff;
                    margin:0 auto;
                    height: min-content;
                    border: 0;
            
                    margin-top:18px;              
                    table{   
                        width: 100%;
                        
                        background: #ffffff;
                        border-collapse: collapse;
                        margin: 0 auto;
                        text-align:center;
                    
                        tr th{   
                            color:#999999;
                            background:#F5F5F5;
                            text-align: center;  
                            border: 0;
                        }
                        tr td{   
                            padding:10px 0;
                            border: 0;
                            text-align: center;
                            font-size:14px;                            
                        }
                    }                           
                }
                /deep/ .reimbursement-list-box .el-table__body-wrapper{            
                    background: #ffffff;
                }
                /deep/ .count-down-button{
                    background-color:transparent !important;
                    color:#3d86e9 !important;
                    border:0px solid transparent;
                }
                /deep/ .count-down-button:focus,/deep/ .count-down-button:hover,/deep/ .count-down-button:active{background-color:transparent !important;color:#3d86e9 !important;border-color:transparent !important;}  
            
                /deep/ .loan-situation .el-table .cell{
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    white-space: normal;
                    word-break: break-all;
                    line-height: 23px;
                    white-space: nowrap;
                    width: 180px;
                    overflow: hidden;
                }
                /deep/ .loan-situation.el-button--primary,/deep/ .loan-situation .el-button--primary:active{  
                    background:none;                    
                    color: #3d86e9;
                    border:0;
                }    
                /deep/ .reimbursement-list-box .el-table::before{
                    height:0px;
                }    
                /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;
                    }
                }
                /deep/ .no-data {
                    line-height: 1;
                    img {
                        margin-top: 50px;
                        background-size: 100% auto;
                    }
                    h3 {
                        margin-top: 22px;
                        font-size: 24px;
                        font-weight: normal;
                        color: #3f87e9;
                    }
                    p {
                        margin: 22px auto 50px auto;
                        font-size: 14px;
                        color: #999;
                    }
                }

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