<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(detailData.repaymentAllAmt) }}
                            </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=='01'" 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.proceduresAmt)}} 元</p>
                        <p><span>利息+费用：</span>{{formatNum(detailData.plannedInterest)}} 元</p>
                        <p class="money-two"><span>还款总额：</span><strong>{{ formatNum(detailData.repaymentAllAmt)}}</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">
                            <el-button id="areaSelect"  :disabled="notice_way_button" 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,
            notice_way_button:false,// true  不可点    false 可点
            loanNo:'',
           
        }
    },    
    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;
                this.$store.commit("setWithdrawStoreList", withdrawStoreList);
                this.$store.commit("setTotleMoney", this.totleMoney);
            },
            deep: true
        },          
    },   
    methods: { 
        handleSelectionChange(val) { 
           
            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;
            // if(this.totleMoney && val.length != 0){ 
            //    this.notice_way_button = false;
            // }else{
            //     this.notice_way_button = true;
            // }
            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.error("没选中账户金额");                            
                return;
            }
            if(parseInt(this.principalAmt) > parseInt(this.totleMoney)){ //还款金额大于被选中账户金额则跳出本次判断   
                this.$message.error("还款金额大于被选中账户金额");
                return;   
            } 

            this.loading = true;              
            let bankListoperation= {
                data: {
                    loanNo: this.detailData.loanNo, //编号
                    principalAmt: this.principalAmt,//还款本金
                    repaymentAllAmt: this.detailData.repaymentAllAmt,//还款总金额
                    accountNo: this.detailData.accountNo,                        
                    proceduresAmt: this.detailData.proceduresAmt,//手续费
                    plannedInterest: this.detailData.plannedInterest,//利息
                    plannedInstFee: this.detailData.plannedInstFee,//费用
                }
            };
            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){
                        console.log(222);
                        if(res.data.length == 0){                         
                            this.noticelistplay = true;
                            return;
                        }                   
                        this.operationListData = res.data; 
                        this.noticelistplay = true;  
                        
                    }else{
                        this.$message.error(res.msg);
                        return;
                    }     
                });
            }

            if(this.currency == 2){
               //银行账户
               this.noticetextplay = true;

            }
            this.loading = false; 
            
        },        
        refundSelectInput() { 
       
        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;
     

            let bankListData = {
                data: {
                    loanNo: this.loanNo,
                    principalAmt: this.principalAmt,
                }
            };            
            api_trial(bankListData).then(res => { //还款试算 
                console.log(bankListData);                  
                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;
                this.number =  res.data.repaymentAllAmt;
                
                
                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(); 
    },
}
</script>

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




.kyc-box {
    background: #f7f7f7;
}
.main {
    min-height: calc(100vh - 224px);
    section {        
        width: 1080px;
        margin:50px 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: 33.33%;
                    height: 100%;
                    &:first-of-type::after {
                        content: "";
                        display: block;
                        position: absolute;
                        left: 50%;
                        bottom: 0;
                        width: 110px;
                        height: 1px;
                        margin-left: -361px;
                        background: #3d86e9;
                        margin-bottom: -1px;
                    }
                    img{
                        width:40px;
                        height:40px;
                    }
                }
            }
            p {
                margin-top: 20px;
                font-size:14px;
                span {
                    float: left;
                    width: 33.33%;
                }
            }
        }
        .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>