<template>
    <div>
        <div class="notice" v-show="noticelistplay">                         
            <el-table
                ref="multipleTable"
                :data="operationListData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange" >
                <el-table-column
                type="selection"
                label="选择"
                width="55">                                    
                </el-table-column>
                <el-table-column prop="early_due_date"
                label="店铺名称" align="center">
                    <template slot-scope="scope">{{ scope.row.storeName }}</template>
                </el-table-column>
                <el-table-column
                prop="late_due_date"
                label="账户持有人" align="center">
                    <template slot-scope="scope">{{ scope.row.personName }}</template>
                </el-table-column> 
                <el-table-column
                prop="should_be_also"
                label="币种" align="center">
                        <template slot-scope="scope">{{ scope.row.curId }}</template>
                </el-table-column>
                <el-table-column
                prop="principal"
                label="可提现金额" align="center">
                    <template slot-scope="scope">{{ formatNum(scope.row.currentAmt) }}</template>
                </el-table-column>
                <el-table-column
                prop="interest"
                label="约等于人民币" align="center">
                    <template slot-scope="scope">{{ formatNum(scope.row.accountCNYTotalAmt) }}</template>
                </el-table-column>                                 
            </el-table>                            
            <el-table 
                ref="multipleTable"
                :data="bankCard"
                tooltip-effect="dark"          
                row-key="id" style="text-align:center;"
                :header-row-class-name="handlemclass" 
                v-show="noaccountplay"
                > 
                <el-table-column prop="bank_card"
                label="银行名称" align="center">
                </el-table-column>
                <el-table-column
                prop="draw"
                label="划扣手续费（元）" align="center">
                    <template slot="header" slot-scope="scope">
                        <el-popover
                        ref="popover"
                        placement="right"
                        width="201"
                        trigger="hover"
                        popper-class="POPborrowing"
                        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
                prop="money"
                label="还款总额（元）" align="center">
                </el-table-column>                                  
            </el-table>                   
        </div>
        <div class="notice-text" v-show="noticetextplay">
            <p @click="handleCheck()"  class="notice-way">下一页</p>
            <span>*汇兑后划扣金额具体以实时汇率为准</span>
        </div>        
    </div>
</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 {  
    name:'refundDialog',
    data() {
         return {           
           
            detailData: [],
            operationListData:[],
            noaccountplay:'',
            noticelistplay:'', 
            noticetextplay:'',   
            loading:false,
            bankCard:[],
            repaymentAllAmt:0,   //还款总金额
            principalAmt:0,      //还款本金
            proceduresAmt:0,    //手续费
            plannedInterest:0, //利息
            plannedInstFee:0, //费用
        }
    },
    props: {
        dialogFormVisible: Boolean
    },
    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: "",
                        withdrawAmt: 0
                    };
                    totlecurrentAmt += parseFloat(element.withdrawAmt);
                    keys.storeId = element.kycStoreId;
                    keys.storeName = element.storeName;
                    keys.withdrawAmt = element.withdrawAmt;
                    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: "",
                    withdrawAmt: 0
                };
                totlecurrentAmt += parseFloat(element.withdrawAmt);
                keys.storeId = element.kycStoreId;
                keys.storeName = element.storeName;
                keys.withdrawAmt = element.withdrawAmt;
                withdrawStoreList.push(keys);
            }

            this.totleMoney = totlecurrentAmt;

            this.$store.commit("setWithdrawStoreList", withdrawStoreList);
            this.$store.commit("setTotleMoney", this.totleMoney);
        },
        handleCheck() { 
            this.loading = true; 
            let bankListoperation= {
                data: {
                    loanNo: this.detailData.loanNo,
                    principalAmt: this.detailData.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 => { //
                this.loading = true;
                if (res.success) {
                    this.$router.push({
                        path: "/loan/refundSubmit",
                        
                    });
                } else {
                    this.$message.error(res.msg);
                } 
                this.loading = false;                   
            }); 
             
        },       
              
    },
  
}
</script>
<style lang="less" scoped>
  /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;
                
            }
            span{
                padding:2px 0;
            } 
            
        }
        .el-button{
            border: none;
            background:#F4F4F7;
            padding:0;
            img{
                margin: -8px 0;
            }
        }
        
    }
                    
    .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;
    } 

    .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;
            }
        }
    
    }  

    
}
.notice-text{
    width:100%;
    margin:0 auto;
    .notice-way{
        width:330px;
        height:46px;
        margin:19px auto;
        line-height:46px;
        background: #3d86e9;
        color:#fff;
        font-size:18px;
        font-weight: 200px;
        display:block;                
        text-align: center;
    }
    span{
            display:block; 
            color:#CC6666;
            margin:19px auto;
            font-size:12px;
        text-align: center;
    }
}
</style>