
<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" class="steps-down">资金明细</router-link>
                        </li>
                        <li>
                            <router-link to="/loan/recordAccess">申请记录</router-link>
                        </li>
                       <span class="download"><router-link  to="/loan/recordDown">下载对帐单</router-link></span>
                    </ul>                        
                </div> 
                <div class="reimbursement-bxo">                
                    <div class="reimbursement-choose">
                        <p >
                            申请时间：
                            <el-date-picker
                                v-model="time"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions"
                                @change="changeTime"
                                :clearable="false"
                            ></el-date-picker>
                        </p>
                        <p  class="reimbursement-money-span">还款期限： 
                            <el-radio-group v-model="moneyText" @change="changeMoney" >                       
                                <el-radio v-for="items in money" 
                                :key="items.text"
                                :value="items.text"
                                :label="items.text"
                                >{{items.text}}</el-radio>
                            </el-radio-group> 
                        </p>               
                    </div> 
                </div>  
                <el-divider></el-divider> 
                <div class="refundinput-content">  
                    <div class="reimbursement-list">                            
                        <div class="reimbursement-list-box datalist">                          
                           <el-table
                                :data="loanSituationList"                   
                                row-key="id"
                                v-loading="loading"
                                >
                                <el-table-column                                
                                label="时间" width="160" >
                                    <template  width="160" slot-scope="scope">{{ scope.row.tradeTime }}</template>
                                </el-table-column>
                                <el-table-column width="210" show-overflow-tooltip label="账户" >
                                    <template width="210" slot-scope="scope" > 
                                        {{scope.row.bankName }}                                    
                                        <!--<p v-if="scope.row.account=='1'">
                                            中国工商银行
                                        </p>
                                        <p v-else-if="scope.row.account=='2'">
                                            店铺对应账号
                                        </p>-->
                                    </template>                                 
                                </el-table-column> 

                                <el-table-column  width="60" label="类型">    
                                    <template  width="60" slot-scope="scope" >                                      
                                         {{scope.row.tradeType}}    
                                    </template>  
                                </el-table-column>

                                <el-table-column width="280" show-overflow-tooltip label="流水号">
                                    <template width="280" slot-scope="scope">{{ scope.row.applyId }}</template>
                                </el-table-column>
                                <el-table-column width="150" label="金额（元）">
                                      <template width="150" slot-scope="scope" v-if="scope && scope.row && scope.row.tradeAmount">{{ formatNum(scope.row.tradeAmount) }}</template>
                                </el-table-column>
                                <el-table-column label="状态" width="60" show-overflow-tooltip>
                                    <template width="60" slot-scope="scope" >                                      
                                        <p :style="status[scope.row.tradeState].color" >
                                          {{status[scope.row.tradeState].title}}
                                        </p>                                       
                                     </template>
                                </el-table-column>
                                <el-table-column
                                prop="details" width="157"
                                label="详情"  >
                                    <template  width="157" slot-scope="props">
                                        <el-button class="count-down-button" type="primary" @click="handleCheck(props.row.loanNo,props.row.applyId)">查看详情</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_capitalDetailed } from "api/loan.js";
import utils from "utils/utils.js";
export default {      
    data() {
         return {        
            loanSituationList: [], 
            status:{
                "TRADE_UNPROCESSED":{
                    color:"color:#333333",
                    title:"未处理"
                },
                "TRADE_PROCESSED":{
                    color:"color:#333333",
                    title:"已处理"
                },
                "TRADE_PROCESSEDING":{
                    color:"color:#333333",
                    title:"处理中"
                },
                "TRADE_PROCESSED_FAILURE":{
                    color:"color:#cc3333",
                    title:"处理失败"
                },
                "交易成功":{
                    color:"color:#333333",
                    title:"交易成功"
                },              
            },          
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今日",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近1年",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 365
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ],
                disabledDate: time => {
                    return time.getTime() > new Date().getTime();
                },
                onPick: time => {
                    if (time.maxDate !== null) {
                        if (
                            time.maxDate.getTime() - 3600 * 1000 * 24 * 90 >
                            time.minDate.getTime()
                        ) {
                            let newDate = time.minDate;
                            setTimeout(() => {
                                this.time = [
                                    time.minDate,
                                    new Date().setTime(
                                        newDate.getTime() +
                                            3600 * 1000 * 24 * 90
                                    )
                                ];
                            }, 30);
                            this.$message.error("时间选择区间不可大于90天！");
                        }
                    }
                }
            },
            money: [
                {
                    text: "全部",
                    type:'',
                },
                {
                    text: "收款",
                    type:'7',                    
                },
                {
                    text: "还款",
                    type:'1',                 
                },               
            ],           
            type:'',
            moneyText:'全部',          
            time:[], 
            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);
        },
        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 + "");
        },    
        handleCheck(loanNo,applyId) {
            this.loading = true;
            this.$router.push({
                path: "/loan/recordCapitalDetails",
                query: {
                    loanNo: loanNo,
                    applyId: applyId
                }
            });
            this.loading = false;
        },      
        defaultTime() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); 
            this.time = [start, end];
            this.changeTime(this.time);
        },
        changeTime(val) {
            this.time[0] = utils.formatDate(val[0], "yyyy-MM-dd");
            this.time[1] = utils.formatDate(val[1], "yyyy-MM-dd");
            this.selectSort(this.currentPage,this.size);
    
        },   
        selectSort(pageNum,pageSize) {         
            this.loading = true;
            let bankListData = {
                data: {                  
                    pageNum: pageNum,
                    pageSize: pageSize,
                    fromTradeDate: this.time[0],
                    toTradeDate: this.time[1], 
                    tradeType: this.type, 
                }      
            };
            api_capitalDetailed(bankListData).then(res => {
                if (res.success) {                  
                    this.loanSituationList = res.data.details; 
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
               this.loading = false;   
            });           
        },            
        moneyfunc:function(value,index){  
            this.type =  value[index].type;           
        },    
        changeMoney:function (value) {
           if (this.moneyText === "全部" ) {
               this.moneyfunc(this.money,0); 
                this.selectSort(1,10);                 
            } else if (this.moneyText === "收款") {
                this.moneyfunc(this.money,1);
                this.selectSort(1,10); 
            }else if (this.moneyText === "还款") {                
                this.moneyfunc(this.money,2);
                this.selectSort(1,10); 
            }           
        }, 
                             
    },
    created() {  
        this.defaultTime();
    }
}
</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;
    }
 
}

.reimbursement-bxo {
    width: 100%;
    background: #fff;
/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; 
            text-align:left;     
            span{
                box-sizing: border-box;
                padding:4px 3px;
            } 
            .active{
              display:block;
            }
            .activeno{
              display:none;
            }
        }
        .reimbursement-money-span{
            padding: 12px 0;
            font-size: 14px; 
            text-align:left;
            span{
                box-sizing: border-box;
                padding:4px 3px;
            } 
            span:last-child{
                box-sizing: border-box;
                padding:4px 10px;
            } 
        }
        
    }
}

.wrap {
    min-height: calc(100vh - 154px);   
    
    section {
       margin: 60px auto 0;
       background: #fff;
        .layout-box{
            width: 1080px;           
            background: #fff;
            /deep/  .steps {
                position: relative;
                width: 100%;            
                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;
                        color: #3d86e9;
                        a{
                            color:#333;
                            font-size:18px;
                        }
                        .steps-down{
                            color: #3d86e9; 
                            font-size:18px;
                        }
                        &:nth-of-type(2)::after{
                            content: "";
                            display: block;
                            position: absolute;
                            left: 50%;
                            bottom: -7px;
                            width: 74px;
                            height: 2px;
                            margin-left: -66px;                        
                            background: #3d86e9;
                            
                        }
                    }                
                }
                    .download {
                    position: absolute;
                    right: 0;
                    top: 143px;
                    height: 50px;
                    line-height: 50px;
                    font-size:12px;
                    a {
                        margin-left: 20px;
                        padding: 10px 0 10px 26px;
                        font-size: 14px;
                        background: url(~assets/images/icon-download.png) left center no-repeat;
                        &:hover {
                            background: url(~assets/images/icon-download-2.png) left center
                                no-repeat;
                        }
                    }
                }
                        
            }
        
            .refundinput-content {
                        
                /deep/ .reimbursement-list-box{ 
                    width:100%;
                    background: #ffffff;
                    margin:0 auto;
                    height: min-content;
                    border: 0;
                    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/ .count-down-button:focus,/deep/ .count-down-button:hover, /deep/ .count-down-button:active{background-color:transparent !important;border-color:#3a8ee6 !important;}             
                    .tdconent-border{ 
                        width:340px; 
                        height:48px;
                        border-bottom:0px solid #F4F4F7;
                        text-indent: 25px;
                    }                
                            
                }
                /deep/ .datalist .el-button--primary{
                        
                    background:none;                    
                    color: #3d86e9;
                    border:0;
                }
                /deep/ .datalist .el-button--primary:active{    
                    background:none;                  
                    color: #3d86e9;
                    border:0px;
                }   

                /deep/ .datalist .el-table__body-wrapper{                   
                    background: #ffffff;
                }
                /deep/ .datalist .el-table::before {
                    height: 0px;
                } 
                /deep/ .datalist .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: 100%;
                    overflow: hidden;
                    padding:0;
                }
                /deep/ .datalist .el-table{
                    position: relative;
                }           
                /deep/ .datalist .el-table th:nth-of-type(5){
                    text-indent:3px;
                }                
            
                /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>
