<template>
    <main class="main">
        <section class="details-form">
            <div class="details-form-box">
                <p class="money">
                    <font class="money-font">¥</font>
                    {{formatNum(detailData.plannedCapitalAll)}}
                </p>
                <p class="repay">借款金额</p>
                <span v-bind:class="statusobj[detailData.loanStatus].status"></span>
            </div>
        </section>
        <div class="clear"></div>
        <section class="details-box">
            <div class="refunds-text"></div>
            <div class="bannumber-table tdconent-div">
                <table v-loading="loading">
                    <tr>
                        <td class="tdconent">贷款名称</td>
                        <td>{{detailData.productName}}</td>
                        <td class="tdconent">还款方式</td>
                        <td v-if="detailData.repayWay=='7'">按日计息，入账自动还款，支持银行卡还款</td>
                        <td v-if="detailData.repayWay=='02'">其他</td>
                    </tr>
                    <tr>
                        <td class="tdconent">最晚还款期限</td>
                        <td>{{detailData.maxTerm}}天</td>
                        <td class="tdconent">日利率费</td>
                        <td>{{formatNum(detailData.plannedInterestAll)}}</td>
                    </tr>
                    <tr>
                        <td class="tdconent">借款时间</td>
                        <td class="tdconent-border">{{detailData.loanDate}}</td>
                        <td class="tdconent"></td>
                        <td class="tdconent-border"></td>
                    </tr>
                </table>
            </div>
            <div class="repay-table accont-title-div" :class="{close:!toggle_box}">
                <div class="accont-title clearfix">
                    <h4>已还总额 ¥{{formatNum(detailData.indeedTotalAll)}}</h4>
                    <span class="repay-arrows" @click="toggleBox('toggle_box')"></span>
                </div>
                <div class="repalcontent">
                    <div class="repal-text">还款详情信息</div>
                    <div class="number-table tdconent-div">
                        <table>
                            <tr>
                                <td class="tdconent tdconent-principal">借款本金(元)</td>
                                <td class="tdconent tdconent-principal">最晚还款日</td>
                                <td class="tdconent tdconent-principal">最大逾期天数</td>
                            </tr>
                            <tr>
                                <td>{{formatNum(detailData.indeedCapitalAll)}}</td>
                                <td>{{detailData.latestRepayDate}}</td>
                                <td v-if="detailData.overdueDays == null">0天</td>
                                <td v-else>{{detailData.overdueDays}}天</td>
                            </tr>
                        </table>
                    </div>
                    <div class="repal-text">历史还款记录</div>
                    <div class="number-table" v-show="refundsListPlay">
                        <el-table
                            ref="multipleTable"
                            :data="resList"
                            style="text-align:center;"
                            v-loading="loading"
                        >
                            <el-table-column
                                prop="early_due_date"
                                label="还款日期"
                                align="center"
                                class="thbg"
                            >
                                <template slot-scope="props">{{props.row.repayDate}}</template>
                            </el-table-column>
                            <el-table-column prop="late_due_date" label="实还本金（元）" align="center">
                                <template slot-scope="props">{{formatNum(props.row.indeedCapital)}}</template>
                            </el-table-column>
                            <el-table-column prop="should_be_also" label="实还总额（元）" align="center">
                                <template slot-scope="props">{{formatNum(props.row.indeedTotal)}}</template>
                            </el-table-column>
                            <el-table-column prop="principal" label="实还利息及费用（元）" align="center">
                                <template slot-scope="props">{{formatNum(props.row.indeedInterest)}}</template>
                            </el-table-column>
                            <el-table-column prop="interest" label="还款账号" align="center">
                                <template slot-scope="props">{{props.row.repayAccount}}</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="clear"></div>
                    </div>
                </div>
            </div>
            <div class="refunds accont-title-div" :class="[toggle_refunds?'':'close']">
                <div class="accont-title clearfix">
                    <h4>未还本金 ¥{{formatNum(detailData.plannedCapitalAll)}}</h4>
                    <span class="repay-arrows" @click="toggleBox('toggle_refunds')"></span>
                </div>
                <div class="repalcontent">
                    <div class="repal-text">
                        还款详情信息
                        <span>*按店铺入账先后顺序，按实时汇率汇兑成应还人民币后扣款</span>
                    </div>
                    <div class="number-table tdconent-div tdconent-table">
                        <table v-loading="loading">
                            <tr>
                                <td class="tdconent-one">
                                    <span class="tdconent-span">还款日期</span>
                                    <el-popover
                                        ref="popover"
                                        placement="bottom-start"
                                        width="240"
                                        trigger="hover"
                                        popper-class="POPborrowing-repal"
                                        content="自动划扣的显示为打开页面的当前日期"
                                    ></el-popover>
                                    <el-button class="count-down-button" v-popover:popover>
                                        <img src="~assets/images/icon-question.png" alt />
                                    </el-button>
                                </td>
                                <td class="tdconent">应还总额（元）</td>
                                <td class="tdconent">应还本金（元）</td>
                                <td class="tdconent">应还利息费用（元）</td>
                            </tr>
                            <tr>
                                <td>{{detailData.earliestRepayDate}}</td>
                                <td class="onnumber-table">{{formatNum(detailData.plannedTotalAll)}}</td>
                                <td class="onnumber-table">{{formatNum(detailData.plannedCapitalAll)}}</td>
                                <td>{{formatNum(detailData.plannedInterestAll)}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="refunddslist accont-title-div" :class="[toggle_acconts?'':'close']">
                <div class="accont-title clearfix">
                    <h4>贷款详细信息</h4>
                    <span class="repay-arrows" @click="toggleBox('toggle_acconts')"></span>
                </div>
                <div class="repalcontent">
                    <div class="baonnumber-table tdconent-div">
                        <table>
                            <tr>
                                <td class="tdconent">贷款名称</td>
                                <td>{{detailData.productName}}</td>
                                <td class="tdconent">还款方式</td>
                                <td v-if="detailData.repayWay=='7'">按日计息，入账自动还款，支持银行卡还款</td>
                                <td v-if="detailData.repayWay=='02'">其他</td>
                            </tr>
                            <tr>
                                <td class="tdconent">贷款金额（元）</td>
                                <td>{{formatNum(detailData.loanTotal)}}</td>
                                <td class="tdconent">还款时间</td>
                                <td>{{detailData.earliestRepayDate}}</td>
                            </tr>
                            <tr>
                                <td class="tdconent">最早还款日</td>
                                <td>{{detailData.earliestRepayDate}}</td>
                                <td class="tdconent">日利率费</td>
                                <td>{{formatNum(detailData.plannedInterestAll)}}</td>
                            </tr>
                            <tr>
                                <td class="tdconent">最晚还款日</td>
                                <td>{{detailData.latestRepayDate}}</td>
                                <td class="tdconent">收款账户</td>
                                <td>{{detailData.repayNo}}</td>
                            </tr>
                            <tr>
                                <td class="tdconent">合同编号</td>
                                <td class="tdconent-border">
                                    {{detailData.loanNo}}
                                    <span
                                        @click="handleCheck(detailData.loanNo)"
                                        class="btn-reg"
                                    >详情</span>
                                </td>
                                <td class="tdconent">放贷机构</td>
                                <td class="tdconent-border">{{detailData.loanOrg}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </section>
    </main>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_loanDetailed } from "api/loan.js";
import utils from "utils/utils.js";
export default {
    name: "recordQueryDetails",
    data() {
        return {
            detailData: [],
            resList: [],
            refundsListPlay: false,
            nodataListPlay: false,
            statusobj: {
                "10":{status:"choose-one apply",title:"等待初审"},
                "11":{status:"choose-one apply",title:"初审通过"},
                "12":{status:"choose-one failure",title:"初审拒绝"},
                "20":{status:"choose-one apply",title:"复审通过"},
                "21":{status:"choose-one failure",title:"复审拒绝"},
                "22":{status:"choose-one apply",title:"电子签章成功"},
                "23":{status:"choose-one failure",title:"电子签章失败"},
                "30":{status:"choose-one apply",title:"放款通过"},
                "31":{status:"choose-one failure",title:"放款拒绝"},
                "-1":{status:"choose-one failure",title:"合同废止"},
                "0":{status:"choose-one failure",title:"未放款"},
                "1":{status:"choose-one employ",title:"还款中"},
                "2":{status:"choose-one overdue",title:"逾期"},
                "3":{status:"choose-one failure",title:"案件"},
                "4":{status:"choose-one settle",title:"正常结清"},
                "5":{status:"choose-one settle",title:"催收减免结清"},
                "6":{status:"choose-one settle",title:"正常提前结清"},
                "7":{status:"choose-one settle",title:"催收提前结清"},
                "8":{status:"choose-one release",title:"放款中"},
            },
            dialogFormVisible: false,
            loading: false,
            dialoglistplay: true,
            toggle_box: true,
            toggle_acconts: true,
            toggle_refunds: true,

        };
    },
    methods: {
        toggleBox(val) {
            this[val] = !this[val];
        },
        handleCheck(val) {
            let toDetail = this.$router.resolve({
                path: "/loan/recordDialog",
                query: { 
                    loanNo: val
                 }
            });
            window.open(toDetail.href, "_blank");
        },

        handlemclass: function({ row, column, rowIndex, columnIndex }) {
            return "refunds";
        },
        init() {
            let loanNo = this.$route.query.loanNo;
            this.loading = true;
            let bankListData = {
                params: {
                    loanNo: loanNo
                }
            };
            api_loanDetailed(bankListData).then(res => {
                if (res.success == false) {
                    this.nodataListPlay = true;
                    this.$message.error(res.msg);
                    return;
                }
                if (res.data == null) {
                    this.nodataListPlay = true;
                    this.$message.error(res.msg);
                    return;
                }
                this.detailData = res.data;

                
                
                // let contractStatus = res.data.loanStatus;

                // switch (contractStatus) {
                //     case "1":
                //         this.status = "choose-one employ"; //使用中
                //         break;
                //     case "4":
                //         this.status = "choose-one settle"; //结清
                //         break;
                //     case "2":
                //         this.status = "choose-one overdue"; //逾期
                //         break;
                //     case "8":
                //         this.status = "choose-one release"; //发放中
                //         break;
                //     case "5":
                //         this.status = "choose-one failure"; //失败
                //         break;
                //     case "0":
                //         this.status = "choose-one apply"; //申请中
                //         break;
                // }

                if (res.data.indeedList.length == 0) {
                    this.nodataListPlay = true;
                    this.refundsListPlay = false;
                } else {
                    this.resList = res.data.indeedList;

                    this.refundsListPlay = true;
                    this.nodataListPlay = false;
                }
                this.loading = false;
            });
        },
        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 + "");
        }
    },
    created() {
        this.init();
    }
};
</script>

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

.main {
    min-height: calc(100vh - 140px);
    .details-form {
        width: 100%;
        text-align: center;
        margin: 0 auto;
        background: url(~assets/images/query-banner.png) center center no-repeat;
        background-size: 100% 100%;
        padding: 42px 0 1px 0;
        margin-top: -1px;
        min-height: 197px;
        .details-form-box {
            margin: 0 auto;
            width: 1080px;
            position: relative;
            p {
                margin: 15px 0;
                font-size: 12px;
            }
            .details-font {
                margin: 15px 0 62px 0;
                color: #999999;
                font-size: 14px;
            }
            .repay {
                margin-top: 23px;
                margin-bottom: 49px;
                font-size: 24px;
            }
            .money {
                margin: 40px 0 20px 0;
                font-size: 48px;
            }
            .money-font {
                font-size: 30px;
            }
            .choose-one {
                position: relative;
                margin-top: -153px;
                margin-right: 193px;
                width: 99px;
                height: 81px;
                color: #3d86e9;
                margin-bottom: -1px;
                float: right;
            }
            .employ {
                background: url(~assets/images/icon-employ.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .failure {
                background: url(~assets/images/icon-failure.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .overdue {
                background: url(~assets/images/icon-overdue.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .release {
                background: url(~assets/images/icon-release.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .settle {
                background: url(~assets/images/icon-settle.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
            .apply {
                background: url(~assets/images/icon-apply.png) left center
                    no-repeat;
                background-size: 100% auto;
            }
        }
    }
    .details-box {
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: text-top;
        font-size: 9px;
        background: transparent;
        width: 1080px;
        margin: 0 auto;
        .refunds-text {
            text-align: left;
            margin: 0 0;
            padding: 10px 0;
            font-size: 18px;
            border-bottom: 0px solid #eaeaea;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-weight: bold;
        }
        .repalcontent {
            height: auto;
            /*overflow: auto;*/
            margin: 0 20px;
            transition: all 0.3s ease-out;
            border-top: 1px solid #eaeaea;
        }
        .bannumber-table {
            width: auto;
            background: #ffffff;
            height: min-content;
            padding: 20px;
        }
        .number-table {
            width: auto;
            background: #ffffff;
            height: min-content;
            /deep/ .el-dialog__headerbtn {
                z-index: 99;
                top: -7px;
            }
        }

        & /deep/ .repay-table {
            background: #ffffff;
            margin: 18px auto;
            height: min-content;
            border: none;

            .nonumber-div {
                padding: 20px;
                height: auto;
                overflow: auto;
                transition: all 0.3s ease-out;
            }
            .repal-text {
                padding: 20px 0;
                text-align: left;
                font-size: 14px;
            }
            .number-table {
                width: auto;
                background: #ffffff;
                height: min-content;
                margin: 0 auto;
                table {
                    width: 1040px !important;
                    background: #ffffff;
                    display: -webkit-inline-box;
                    border-collapse: collapse;
                    text-align: center;
                    font-size: 14px;
                    tr th {
                        background: #f4f4f7;
                        text-align: center;
                        border: none;
                        color: #999;
                        font-size: 12px;
                        .cell {
                            font-weight: initial;
                        }
                    }
                    tr td {
                        height: 48px;
                        border-bottom: 0px solid #f3f3f3;
                        border: none;
                        text-indent: 0px;
                    }
                }
            }
        }

        /deep/ .close {
            .repay-arrows {
                transform: rotate(180deg);
                -ms-transform: rotate(180deg); /* Internet Explorer */
                -moz-transform: rotate(180deg); /* Firefox */
                -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
                -o-transform: rotate(180deg); /* Opera */
            }
            .repalcontent {
                display: none;
                overflow: hidden;
            }
        }
    }

    /deep/ .refunds,
    /deep/ .refunddslist {
        background: #ffffff;
        margin: 18px auto;
        height: min-content;
        border: none;
        .repal-text {
            padding: 20px 0 0;
            text-align: left;
            font-size: 14px;
            span {
                font-size: 12px;
                color: #cc3333;
                margin-left: 12px;
            }
            .eltable-text {
                position: absolute;
                top: 50px;
                background: url(~assets/images/icon-arrows.png) 0 0 no-repeat;
            }
        }
        .number-table {
            background: #ffffff;
            height: min-content;
            // margin-bottom:20px;
            table {
                margin: 20px 0 0;
                display: -webkit-inline-box;
                border-collapse: collapse;
                text-align: center;
                font-size: 14px;

                tr th {
                    background: #f4f4f7;
                    text-align: center;
                    border: none;
                    color: #999;
                    font-size: 12px;
                }
                tr td {
                    height: 48px;
                    border-bottom: 0px solid #f3f3f3;
                    border: none;
                    text-indent: 0px;
                }
                tr th:first-child {
                    img {
                        height: 24px;
                        width: 24px;
                        border-radius: 50%;
                        background: #ffecc7;
                        display: inline-block;
                        margin: -8px 0;
                    }
                    span {
                        padding: 2px 0;
                    }

                    .count-dow {
                        border: none;
                        background: none;
                        padding: 0;
                    }
                }
                .tdconent-one {
                    text-align: center;
                    border-bottom: 1px solid #ffffff;
                    color: #999999;
                    background: #f4f4f7;
                    border-left: 1px solid #ffffff;
                    font-size: 12px;
                    width: 25%;
                    text-indent: 13px;
                    .tdconent-span {
                        position: relative;
                        top: -8px;
                    }
                }
                
            }
        }
        .baonnumber-table {
            width: 96%;
            background: #ffffff;
            height: min-content;
            padding: 20px 0;
            table {
                width: auto;
                background: #ffffff;
                display: -webkit-inline-box;
                border-collapse: collapse;
                text-align: center;
                font-size: 14px;

                tr th {
                    background: #f4f4f7;
                    text-align: center;
                    border: none;
                    color: #999;
                    font-size: 12px;
                }
                tr td {
                    width: 340px;
                    height: 48px;                  
                    text-indent: 25px;
                    text-align: left;
                }
            }
            .btn-reg {
                color: #3d86e9;
                position: relative;
                right: -40px;
                cursor: pointer;
            }
            
        }
    }
    .accont-title-div {
        .accont-title {
            position: relative;
            border-bottom: none;
        }
        .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;
            cursor: pointer;
            background: url(~assets/images/icon-arrows.png) 0 0 no-repeat;
            transition: all 0.3s ease-out;
        }
    }
    .tdconent-div {
        table {
            display: -webkit-inline-box;
            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;
            }
            tr th:first-child {
                img {
                    height: 24px;
                    width: 24px;
                    border-radius: 50%;
                    background: #ffecc7;
                    display: inline-block;
                    margin: -8px 0;
                }
                span {
                    padding: 2px 0;
                }

                .count-dow {
                    border: none;
                    background: none;
                    padding: 0;
                }
            }
        }
        .tdconent-border {
            width: 340px;
            height: 48px;
            border-bottom: 0px solid #f4f4f7;
            text-indent: 25px;
        }
        .tdconent {
            text-align: center !important;
            border-bottom: 1px solid #ffffff !important;
            color: #999999;
            background: #f4f4f7;
            font-size: 12px;
            width: 200px !important;
            text-indent: 0px !important;
        }
        .tdconent-principal {
            width: 34% !important;;
        }
    }
    /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;
    }
    /deep/ .count-down-button .el-popover {
        min-width: 140px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 10px !important;
    }
    /deep/ .count-down-button.el-button {
        border: none;
        width: 24px;
        background-color: none;
        background: none;
        position: relative;
        padding: 12px 25px;
        // bottom: -5px;
        left: -18px;
        top: -1px;
    }
    /deep/ .count-down-button :focus,
    /deep/ .count-down-button:hover,
    /deep/ .count-down-button:active {
        background-color: transparent !important;
        border-color: transparent !important;
    }
    /deep/ .repayment-table .el-table::before {
        height: 0px;
    }
    /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;
        }
    }   
    /deep/ .number-table .el-table::before {
        height: 0px;
    }
    /deep/ .number-table table tr td.onnumber-table {
        text-indent: -11px;
    }
}
</style>
<style>
.POPborrowing-repal {
    padding: 4px 14px !important;
    min-width: 140px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin-left: 12px;
}
.POPborrowing-repal[x-placement^="bottom"] {
    margin-top: -9px !important;
}
</style>
