
<template>
    <main class="wrap">
        <section>
            <div class="layout-box">
                <div class="steps clearfix">
                    <ul>
                        <li>
                            <router-link to="/loan/recordQuery" class="steps-down">借款记录</router-link>
                        </li>
                        <li>
                            <router-link to="/loan/recordCapital">资金明细</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 class="reimbursement-time">
                            申请时间：                        
                            <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-way">
                            还款方式：
                            <el-radio-group v-model="wayText" @change="changeWay">
                                <el-radio
                                    v-for="item in way"
                                    :key="item.text"
                                    :value="item.text"
                                    :label="item.text"
                                >{{item.text}}</el-radio>
                            </el-radio-group>
                        </p>
                        <p class="reimbursement-way">
                            贷款状态：
                            <el-radio-group v-model="statusText" @change="changeStatus">
                                <el-radio
                                    v-for="item in status"
                                    :key="item.text"
                                    :value="item.text"
                                    :label="item.text"
                                >{{item.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  reimbursement-table-th">
                            <el-table :data="loanSituationList" v-loading="loading">
                                <el-table-column label="申请时间" show-overflow-tooltip>
                                    <template slot-scope="scope">{{ scope.row.applyDate }}</template>
                                </el-table-column>
                                <el-table-column label="贷款编号" width="180" show-overflow-tooltip>
                                    <template width="180" slot-scope="scope">{{ scope.row.loanNo }}</template>
                                </el-table-column>
                                <el-table-column label="贷款期限"  width="90">
                                    <template
                                        width="90"
                                        slot-scope="scope"
                                    >{{ scope.row.loanDays }}天</template>
                                </el-table-column>
                                <el-table-column>
                                    <template  slot-scope="scope" slot="header" >
                                        <span class="tdconent-nospan">还款方式</span>
                                        <el-popover
                                            ref="popover"
                                            placement="bottom-start"
                                            width="266"
                                            trigger="hover"
                                            popper-class="POPborrowing-two"
                                            content="按日计息，入账自动还款，支持银行卡还款"
                                        ></el-popover>
                                        <el-button class="count-down-elbutton" v-popover:popover>
                                            <img src="~assets/images/icon-question.png" alt />
                                        </el-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.repayType=='7'">按日计息</div>
                                        <div v-else-if="scope.row.repayType=='02'">其他</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="借款金额（元）">
                                    <template slot-scope="scope">{{ formatNum(scope.row.applyAmt) }}</template>
                                </el-table-column>
                                <el-table-column label="意向金额（元）">
                                    <template slot-scope="scope">{{ formatNum(scope.row.realAmt) }}</template>
                                </el-table-column>                               
                                <el-table-column label="状态" width="120">
                                    <template slot-scope="scope">                                    
                                        <!--审核状态开始-->
                                        <p
                                        :style="statusobj[scope.row.loanStatus].color"
                                        >{{statusobj[scope.row.loanStatus].title}}</p>
                                        <!--审核状态结束-->                                        
                                    </template>
                                </el-table-column>
                                <el-table-column  width="150" prop="details" label="还款详情">
                                    <template width="150" slot-scope="props">
                                        <span @click="handleCheck(props.row.loanNo)">查看详情</span>
                                    </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>
                </div>
            </div>
        </section>
    </main>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { api_queryLoan } from "api/loan.js";
import utils from "utils/utils.js";
export default {
    data() {
        return {
            loanSituationList: [],
            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天！");
                        }
                    }
                }
            },
            statusobj:{
                "10":{color:"color:#3D86E9",title:"等待初审"},
                "11":{color:"color:#333333",title:"初审通过"},
                "12":{color:"color:#CC3333",title:"初审拒绝"},
                "20":{color:"color:#333333",title:"复审通过"},
                "21":{color:"color:#CC3333",title:"复审拒绝"},
                "22":{color:"color:#3D86E9",title:"电子签章成功"},
                "23":{color:"color:#CC3333",title:"电子签章失败"},
                "30":{color:"color:#3D86E9",title:"放款通过"},
                "31":{color:"color:#CC3333",title:"放款拒绝"},
                "-1":{color:"color:#CC3333",title:"合同废止"},
                "0":{color:"color:#3D86E9",title:"未放款"},
                "1":{color:"color:#3D86E9",title:"还款中"},
                "2":{color:"color:#CCCCCC",title:"逾期"},
                "3":{color:"color:#CCCCCC",title:"案件"},
                "4":{color:"color:#3D86E9",title:"正常结清"},
                "5":{color:"color:#3D86E9",title:"催收减免结清"},
                "6":{color:"color:#3D86E9",title:"正常提前结清"},
                "7":{color:"color:#CC3333",title:"催收提前结清"},
                "8":{color:"color:#3D86E9",title:"放款中"},
            },
            way: [
                {
                    text: "全部",
                    type: "",
                    code: "0"
                },
                {
                    text: "自动还款",
                    type: "7",
                    code: "1"
                },
                {
                    text: "其他",
                    type: "02",
                    code: "2"
                }
            ],
            status: [
                {
                    id: 6,
                    text: "全部",
                    status: "",
                    code: "0"
                },
                {
                    id: 6,
                    text: "申请中",
                    status: "0",
                    code: "6"
                },
                {
                    id: 1,
                    text: "使用中",
                    status: "1",
                    code: "1"
                },
                {
                    id: 2,
                    text: "已结清",
                    status: "2",
                    code: "2"
                },
                {
                    id: 3,
                    text: "有逾期",
                    status: "3",
                    code: "3"
                },
                {
                    id: 4,
                    text: "发放中",
                    status: "4",
                    code: "4"
                },
                {
                    id: 5,
                    text: "贷款失败",
                    status: "5",
                    code: "5"
                },
                
            ],
            type: "",
            params: {   
                type: "",
                status: "",
                page: ""
            },
            wayText: "全部",
            statusText: "全部",
            time: "",
            loading: true,
            total: 0,
            size: 10,
            currentPage:1,           
        };
    },
    methods: {
        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(item) {
            this.loading = true;
            this.$router.push({
                path: "/loan/recordQueryDetails",
                query: {
                    loanNo: item,
                    
                }
            });
            this.loading = false;
        },
        selectSort(pageNum, pageSize) {
            this.loading = true;           
            let bankListData = {
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    loanQueryStartTime: this.time[0],
                    loanQueryEndTime: this.time[1],
                    repayType: this.params.type,
                    loanStatus: this.params.status,
                }
            };
            api_queryLoan(bankListData).then(res => {
                //店铺贷->记录查询->借款记录
                if (res.success) {                   
                    this.loanSituationList = res.data.list;
                    this.total = res.data.total;
                    // this.status = sarr[res.data.total.loanStatus];
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        handleSizeChange(val) {
            this.size = val;
            this.selectSort( this.currentPage, val);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.selectSort( val, this.size);
        },
        //获得时间段
        getDay(day) {
            var today = new Date();
            var targetday_milliseconds =
                today.getTime() + 1000 * 60 * 60 * 24 * day;
            today.setTime(targetday_milliseconds); //注意，这行是关键代码
            var tYear = today.getFullYear();
            var tMonth = today.getMonth();
            var tDate = today.getDate();
            tMonth = this.doHandleMonth(tMonth + 1);
            tDate = this.doHandleMonth(tDate);
            return tYear + "-" + tMonth + "-" + tDate;
        },
        doHandleMonth(month) {
            var m = month;
            if (month.toString().length == 1) {
                m = "0" + month;
            }
            return m;
        },
        gatherfunc: function(value, index) {
            this.params.start_date = this.getDay(value[index].start_date);
            this.params.end_date = this.getDay(value[index].end_date);
            console.log(this.params.start_date, this.params.end_date);
        },        
        wayfunc: function(value, index) {
            this.params.type = value[index].type;         
        },
        statusfunc: function(value, index) {
            this.params.status = value[index].status;        
        },
        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(1,10);
    
        },    
        changeWay: function(value) {
            if (this.wayText === "全部") {
                this.wayfunc(this.way, 0);
                this.selectSort(1,10);
            } else if (this.wayText === "自动还款") {
                this.wayfunc(this.way, 1);
                this.selectSort(1,10);
            } else if (this.wayText === "其他") {
                this.wayfunc(this.way, 2);
                this.selectSort(1,10);
            }
        },
        changeStatus: function(value) {
            if (this.statusText === "全部") {
                this.statusfunc(this.status, 0);
                this.selectSort(1,10);
            }else if (this.statusText === "申请中") {
                this.statusfunc(this.status, 1);
                this.selectSort(1,10);
            }else if (this.statusText === "使用中") {
                this.statusfunc(this.status, 2);
                this.selectSort(1,10);
            } else if (this.statusText === "已结清") {
                this.statusfunc(this.status, 3);
                this.selectSort(1,10);
            } else if (this.statusText === "有逾期") {
                this.statusfunc(this.status, 4);
                this.selectSort(1,10);
            } else if (this.statusText === "发放中") {
                this.statusfunc(this.status, 5);
                this.selectSort(1,10);
            } else if (this.statusText === "贷款失败") {
                this.statusfunc(this.status, 6);
                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;
    // width: 80px;
    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;
    /deep/ .reimbursement-choose {
        width: 1080px;
        background: #ffffff;
        margin: 0 auto;
        height: min-content;
        text-align: left;
        p {
            padding: 12px 0;
            font-size: 14px;
            .active {
                display: block;
            }
            .activeno {
                display: none;
            }
        }
        .reimbursement-time {
            padding: 12px 0;
            font-size: 14px;
            text-align: left;
            & /deep/ .el-date-editor {
                margin-left: 12px;
            }         
        }
        .reimbursement-way {
            padding: 12px 0;
            font-size: 14px;
            box-sizing: border-box;
            text-align: left;
            span {
                box-sizing: border-box;
                padding: 4px 10px;
            }        
        }
        .reimbursement-status {
            padding: 12px 0;
            font-size: 14px;
            box-sizing: border-box;
            text-align: left;
            span {
                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: 58px;
                        font-size: 14px;   
                        color: #3d86e9;              
                        a{
                            color:#333;
                            font-size:18px;
                        }
                        .steps-down{
                            color: #3d86e9; 
                            font-size:18px;
                        }
                        &:first-of-type::after {
                            content: "";
                            display: block;
                            position: absolute;
                            left: 50%;
                            bottom: -7px;
                            width: 74px;
                            height: 2px;
                            margin-left: -67px;
                            background: #3d86e9;
                        }
                    }
                }
                .download {
                    position: absolute;
                    right: 0;
                    top: 183px;
                    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 {                          
                            border: 0;
                            text-align: center;
                            padding:20px 0;
                            font-size:14px;
                            span {
                                padding: 14px 23px;
                                background: none;
                                color: #3d86e9;
                                border: 0;
                                cursor: pointer;
                            }
                        }
                    } 
                    
                    .tdconent-nospan {
                        position: relative;
                        top: -6px;
                        font-size: 14px;
                        font-weight: 700;
                    }                          
                    .count-down-elbutton {
                        border: transparent !important;
                        width: 24px;
                        background-color: transparent !important;
                        background: transparent !important;
                        position: relative;
                        padding: 12px 25px;
                        bottom: 0px;
                        left: -18px;
                    }
                    .count-down-elbutton :focus,
                    .count-down-elbutton:hover,
                    .count-down-elbutton:active {
                        background-color: transparent !important;
                        background: transparent !important;
                        border: 0px solid transparent !important;
                        border-color: transparent !important;
                    }               
                

                }    
                /deep/ .reimbursement-table-th .el-table__body-wrapper{                   
                    background: #ffffff;
                }
                /deep/ .reimbursement-table-th  .el-table::before{
                        height:0;
                    }         
                /deep/ .reimbursement-table-th .el-table tr th{ 
                    padding:0 0;             
                }
                
                /deep/ .reimbursement-table-th .el-table tr th:nth-of-type(5) {
                    text-indent: 3px;
                }
                /deep/ .reimbursement-table-th .el-table tr td:nth-of-type(4) {
                    text-indent: -33px;
                }
                /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>
<style>
.POPborrowing-two {
    padding: 4px 14px !important;
    min-width: 266px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin-left: 12px;
}
.POPborrowing-two[x-placement^="bottom"] {
    margin-top: -9px !important;
}
</style>
