<template>
    <main class="main">
        <section class="repayment-form">
            <p class="money">{{formatNum(plannedCapitalAll)}}</p>
            <p class="repay">未还本金（元）</p>
            <p class="repayment-text">仅展示三年内记录，更多信息请拨打400-687-3977</p>
            <span class="repayment-input" @click="repayment" to>还款</span>
            <p class="repayment-time">
                最晚还款时间：
                <span
                    id="txtName"
                    v-for="(item,index) in shortcuts"
                    :key="index"
                    @click="selectStoreSite(item)"
                    :class="[shortcuts_text==item.text?'active':'']"
                >{{item.text}}</span>
            </p>
        </section>
        <section class="repayment-content">
            <div class="rpmt-money">
                <div class="rpmt-money-text">
                    <div class="rpmt-text">
                        <span>{{this.shortcuts_text}}应还款总额（元）：</span>
                        <span class="rpmt-money">{{formatNum(plannedTotalAll)}}</span>
                    </div>
                    <el-popover
                        ref="popover"
                        placement="right"
                        width="161"
                        trigger="hover"
                        popper-class="popborrowing-money"
                        content="包含所有应还贷款笔数"
                    ></el-popover>

                    <el-button class="rpmt-bottom" v-popover:popover></el-button>
                </div>
                <el-divider class="rpmt-divider"></el-divider>
            </div>

            <div class="repayment-table">
                <el-table
                    tooltip-effect="dark"
                    style="text-align:center; "
                    :data="loanSituationList"
                    v-loading="loading"
                >
                    <el-table-column label="最早还款日" align="center">
                        <template slot-scope="scope">{{ scope.row.startDate }}</template>
                    </el-table-column>
                    <el-table-column label="最晚还款日" align="center">
                        <template slot-scope="scope">{{ scope.row.endDate }}</template>
                    </el-table-column>
                    <el-table-column label="应还总额（元）" align="center">
                        <template slot-scope="scope">{{ formatNum(scope.row.plannedTotal) }}</template>
                    </el-table-column>
                    <el-table-column label="本金（元）" align="center">
                        <template slot-scope="scope">{{ formatNum(scope.row.plannedCapital) }}</template>
                    </el-table-column>
                    <el-table-column label="利息及费用（元）" align="center">
                        <template slot-scope="scope">{{ formatNum(scope.row.plannedInterest+scope.row.plannedAccountAmt+scope.row.plannedAmerce)}}</template>
                    </el-table-column>
                    <el-table-column label="还款详情" align="center">
                        <template slot-scope="scope">
                            <el-button
                                class="primary-scope"
                                type="primary"
                                @click="handleCheck(scope.row)"
                            >查看</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>
        </section>
    </main>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_loanSituation } from "api/loan.js";
import utils from "utils/utils.js";

export default {
    name: "repayment",
    data() {
        return {
            tableData: [],
            plannedCapitalAll: "",
            plannedTotalAll: "",
            isshow: false,
            shortcuts: [
                {
                    text: "近1年",
                    startDate: 0,
                    endDate: "365",
                    show: false
                },
                {
                    text: "近1个月",
                    startDate: 0,
                    endDate: "30",
                    show: false
                },
                {
                    text: "近7天",
                    startDate: 0,
                    endDate: "7",
                    show: false
                }
            ],
            shortcuts_text: "近1年",
            time: "",
            currentPage: 1,
            total: 0,
            size: 10,
            loading: true,
            startDate: 0,
            endDate: "-7",
            nodataplay: false,
            nodatalistplay: false,
            loanSituationList: []
        };
    },
    methods: {
        handleCheck(item) {
            this.loading = true;
            this.$router.push({
                path: "/loan/repaymentDetails",
                query: {
                    loanNo: item.loanNo,
                    applyId: item.applyId
                }
            });
            this.loading = false;
        },
        repayment() {
            this.loading = true;
            this.$router.push({
                path: "/loan/repaymentType"
            });
            this.loading = false;
        },
        selectSort(pageNum, pageSize) {
            this.loading = true;
            //let item = this.shortcuts[0];
            this.show = true;
            let bankListData = {
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    fromEndDate: this.time[1],
                    toEndDate: this.time[0]
                }
            };
            api_loanSituation(bankListData).then(res => {
                if (res.success) {
                    if (res.data.loans.length == 0) {
                        this.plannedCapitalAll = "0.00";
                        this.plannedTotalAll = "0.00";
                    } else {
                        this.plannedCapitalAll = res.data.plannedCapitalAll;
                        this.plannedTotalAll = res.data.plannedTotalAll;
                    }
                    this.loanSituationList = res.data.loans;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        changeTime(val) {
            this.time[0] = utils.formatDate(val[0], "yyyy-MM-dd");
            this.time[1] = utils.formatDate(val[1], "yyyy-MM-dd");
        },
        selectStoreSite(val) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() + 3600 * 1000 * 24 * val.endDate);
            
            this.time = [start, end];
            this.changeTime(this.time);

            this.shortcuts_text = val.text;
            this.selectSort(1, 10);
        },
        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 + "");
        }
    },
    created() {
        this.selectStoreSite(this.shortcuts[0]);
    }
};
</script>

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

/deep/ .el-popover {
    min-width: 140px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px 0 10px !important;
}
.main {
    display: block;
    min-height: calc(100vh - 154px);
    background-color: #fff;
    margin: 20px 0;
}
.main /deep/ .repayment-time {
    padding: 20px 0 32px !important;
    color: #c0d1ff;

    span {
        display: inline-block;
        cursor: pointer;
        padding: 8px 9px;
        margin-right: 10px;
        color: #c0d1ff;
    }
    span:hover {
        border: 1px solid #ffffff;
        box-sizing: border-box;
        color: #fff;
        padding: 6px 8px;
        border-radius: 4px;
        -moz-border-radius: 4px;
    }
    span:active {
        border-radius: 4px;
        -moz-border-radius: 4px;
        background: url(~assets/images/icon-checked.png) no-repeat 100% 100%;
        background-size: 12px 12px;
    }
    span.active {
        border: 1px solid #ffffff;
        box-sizing: border-box;
        color: #fff;
        padding: 6px 8px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        background: url(~assets/images/icon-checked.png) no-repeat 100% 100%;
        background-size: 12px 12px;
    }
}

.repayment-form {
    width: 100%;
    text-align: center;
    background: url(~assets/images/icon-rdbj.png) center center no-repeat;
    background-size: auto 100%;
    min-height: 370px;
    color: #fff;
    margin-top: -1px;
    padding: 30px 0 18px;
    p {
        font-size: 14px;
    }
    .repayment-input {
        display: block;
        background: #ffffff;
        color: #3d86e9;
        width: 220px;
        border: 1px solid #ffffff;
        border-radius: 4px;
        -moz-border-radius: 4px;
        margin: 24px auto;
        padding: 12px 0;
        font-size: 18px;
        cursor: pointer;
    }
    .repay {
        font-size: 24px;
        color: #fff;
        margin: 20px 0 !important;
        text-indent: 15px;
    }
    .repayment-text {
        margin: 20px 0;
        color: #8eb0f6;
    }
    .money {
        margin: 44px 0 20px 0;
        font-size: 48px;
        color: #fff;
    }
}
.refundsB {
    display: inline-block;
    width: 100%;
    padding: 29px 0;
    vertical-align: text-top;
    font-size: 9px;
    background: #ffffff;
    margin: 0 auto;
}
/deep/ .repayment-content {
    background-color: #fff;
    width: 1080px;
    margin: 0 auto;
    .rpmt-money {
        width: 1080px;
        background-color: #ffffff;
        margin: 0 auto;
        position: relative;
        padding-left: 2px;
        .rpmt-money-text {
            position: relative;
            margin: 0 auto;
            text-align: left;
            font-size: 14px;
            padding-top: 16px;
            .rpmt-text {
                float: left;
                span {
                    font-size: 14px;
                }
            }
            .rpmt-bottom {
                position: relative;
                background-color: #ffecc7;
                background: url(~assets/images/icon-question.png) 0 0 no-repeat;
                background-size: 24px 24px;
                /* display: block; */
                margin: 0 auto;
                bottom: 3px;
                left: 6px;
            }
            .rpmt-money {
                font-size: 14px;
                font-weight: bold;
                padding: 2px 0 !important ;
            }
            .rpmt-bottom {
                border: transparent;
                background-color: transparent;
            }
            .rpmt-bottom:focus,
            .rpmt-bottom:hover,
            .rpmt-bottom:active {
                background-color: transparent;
                border-color: transparent;
            }
        }
    }

    .repayment-table {
        width: 1080px;
        background: #ffffff;
        margin: 18px auto;
        height: min-content;
        border: transparent;
        min-height: calc(100vh - 600px);
        table {
            width: 100%;
            background: #ffffff;
            border-collapse: collapse;
            text-align: center;
            font-size: 14px;
            border: 0px;
            tr th {
                background: #f4f4f7;
                text-align: center;
                border: transparent;
            }
            tr td {
                text-align: center;
                border: transparent;
            }
        }
        /deep/ .table-plannedcapital {
            text-indent: 4px !important;
        }
        /deep/ .el-table th:nth-of-type(3),
        /deep/ .el-table th:nth-of-type(4),
        /deep/ .el-table th:nth-of-type(5) {
            text-indent: 3px;
        }
    }
}
/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/ .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/ .rpmt-divider .el-divider--horizontal {
    width: 1080px;
}
/deep/ .repayment-table .el-table td {
    border: 0px solid transparent;
}
/deep/ .repayment-table .el-table th.is-leaf {
    border: 0px solid transparent;
    background: #f4f4f7;
}
/deep/ .primary-scope,
/deep/ .primary-scope:focus,
/deep/ .primary-scope:hover,
/deep/ .primary-scope:active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #3a8ee6 !important;
}
</style>
<style>
.popborrowing-money {
    min-width: 161px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 10px 0 10px !important;
    margin-left: 12px;
}
.popborrowing-money .el-popover--plain {
    padding: 9px 20px;
}
.popborrowing-money[x-placement^="right"] {
    margin-left: -10px;
}
</style>
