<template>
    <main class="main">
        <section>
            <div class="reimbursement-bxo">
                <div class="reimbursement-choose">
                    <p class="radio-group">
                        还款时间：
                        <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>
                </div>
            </div>
            <div class="reimbursement-list">
                <div class="reimbursement-list-box eltable-th">
                    <p class="reimbursement-list-blank"></p>
                    <el-table
                        ref="multipleTable"
                        tooltip-effect="dark"
                        style="text-align:center;"
                        v-loading="loading"
                        :data="loanSituationList"
                    >
                        <el-table-column label="借款时间" align="center">
                            <template slot-scope="scope">{{ scope.row.loanDate }}</template>
                        </el-table-column>
                        <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.maxTerm }}天</template>
                        </el-table-column>
                        <el-table-column label="还款方式" align="center">
                            <template slot-scope="scope" slot="header">
                                <el-popover
                                    ref="popover"
                                    placement="bottom-start"
                                    width="266"
                                    trigger="hover"
                                    popper-class="POPborrowing-way"
                                    content="按日计息，入账自动还款，支持银行卡还款"
                                >
                                    <span slot="reference" class="tdconent-span-two">
                                        还款方式
                                        <el-button class="count-down-button" v-popover:popover>
                                            <img src="~assets/images/icon-question.png" alt />
                                        </el-button>
                                    </span>
                                </el-popover>
                            </template>
                            <template slot-scope="scope">
                                <div v-if="scope.row.repayWay=='7'">按日计息</div>
                                <div v-else-if="scope.row.repayWay=='02'">其他</div>
                            </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="操作">
                            <template slot-scope="scope">
                                <el-button
                                    class="count-down-nobutton"
                                    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>
            </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: "refund",
    data() {
        return {
            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() - 3600 * 1000 * 24
                    );
                }
            },
            tableData: [],
            currentPage: 1,
            total: 0,
            size: 10,
            storeValue: "",
            loading: true,
            loanSituationList: [],
            time: ""
        };
    },
    methods: {
        handleCheck(item) {
            this.loading = true;
            this.$router.push({
                path: "/loan/refundInput",
                query: {
                    loanNo: item.loanNo
                }
            });
            this.$store.commit("setPlannedCapital", item.plannedCapital);
            this.$store.commit("setRepaymentAllAmt", item.plannedTotal);
            this.loading = false;
        },
        defaultTime() {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 365);
            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);
        },
        handleSizeChange(val) {
            this.size = val;
            this.selectSort(this.currentPage, val);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.selectSort(val, this.size);
        },
        selectSort(pageNum, pageSize) {
            this.loading = true;
            let bankListData = {
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    fromEndDate: this.time[0],
                    toEndDate: this.time[1]
                }
            };
            api_loanSituation(bankListData).then(res => {
                if (res.success) {
                    this.loanSituationList = res.data.loans;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        //获得时间段
        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;
        },
        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.defaultTime();
    }
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/common.css";

.reimbursement-bxo /deep/ .el-radio {
    position: relative;
    display: inline-block;
    outline: none;
    margin: 0 10px;
    .el-radio__input {
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
    }
    .el-radio__input.is-checked + .el-radio__label {
        padding: 4px 10px;
        border-radius: 4px;
        background: #3d86e9;
        color: #fff;
    }
    .el-radio__label {
        padding: 10px;
    }
}
.main {
    min-height: calc(100vh - 186px);
    section {
        margin: 59px auto 0;
        background: #fff;
        .reimbursement-bxo {
            width: 100%;
            background: #fff;
            /deep/ .reimbursement-choose {
                width: 1080px;
                background: #ffffff;
                margin: 0 auto;
                height: min-content;
                padding-top: 30px;
                text-align: left;
                p {
                    padding: 12px 0;
                    font-size: 14px;
                    cursor: pointer;
                    text-align: justify;
                    span {
                        padding: 3px 7px;
                        margin: 0 13px;
                        text-align: justify;
                    }
                    .choose-one {
                        margin-left: 0;
                    }
                    .choose-one:hover {
                        margin-left: 0;
                    }

                    span.active {
                        border: 1px solid #ffffff;
                        border-radius: 6px;
                        -moz-border-radius: 6px; /* Old Firefox */
                        color: #ffffff;
                        background: #3d86e9;
                        padding: 3px 6px;
                        margin: 0 13px;
                    }
                    .choose-one {
                        margin-left: 0;
                    }
                    .choose-one:hover {
                        margin-left: 0;
                    }
                }
                .radio-group {
                    padding: 12px 0;
                    font-size: 14px;
                    cursor: pointer;
                    text-align: justify;
                    span {
                        padding: 3px 7px;
                        margin: 0 8px;
                        text-align: justify;
                    }
                    .choose-one {
                        margin-left: 0;
                    }
                    .choose-one:hover {
                        margin-left: 0;
                    }

                    span.active {
                        border: 1px solid #ffffff;
                        border-radius: 6px;
                        -moz-border-radius: 6px; /* Old Firefox */
                        color: #ffffff;
                        background: #3d86e9;
                        padding: 3px 6px;
                        margin: 0 13px;
                    }
                    .choose-one {
                        margin-left: 0;
                    }
                    .choose-one:hover {
                        margin-left: 0;
                    }
                }
            }
        }
        .reimbursement-list {
            display: inline-block;
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            vertical-align: text-top;
            font-size: 9px;
            background: #ffffff;
            margin: 0 auto;
            .principalBtext {
                width: 1080px;
                height: 41px;
                margin-left: 391px;

                background-size: 186px 41px;
                a {
                    font-size: 17px;
                    font-weight: bold;
                }
            }

            .advance {
                width: 100%;
                background: #ffffff;
                margin: 0 auto;
                font-size: 12px;
                color: #333333;
                p.submit {
                    width: 100%;
                    padding: 34px 0;
                    margin: 0 auto;
                    span,
                    a {
                        display: block;
                        font-size: 14px;
                        width: 80%;
                        margin: 25px auto;
                        text-align: center;
                        color: #999999;
                    }
                    .submit-img {
                        width: 80%;
                        margin-bottom: 35px;
                    }
                    .way {
                        color: #3d86e9;
                        font-size: 24px;
                        font-weight: 200px;
                    }
                }
            }
        }

        /deep/ .reimbursement-list-box {
            width: 1080px;
            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 {
                    background: #f4f4f7;
                    text-align: center;
                    border: 0;
                    padding: 0;
                }
                tr td {
                    height: 48px;
                    border: 0;
                    text-align: center;
                }
            }
            .tdconent-one {
                text-align: center;
                color: #333333;
                background: #f5f5f5;
                font-size: 12px;
                width: 200px;
                .tdconent-span {
                    position: relative;
                    top: -8px;
                    font-size: 14px;
                    font-weight: 700;
                }
                span {
                    position: relative;
                    top: -6px;
                    text-align: center;
                    color: #333333;
                    background: #f5f5f5;
                    font-size: 12px;
                    width: 14px;
                    padding: 0;
                }
            }
            .tdconent-span-two {
                position: relative;
                top: -8px;
                font-size: 14px;
            }
        }
        /deep/ .eltable-th .el-table td:nth-of-type(4) {
            text-indent: -33px;
        }
        /deep/ .eltable-th .el-button--primary {
            background: none;
            color: #3d86e9;
            border: 0;
        }
        /deep/ .eltable-th .el-button--primary:active {
            background: none;
            color: #3d86e9;
            border: 0px;
        }
        .reimbursement-list-blank {
            border-top: 1px solid #f3f3f3;
            margin: 30px 0;
        }
        /deep/ .reimbursement-list-box .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;
            text-align: content;
            .el-pagination .el-pagination__total,
            .el-input__inner,
            .el-pagination__jump {
                color: #9b9b9b;
            }
        }

        .clear {
            clear: both;
        }
    }
    /deep/ .count-down-button:focus,
    /deep/ .count-down-button:hover,
    /deep/ .count-down-button:active {
        background-color: transparent !important;
        border-color: transparent !important;
    }
    .count-down-button .el-popover {
        min-width: 266px;
        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;
    }
    /deep/.count-down-nobutton .el-button {
        border: none;
        width: 24px;
        background-color: none;
        background: none;
        color: #3d86e9;
        position: relative;
        padding: 12px 25px;
        bottom: -5px;
        left: -18px;
    }
}
</style>
<style>
.POPborrowing-way {
    padding: 4px 14px !important;
    min-width: 266px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin-left: 12px;
}
.POPborrowing-way[x-placement^="bottom"] {
    margin-top: -9px !important;
}
</style>

