<template>
    <main class="main">
        <section>
            <div class="layout-box">
                <div class="accont-title clearfix">
                    <h3>还款</h3>
                </div>
                <div class="refundinput-content">
                    <div class="steps clearfix">
                        <ul>
                            <li>
                                <img src="~assets/images/icon-refundinput-1.png" alt />
                            </li>
                            <!-- <li>
                                <img src="~assets/images/icon-refundinput2.png" alt />
                            </li>-->
                            <li>
                                <img src="~assets/images/icon-refundinput3.png" alt />
                            </li>
                        </ul>
                        <p>
                            <span>输入还款金额</span>
                            <!--<span>提交还款</span>-->
                            <span>还款完成</span>
                        </p>
                    </div>
                    <div class="money clearfix">
                        <ul>
                            <li>{{ formatNum(loan.plannedCapital) }}</li>
                        </ul>
                        <p>
                            <span>未还本金(元)</span>
                        </p>
                    </div>
                    <div class="refundinput-way">
                        <div class="subtitle">
                            <span>
                                <router-link to>借款时间：</router-link>
                                {{detailData.loanDate}}
                            </span>
                            <span>
                                <router-link to>最晚还款日期：</router-link>
                                {{ detailData.endDate}}
                            </span>
                            <span v-if="detailData.repayWay=='7'" class="way">
                                <router-link to>还款方式：</router-link>按日计息，入账自动还款，支持银行卡还款
                            </span>
                            <span v-if="detailData.repayWay=='02'" class="way">
                                <router-link to>还款方式：</router-link>其他
                            </span>
                        </div>
                    </div>
                    <div class="refundinput-ruleform">
                        <div class="way-cost">
                            <span>还款总额：</span>
                            <el-input
                                class="way-input"
                                v-model="principalAmt"
                                :maxlength="10"
                                @change="refundSelectInput()"
                                placeholder="请输入还款金额"
                            >
                                <span slot="suffix">元</span>
                            </el-input>
                        </div>
                        <!-- 先隐藏 -->
                        <!-- <p>
                            <span>手续费：</span>
                            {{formatNum(detailData.indeedAccountAmt)}} 元
                        </p>-->
                        <p>
                            <span>利息+费用：</span>
                            {{formatNum(detailData.indeedInterest+detailData.indeedAccountAmt+detailData.indeedAmerce)}} 元
                        </p>
                        <p class="money-two">
                            <span>还款本金：</span>
                            <strong>{{ formatNum(detailData.indeedCapital)}}</strong> 元
                        </p>

                        <el-divider></el-divider>
                    </div>

                    <div class="notice-box">
                        <h4>还款账户</h4>
                        <el-radio-group v-model="currency" @change="changeCurrency">
                            <el-radio label="1">跨境收款账户</el-radio>
                            <el-radio label="2" :disabled="radiokey">银行账户</el-radio>
                        </el-radio-group>
                        <div class="notice" v-show="notiCelistPlay">
                            <el-table
                                ref="multipleTable"
                                :data="operationListData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                v-loading="loading"
                                @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" label="选择" width="55"></el-table-column>
                                <el-table-column label="店铺名称" align="center" show-overflow-tooltip>
                                    <template slot-scope="scope">{{ scope.row.storeName }}</template>
                                </el-table-column>
                                <el-table-column label="账户持有人" align="center" show-overflow-tooltip>
                                    <template slot-scope="scope">{{ scope.row.personName }}</template>
                                </el-table-column>
                                <el-table-column label="币种" align="center">
                                    <template slot-scope="scope">
                                        <!--审核状态开始-->
                                        <p>{{status[scope.row.curId].title}}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="可提现金额" align="center">
                                    <template
                                        slot-scope="scope"
                                    >{{ formatNum(scope.row.currentAmt) }}</template>
                                </el-table-column>
                                <el-table-column label="约等于人民币（元）" align="center">
                                    <template
                                        slot-scope="scope"
                                    >{{ formatNum(scope.row.accountCNYTotalAmt) }}</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>

                            <el-table
                                ref="multipleTable"
                                :data="bankCard"
                                tooltip-effect="dark"
                                row-key="id"
                                style="text-align:center;"
                                v-show="noacCountPlay"
                            >
                                <el-table-column label="银行名称" align="center"></el-table-column>
                                <el-table-column label="划扣手续费（元）" align="center">
                                    <template slot="header" slot-scope="scope">
                                        <el-popover
                                            ref="popover"
                                            placement="right"
                                            width="201"
                                            trigger="hover"
                                            popper-class="POPborrowing-center"
                                            content="0.4%划扣手续费，保证余额充足"
                                        ></el-popover>
                                        <span>借款本金(元)</span>
                                        <el-button v-popover:popover>
                                            <img src="~assets/images/icon-question.png" alt />
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="还款总额（元）" align="center"></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>
                        <div class="notice-text" v-show="noticeWayButton">
                            <el-button id="areaSelect" class="notice-way" @click="handleCheck">下一步</el-button>
                            <span>*汇兑后划扣金额具体以实时汇率为准</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { api_trial, api_queryStoreList, api_operation } from "api/loan.js";
import utils from "utils/utils.js";
export default {
    data() {
        return {
            currency: "1",
            detailData: [],
            status: {
                CNY: { title: "人民币" },
                USD: { title: "美元" },
                EUR: { title: "欧元" },
                HKD: { title: "港币" },
                GBP: { title: "英镑" },
                JPY: { title: "日元" },
                CAD: { title: "加拿大站" }
            },
            operationListData: [],
            noacCountPlay: false, //银行账户列表
            notiCelistPlay: true, //跨境收款账户列表
            notiCetextPlay: "",
            number: "",
            loading: false,
            bankCard: [],
            repaymentAllAmt: 0, //还款总金额
            principalAmt: "", //还款本金
            proceduresAmt: 0, //手续费
            plannedInterest: 0, //利息
            plannedInstFee: 0, //费用
            totleNum: 0,
            totleMoney: 0, //账户总金额
            radiokey: true,
            noticeWayButton: false, // 不显示
            loanNo: "",
            sunrateBankIdSum: []
        };
    },
    watch: {
        multipleSelection: {
            handler(newVal, oldVal) {
                let withdrawStoreList = [];
                let totlecurrentAmt = 0;
                for (let i = 0; i < newVal.length; i++) {
                    const element = newVal[i];
                    let keys = {
                        storeId: "",
                        storeName: "",
                        accountCNYTotalAmt: 0
                    };
                    totlecurrentAmt += parseFloat(element.accountCNYTotalAmt);
                    keys.storeId = element.kycStoreId;
                    keys.storeName = element.personName; //账户姓名
                    keys.accountCNYTotalAmt = element.accountCNYTotalAmt; //约等于人民币（元）
                    withdrawStoreList.push(keys);
                }
                this.totleMoney = totlecurrentAmt;
                console.log(this.totleMoney);

                this.$store.commit("setWithdrawStoreList", withdrawStoreList);
                this.$store.commit("setTotleMoney", this.totleMoney);
            },
            deep: true
        }
    },
    computed: {
        ...mapState(["loan"])
    },
    methods: {
        handleSelectionChange(val) {
            this.sunrateBankIdSum = [];
            for (let j = 0; j < val.length; j++) {
                const element = val[j];
                this.sunrateBankIdSum.push(element.id);
            }

            let withdrawStoreList = [];
            this.multipleSelection = val;

            this.totleNum = val.length;
            let totlecurrentAmt = 0;
            for (let i = 0; i < val.length; i++) {
                const element = val[i];
                let keys = {
                    storeId: "",
                    storeName: "",
                    accountCNYTotalAmt: 0
                };
                totlecurrentAmt += parseFloat(element.accountCNYTotalAmt);
                keys.storeId = element.kycStoreId;
                keys.storeName = element.personName;
                keys.accountCNYTotalAmt = element.accountCNYTotalAmt; //约等于人民币（元）
                withdrawStoreList.push(keys);
            }

            this.totleMoney = totlecurrentAmt;
            this.notiCelistPlay = true;

            this.$store.commit("setWithdrawStoreList", withdrawStoreList);
            this.$store.commit("setTotleMoney", this.totleMoney);
        },
        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() {
            //还款
            if (this.totleNum == 0) {
                this.$message.warning("没选中账户金额");
                return;
            }
            if (parseInt(this.principalAmt) < 100) {
                this.$message.error("还款金额不得低于100元人民币！");
                return;
            }
            if (parseInt(this.principalAmt) > parseInt(this.totleMoney)) {
                //还款金额大于被选中账户金额则跳出本次判断
                this.$message.error("还款金额大于被选中账户金额");
                return;
            }

            this.loading = true;
            let bankListoperation = {
                data: {
                    loanNo: this.detailData.loanNo, //编号
                    principalAmt: this.detailData.indeedCapital, //还款本金
                    repaymentAllAmt: this.principalAmt, //还款总金额
                    accountNo: this.detailData.accountNo,
                    proceduresAmt: this.detailData.proceduresAmt, //手续费
                    plannedInterest: this.detailData.plannedInterest, //利息
                    plannedInstFee: this.detailData.plannedInstFee, //费用
                    sunrateBankIdSum: this.sunrateBankIdSum
                }
            };
            api_operation(bankListoperation).then(res => {
                //店铺贷->还款->还款操作
                console.log(bankListoperation);
                this.loading = true;
                if (res.success) {
                    this.$router.push({
                        path: "/loan/refundSubmit"
                    });
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        changeCurrency() {
            this.loading = true;
            if (this.currency == 1) {
                //跨境收款账户
                let bankListoperation = {
                    params: {}
                };
                api_queryStoreList(bankListoperation).then(res => {
                    ///还款店铺账户查询
                    if (res.success) {
                        if (res.data.length == 0) {
                            this.notiCelistPlay = true;
                            this.noticeWayButton = false;
                            return;
                        }
                        this.operationListData = res.data;
                        this.notiCelistPlay = true;
                        this.noticeWayButton = true;
                    } else {
                        this.$message.error(res.msg);
                        return;
                    }
                });
            }

            if (this.currency == 2) {
                //银行账户
                this.notiCetextPlay = true;
            }
            this.loading = false;
        },
        refundSelectInput() {
            let loanNo = this.$route.query.loanNo;
            let repayTotal = this.loan.repaymentAllAmt;
            var price = "" + this.principalAmt;
            price = price
                .replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
                .replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
                .replace(".", "$#$")
                .replace(/\./g, "")
                .replace("$#$", ".")
                .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
            if (price.indexOf(".") < 0 && price != "") {
                // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                price = parseFloat(price);
            }
            this.principalAmt = price;
            if (repayTotal) {
                this.principalAmt = repayTotal;
                console.log(this.principalAmt + "repayTotal");
            }

            if (price) {
                this.principalAmt = price;
                console.log(this.principalAmt + "price");
            }
            let bankListData = {
                data: {
                    loanNo: loanNo,
                    repayTotal: this.principalAmt
                }
            };
            api_trial(bankListData).then(res => {
                //还款试算

                if (res.success == false) {
                    this.$message.error(res.msg);
                    return;
                }

                if (res.data.length == 0) {
                    this.$message.error(res.msg);
                    return;
                }
                this.detailData = res.data;
                console.log(this.detailData);

                this.number = res.data.indeedTotal;

                if (this.principalAmt == "") {
                    this.principalAmt = parseFloat(this.number).toFixed(2);
                } else if (
                    parseFloat(this.number) < parseFloat(this.principalAmt)
                ) {
                    this.principalAmt = parseFloat(this.number).toFixed(2);
                }
                // else if(parseFloat(this.principalAmt) < 10){

                //     this.principalAmt = parseFloat(10).toFixed(2);

                // }
                else {
                    this.principalAmt = parseFloat(this.principalAmt).toFixed(
                        2
                    );
                }
            });
        }
    },
    created() {
        this.refundSelectInput();
        this.changeCurrency();
        //this.noticeWayButton = false;
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.kyc-box {
    background: #f7f7f7;
}

.main {
    min-height: calc(100vh - 224px);
    section {
        width: 1080px;
        margin: 60px auto 0;
        text-align: left;
        background: #fff;
        .refundinput-content {
            padding: 30px 22px;
            h3 {
                margin-bottom: 8px;
            }
        }
        .steps {
            margin: 0 62px;
            text-align: center;
            ul {
                height: 50px;
                padding-bottom: -3px;
                border-bottom: 1px solid #e6e6e6;
                -webkit-box-sizing: border-box;
                position: relative;
                li {
                    float: left;
                    width: 50%;
                    height: 100%;
                    &:first-of-type::after {
                        content: "";
                        display: block;
                        position: absolute;
                        left: 50%;
                        bottom: 0;
                        width: 110px;
                        height: 1px;
                        margin-left: -284px;
                        background: #3d86e9;
                        margin-bottom: -1px;
                    }
                    img {
                        width: 40px;
                        height: 40px;
                    }
                }
            }
            p {
                margin-top: 20px;
                font-size: 14px;
                span {
                    float: left;
                    width: 50%;
                }
            }
        }
        .money {
            text-align: center;
            width: 277px;
            margin: 0 auto;
            ul {
                height: 132px;
                padding-bottom: 6px;
                border-bottom: 1px solid #e6e6e6;
                box-sizing: border-box;
                position: relative;

                li {
                    height: 100%;
                    left: 35px;
                    font-weight: bold;
                    font-size: 30px;
                    padding: 75px 0 17px 0;
                    margin: 0 auto;
                    text-indent: -18px;

                    &:first-of-type::after {
                        content: "";
                        display: block;
                        position: absolute;
                        left: 5%;
                        bottom: 0;
                        width: 180px;
                        height: 2px;
                        margin-left: 34px;
                        background: #3d86e9;
                        margin-bottom: -1px;
                    }
                }
            }
            p {
                padding: 20px 0;
                span {
                    float: left;
                    width: 100%;
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
        .refundinput-way {
            width: 100%;
            background: #ffffff;
            margin: 0 auto;
            font-size: 12px;
            color: #333333;
            .subtitle {
                width: 100%;
                padding: 34px 0;
                border-bottom: 1px solid #e6e6e6;
                span {
                    display: inline-block;
                    font-size: 14px;
                    width: 25%;
                    text-align: center;
                    a {
                        color: #999999;
                    }
                }
                .way {
                    width: 49%;
                    display: inline-block;
                    text-align: center;
                    border-radius: 4px;
                }
            }
        }
        .refundinput-ruleform {
            width: 100%;
            background: #ffffff;
            margin: 0 auto;
            font-size: 12px;
            color: #333333;
            .way-cost {
                width: 40%;
                padding: 34px 22px;
                display: block;
                span {
                    font-size: 14px;
                    float: left;
                    line-height: 43px;
                    height: 43px;
                }
            }

            p {
                width: 40%;
                font-size: 14px;
                font-weight: bold;
                text-align: left;
                height: 28px;
                line-height: 28px;

                span {
                    color: #999999;
                    display: inline-block;
                    width: 90px;
                    text-align: right;
                    margin-right: 11px;
                }
            }
            .money-two {
                text-align: left;
                margin: 0;
                strong {
                    font-size: 18px;
                    font-weight: bold;
                }
            }

            /deep/ .way-input {
                width: 330px;
                line-height: 46px;
                border-radius: 4px;
                font-size: 18px;
                color: #ffffff;
                .el-input__inner {
                    background-color: #fcfcfc;
                    border: 1px solid #e6e6e6;
                    color: #333333;
                    height: 46px;
                    width: 330px;
                    line-height: 46px;
                    margin-left: 10px;
                }
                span {
                    color: #333333;
                    line-height: 45px;
                }
            }
            /deep/ .way-input::-webkit-outer-spin-button,
            /deep/ .way-input::-webkit-inner-spin-button {
                -webkit-appearance: none !important;
                margin: 0;
            }
            /deep/ .way-input .el-input__inner::-webkit-input-placeholder {
                color: #333333;
                font-size: 18px;
            }
            /deep/ .way-input .el-input__inner::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #333333;
                font-size: 18px;
            }
            /deep/ .way-input .el-input__inner:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #333333;
                font-size: 18px;
            }
            /deep/ .way-input .el-input__inner:-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                color: #333333;
                font-size: 18px;
            }
        }
        .registration-type {
            width: 100%;
            background: #ffffff;
            margin: 0 auto;
            font-size: 12px;
            color: #333333;
            border-bottom: 1px solid #f3f3f3;
        }
        .notice-box {
            width: 100%;
            margin: 0 auto;

            h4 {
                margin: 27px 0;
            }
            /deep/ .notice {
                width: 100%;
                background: #ffffff;
                margin: 27px auto 0;
                height: min-content;
                table {
                    width: 100%;
                    background: #ffffff;
                    border-collapse: collapse;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 14px;
                    tr th {
                        background: #f4f4f7;
                        text-align: center;
                        border: 0;
                        color: #999999;
                        width: 33.33%;
                    }
                    tr td {
                        height: 48px;
                        border: 0px solid #f3f3f3;
                        width: 33.33%;
                    }
                    tr th:first-child {
                        /** .el-checkbox__inner{
                            background-color:#E7E7E7;
                            width:22px;
                            height:22px;
                            }*/
                        img {
                            height: 24px;
                            width: 24px;
                            border-radius: 50%;
                            background: #ffecc7;
                            display: inline-block;
                            margin: -8px 0;
                        }
                    }
                    .el-button {
                        border: none;
                        background: none;
                        padding: 0;
                        img {
                            margin: -8px 0;
                        }
                    }
                }
                .el-checkbox:last-child {
                    margin-left: 10px;
                }
                .el-button--primary {
                    background: none;
                    color: #3a8ee6;
                    border: 0px;
                }
                .el-button--primary:active {
                    background: none;
                    color: #3a8ee6;
                    border: 1px;
                }
                .el-table {
                    position: relative;
                }
                .el-table::before {
                    height: 0;
                }
                .el-table::after {
                    width: 0;
                }
                .el-table--border {
                    border: 1px solid #f3f3f3;
                    border-radius: 8px;
                    -moz-border-radius: 8px;
                }
            }
            /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;
                }
            }
            .notice-text {
                width: 100%;
                margin: 0 auto;
                .notice-way {
                    width: 330px;
                    margin: 0px auto;
                    line-height: 46px;
                    background: #3d86e9;
                    color: #fff;
                    font-size: 18px;
                    font-weight: 200px;
                    display: block;
                    text-align: center;
                    padding: 1px 20px;
                    margin-top: 20px;
                }
                span {
                    display: block;
                    color: #cc6666;
                    margin: 19px auto;
                    font-size: 12px;
                    text-align: center;
                }
            }
        }
    }
}
</style>
<style>
.POPborrowing-center {
    min-width: 140px !important;
    padding: 6px 20px !important;
}
</style>
