<template>
    <main>
    <!-- 借款流程 -->
    <section class="container">
        <div class="body">
            <div class="top-apply">
                <div class="apply-left"></div>
                <div class="apply-text">借款申请</div>
            </div>
            <section class="procedure">
                <section class="big"> 
                    <div class="top-state">
                        <div class="state-topbig">
                            <div class="state-top">
                                <div class="state-icon">
                                    <img src="~assets/images/icon-input.png" alt />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-examine2.png"
                                        alt
                                    />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-sign2.png"
                                        alt
                                    />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-Loan2.png"
                                        alt
                                    />
                                </div>
                                <div class="state-icon">
                                    <img
                                        src="~assets/images/icon-complete2.png"
                                        alt
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="state-bottom">
                            <div class="content">
                                <div
                                    class="biankuang"
                                ></div>
                                <div class="state-text">输入意向借款金额</div>
                            </div>
                            <div class="content">
                                <div class="state-text">等待审核</div>
                            </div>
                            <div class="content">
                                <div class="state-text">签署支用合同</div>
                            </div>
                            <div class="content">
                                <div class="state-text">等待放款</div>
                            </div>
                            <div class="content">
                                <div class="state-text">借款审批完成</div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 输入借款意向金额 -->
                <section class="moble">
                    <el-form :model="loaninputForm" :rules="loaninputRule" ref="loaninputForm" class="form-loaninputForm">
                    <div class="moble-content">
                        <!-- 借款金额 -->
                        <el-form-item prop="money">
                            <div class="amount">借款金额：
                                <el-input v-model="loaninputForm.money" placeholder="请输入内容" maxlength="7" :oninput="loaninputForm.money=loaninputForm.money.replace(/[^\d]/gi,'')" type="text">
                                    <span slot="suffix">元</span>
                                </el-input>
                            </div>
                        </el-form-item>
                        <!-- 最晚还款期 -->
                        <div class="endtime">
                            最晚还款期限：
                            <span>
                                {{data}}天
                                <p>*实际以合同为准</p>
                            </span>
                        </div>
                        <!-- 还款方式框架 -->
                        <div class="payment-method">
                            还款方式：
                            <p>自动还款</p>
                            <el-popover effect="dark" ref="popover" popper-class="tool-tip-white" width="126px" content="应还本金及利息费" trigger="hover" placement="right">
                            </el-popover>
                            <el-link v-popover:popover :underline="false">
                                <img src="~assets/images/icon-notice.png" alt />
                            </el-link>
                        </div>
                        <!-- 收款选择 -->
                        <div class="collect">
                            收款账户:
                            <div class="collectmenu">
                                <el-select
                                    v-model="loaninputForm.coloctbank"
                                    placeholder="请选择收款银行"
                                    @change="selectbank">
                                    <el-option
                                    v-for="item in queryList"
                                    :key="item.bankName"
                                    :label="item.title"
                                    :value="item.bankName"
                                    ></el-option>
                                </el-select>
                            </div>
                        </div>
                        <!-- 银行卡 -->
                        <div class="card-big" v-if="play ==true">
                            <div class="card-top">
                                <div class="card-icon">
                                    <img :src="bankCode" alt />
                                </div>
                                <div class="card-text">
                                    <div class="card-left">{{coloctbankname}}</div>
                                    <div class="card-cent"></div>
                                    <div class="card-right">
                                        尾号：
                                        <span>{{coloctaccountaccountNo.replace(/.*(.{4})$/,"$1")}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-bottom">{{username}}</div>
                        </div>
                        <!-- 提示信息 -->
                        <div class="rule">
                            <div class="rule-left">还款账户：</div>
                            <div class="rule-right">
                                <div class="icon">
                                    <img src="~assets/images/icon-notice.png" alt />
                                </div>
                                <div class="rule-lei">
                                    <div class="rule-text">
                                        <p>根据各个店铺入账的先后顺序进行划扣，一旦店铺对应的跨越收款账户入账，即划扣当前应还金额。</p>
                                        <p>如逾期后当前店铺入账金额未能偿还全部应还本息费的，从下一店铺的入账金额中继续扣除，甚至完成继续扣除，直至完成全部扣款。</p>
                                        <p>也支持从其他银行卡划扣。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 按钮 -->
                    <div class="menu" v-loading="loading" @click="next">下一步</div>
                    </el-form>
                </section>
            </section>
        </div>
    <!-- 弹窗 -->
    <add-loan-bankcard
        :dialogFormVisibleLoan="dialogFormVisibleLoan"
        @close="closeDialog"
        @success="addSuccess"
    ></add-loan-bankcard>
    </section>
</main>

</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_loan_application,api_loan_query,api_loan_add,api_loan_getKeyNatural } from "api/loan.js";
import { api_code } from "api/login.js";
import addLoanBankcard from "../center/components/addLoanBankcard";
import utils from "utils/utils.js";
let host = process.env.NODE_ENV == "development" ? "/api" : "";
export default {
    data() {
        // 金额校验
        var checkMoney = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入意向金额"));
            } else if (!utils.regNum(value)) {
                callback(new Error("只能输入数字"));
            } else {
                callback();
            }
        };
        // 电话号码校验
        var checkPhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入预留手机号"));
            } else if (!utils.isvalidPhone(value)) {
                callback(new Error("手机号格式错误"));
            } else {
                callback();
            }
        };
        // 银行卡校验
        var checkbanknumber = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请准确输入银行账号"));
            } else if (!utils.regNum(value)) {
                callback(new Error("请准确输入银行账号"));
            } else {
                callback();
            }
        };
        // 验证码校验
        var checkbankverificationbutto = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入验证码"));
            } else if (!utils.regNum(value)) {
                callback(new Error("请正确输入验证码"));
            } else {
                callback();
            }
        };
        return {
            // 弹窗显示
            dialogFormVisibleLoan:false,
            //最晚还款期限
            data:60,
            // 定义借款人信息对象
            lendmoney:[],
            dialogFormVisible:false,
            // 加载
            loading:false,
            // 银行卡数组列表
            bankList:[],
            // 银行列表
            queryList:[],
            bankcardFormat: false,
            // 定义表单对象
            loaninputForm:{
                repayType:'7',
                money:'',
                loanDay:60,
                coloctbank:'',
                phone:'',
                banknumber:'',
                input3: "",
            },
            // 定义银行卡的显示
            play:false,
            loaninputRule:{
                // 借款金额校验
                money:[
                    { validator:checkMoney, trigger: 'blur' },
                ],
                // 手机号校验
                phone:[
                    { validator:checkPhone, trigger: 'blur' },
                ],
                // 银行卡校验
                banknumber:[
                    { validator:checkbanknumber, trigger: 'blur' },
                ],
                // 验证码校验
                verificationbutto:[
                    { validator:checkbankverificationbutto, trigger: 'blur' },
                ]
            },
            //定义标识数组
            sendinfomation:'',
            bankcard:{}
        }
    },
    name: "borrowMoneyprocess",

    methods: {
        // 发送验证码
        send(){
            let codeData = {
                data: {
                    phoneNo: this.loaninputForm.phone
                }
            };
            api_code(codeData).then(res => {
                if (res.success) {
                    this.sendinfomation = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        closeDialog() {
            this.dialogFormVisibleLoan = false;
        },
        addSuccess() {
            this.dialogFormVisibleLoan = false;
            this.bankrefresh();
        },
        // 下一步即提交表单
        next() {
            // 开始加载
            this.loading=true;
            // 请求提交表单的接口
            let applicationdata = {
            data: {
                //贷款申请编号
                loanNo:'',
                //KYC注册ID
                kycNaturalId:this.bankcard.kycNaturalId,
                //借款天数
                loanDays:this.loaninputForm.loanDay,
                //还款方式
                repayType:this.loaninputForm.repayType,
                //意向贷款金额
                applyAmt:this.loaninputForm.money,
                //申请贷款时间
                applyDate:'',
                //产品编号
                productNo:'',
                //银行账户名称
                acctName:this.bankcard.accountName,
                //银行账户号 
                acctNo:this.bankcard.accountNo,
                //身份证号                  
                certNo:this.bankcard.idNo,
                //银行预留手机号
                mobileNo:this.bankcard.phone,
                //银行名称
                bankName:this.bankcard.bankName,
                //银行代码
                bankCode:this.bankcard.bankCode,
                //支行名称
                bankBranchName:'',
                //支行省
                bankBranchPrivince:'',
                //支行市
                bankBranchCity:'',
                }
            };
            api_loan_application(applicationdata).then(res=> {
                if(res.success){
                    // 加载停止
                    this.loading=false;
                    // 跳转到审核页面
                    this.$router.push({path:'/loan/borrowMoneyapplyaudit'});
                }else{
                    this.loading=false;
                    this.$message.error(res.msg);
                }
            });
        },
        // 显示银行卡号
        showBankcardFormat() {
            this.bankcardFormat = !this.bankcardFormat;
        },
                // 选择其他添加新的银行
        selectbank(bank) {
            this.queryList.filter(item => {
                if (item.bankName === bank) {
                    if(item.bankName ==="添加银行卡"){
                        console.log(item);
                        this.dialogFormVisibleLoan = true;
                        this.play = false;
                    }else{
                        // 弹出框收给出银行卡显示需要的数据、并且弹出银行卡
                        this.dialogFormVisibleLoan = false;
                        // 银行卡数据
                        this.coloctbankname =item.bankName;
                        this.coloctaccountaccountNo =item.accountNo;
                        this.username =item.accountName
                        this.bankCode = require("assets/images/bankcard/" + item.bankCode + ".png");
                        this.bankcard =item;
                        // 弹出银行卡
                        this.play = true;
                    }
                }
            });
            console.log(bank);
                // 选择添加银行，弹出弹框
            
        },
        bankrefresh(){
            let queryParams = {
                params: {}
            };
            api_loan_query(queryParams).then(res => {
                if (res.success) {
                    this.queryList = [
                        {
                            bankName:'添加银行卡',
                            bankCode:'1',
                            accountNo:""
                        }
                    ];
                    this.queryList.push.apply(
                        this.queryList,
                        res.data
                    );

                    //数据做处理，增加title属性。
                    for (let i = 0; i < this.queryList.length; i++) {
                    //判断卡号是否为空
                        if(this.queryList[i]["accountNo"]){
                            this.queryList[i]["title"] = this.queryList[i]["bankName"] + '(尾号:'+ this.queryList[i]["accountNo"].replace(/.*(.{4})$/,"$1") +')';
                        }else{
                            this.queryList[i]["title"] = this.queryList[i]["bankName"];
                        }
                    }
                    console.log(this.queryList);
                } else {
                    this.$message.error(res.msg);
                }
            })
        }
    },
    created() {
                // 覆盖该页面的样式
        document.getElementsByTagName("html")[0].style.background = "#f7f7f7";
                // 选择收款银行卡请求接口
        this.bankrefresh();
        let queryParams = {
            params: {}
        };
        api_loan_query(queryParams).then(res => {
            if (res.success) {
                this.queryList = [
                    {
                        bankName:'添加银行卡',
                        bankCode:'1',
                        accountNo:""
                    }
                ];
                this.queryList.push.apply(
                    this.queryList,
                    res.data
                );

                //数据做处理，增加title属性。
                for (let i = 0; i < this.queryList.length; i++) {
                //判断卡号是否为空
                    if(this.queryList[i]["accountNo"]){
                        this.queryList[i]["title"] = this.queryList[i]["bankName"] + '(尾号:'+ this.queryList[i]["accountNo"].replace(/.*(.{4})$/,"$1") +')';
                    }else{
                        this.queryList[i]["title"] = this.queryList[i]["bankName"];
                    }
                }
                console.log(this.queryList);
            } else {
                this.$message.error(res.msg);
            }
        });
                // 获取借款人信息
        let getKeyNaturalparams = {
            params: {

            }
        };
        api_loan_getKeyNatural(getKeyNaturalparams).then(res => {
            this.lendmoney =res.data;
            console.log(this.lendmoney);
        });
        // this.writestates 
    },
    components: {
        addLoanBankcard:addLoanBankcard,
    }
};
</script>

<style lang="less" scoped>
main {
    display: block;
    margin: 40px 0 49px 0;
    .container {
        width: 100%;
        padding: 30px 0 0 0;
        .body {
            width: 1080px;
            height: auto;
            margin: 0 auto 0;
            background: #ffffff;
            padding-bottom: 55px;
            .top-apply {
                width: 100%;
                .apply-left {
                    width: 4px;
                    height: 20px;
                    float: left;
                    background: #3d86e9;
                    margin-right: 18px;
                    transform: translateY(27.3px);
                }
                .apply-text {
                    margin: 0 0 0 16px;
                    font-size: 18px;
                    font-weight: bold;
                    border-bottom: 1px solid #EAEAEA;
                    width: 1040px;
                    height: 22px;
                    transform: translateY(-0.7px);
                    text-align: left;
                    padding: 28px 0 10px 0;
                }
            }
            .procedure {
                .big {
                    width: 960px;
                    margin: auto;
                    padding-top: 31px;
                    .top-state {
                        width: 960px;
                        margin: 0 auto 45px;
                        text-align: center;
                        .state-topbig {
                            width: 960px;
                            height: auto;
                            border-bottom: 1px solid #E6E6E6;
                            .state-top {
                                width: 840px;
                                margin: auto;
                                padding-bottom: 9px;
                                height: 40px;
                                .state-icon {
                                    width: 163px;
                                    display: inline-block;
                                    text-align: center;
                                    img {
                                        width: 40px;
                                        height: 40px;
                                    }
                                }
                            }
                        }
                        .state-bottom {
                            width: 840px;
                            margin: -1px auto 0;
                            .content {
                                width: 163px;
                                display: inline-block;
                                .biankuang {
                                    width: 110px;
                                    margin: auto;
                                    border-top: 1px solid rgba(61, 134, 233, 1);
                                }
                                .state-text {
                                    text-align: center;
                                    font-size: 14px;
                                    font-weight: 400;
                                    color: rgba(51, 51, 51, 1);
                                    padding-top: 20px;
                                }
                            }
                        }
                    }
                }
                .moble {
                    width: 1040px;
                    margin: auto;
                    text-align: left;
                    .moble-content{width: 960px;padding: 0 40px 0 40px;padding-bottom: 40px;
                    border-bottom: 1px solid #EAEAEA;
                    // 借款金额样式
                        .amount{
                            font-size: 14px;
                            color: #333333;
                            /deep/.el-input {
                                display: inline-block;
                                height: 46px;
                                line-height: 46px;
                                width: 330px;
                                margin: 15px 0 0 59px;
                                background: rgba(247, 247, 247, 0.4);
                                font-size: 14px;
                                span{
                                    color: #333333;
                                    font-size: 18px;
                                    transform: translateX(-3px);
                                    // padding-right: 10px;
                                    float: right;
                                }
                            }
                        }
                        .el-form-item{margin-bottom:15px;}
                        /deep/.el-form-item__error{left:133px;}
                        // 最晚还款期样式
                        .endtime {
                            padding: 15px 0 15px 0;
                            font-size: 14px;
                            color: #333333;
                            span {
                                font-size: 18px;
                                color: #333333;
                                width: 159px;
                                margin: 31px;
                                p {
                                    font-size: 14px;
                                    color: #999999;
                                    display: inline-block;
                                    margin-left: 17px;
                                }
                            }
                        }
                        // 还款方式样式
                        .payment-method {
                            margin: 13px 0 13px 0;
                            font-size: 14px;
                            color: rgba(51, 51, 51, 1);
                            p {
                                font-size: 18px;
                                margin-left: 58px;
                                display: inline-block;
                            }
                            .el-link{width: auto;height: auto;padding:0;border:none;width: 24px;height: 24px;
                                // transform: translateY(3.7px);
                                display: inline-block;
                                margin: 0 0 0 10px;
                                border-radius: 50%;
                                // img {
                                //     width: 20px;
                                //     height: 20px;
                                // }
                            }
                            .payment-tex {
                                display: none;
                            }
                        }
                        // 收款选择样式
                        .collect {
                            font-size: 14px;
                            padding: 15px 0 15px 0;
                            color: rgba(51, 51, 51, 1);
                            .collectmenu{
                                width: 330px;
                                height: 46px;
                                margin-left: 69px;
                                display: inline-block;
                                .el-select {
                                    color: rgba(65, 136, 233, 1);
                                    font-size: 14px;
                                    width: 330px;
                                    height: 46px;
                                }
                            }
                        }
                        // 银行卡样式
                        .card-big {
                            width: 450px;
                            border: 1px solid rgba(234, 234, 234, 1);
                            border-radius: 4px;
                            height: 90px;
                            border: 1px solid #eaeaea;
                            margin: 15px 0 15px 132px;
                            display:inline-block;
                            .card-top {
                                width: 100%;
                                margin: 0 20px 0 0;
                                height: 43px;
                                line-height: 43px;
                                background: #F6F6F6;
                                border-radius: 4px 4px 0 0;
                                .card-icon {
                                    width: 28px;
                                    height: 27px;
                                    border-radius: 50%;
                                    margin-left: 20px;
                                    padding: 8px 0 8px 0;
                                    float: left;
                                    img {
                                        width: 28px;
                                        height: 27px;
                                    }
                                }
                                .card-text {
                                    text-align: left;
                                    float: left;
                                    overflow: hidden;
                                    .card-left {
                                        font-size: 14px;
                                        color: rgba(51, 51, 51, 1);
                                        float: left;
                                        padding: 0 10px 0 0;
                                        margin-left: 13px;
                                    }
                                    .card-cent {
                                        width: 1px;
                                        height: 16px;
                                        background: #cccccc;
                                        float: left;
                                        transform: translateY(12px);
                                    }
                                    .card-right {
                                        font-size: 14px;
                                        color: rgba(51, 51, 51, 1);
                                        float: left;
                                        padding: 0 16px 0 16px;
                                    }
                                }
                            }
                            .card-bottom {
                                height: 47px;
                                line-height: 47px;
                                width: 387px;
                                padding-left: 63px;
                                font-size: 14px;
                                color: rgba(153, 153, 153, 1);
                            }
                        }
                        // 提示信息样式
                        .rule{overflow: hidden;margin-top: 15px;
                            .rule-left{font-size:14px;float: left;margin-top: 20px;}
                            .rule-right {
                                float: left;
                                width: 796px;
                                background: #FEF6EA;
                                border-radius: 6px;
                                overflow: hidden;
                                margin-left: 60px;
                                .icon {
                                    float: left;
                                    width: 20px;
                                    height: 20px;
                                    margin-left: 11px;
                                    margin-top: 17px;
                                    transform: translateY(2px);
                                }
                                .rule-lei {
                                    float: left;
                                    padding: 20px;
                                    .title {
                                        font-size: 18px;
                                        padding-bottom: 10px;
                                    }
                                    .rule-text {
                                        p {
                                            color: #666666;
                                            padding: 0 0 5px 0;
                                            font-size:12px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    
                    .el-input{margin-top: 26px;}
                    /deep/.el-form-item{margin-bottom: 0;}
                    .bankcard-format {
                        position: absolute;
                        left: 0;
                        top: -7px;
                        width: 330px;
                        height: 40px;
                        transform: translateX(7px);
                        line-height: 40px;
                        font-size: 20px;
                        border-radius: 4px;
                        box-sizing: border-box;
                        // background: #fff8e8;
                        color: #333;
                    }
                    .yyang{width: 331px;height: 46px;display: block;}
                    .verificat{width: 221px;height: 46px;}
                    .verificationbutton{display: inline-block;width: 100px;height: 46px;line-height: 46px;background: #3D86E9;border-radius: 4px;margin-left: 20px;text-align: center;font-size:14px;color: #FFFFFF;}
                    .addtobutton{width: 331px;height: 46px;line-height: 46px;background: #3D86E9;border-radius: 4px;text-align: center;color: #FFFFFF;font-size:14px;margin-top: 40px;}
                    .el-input{font-size: 14px;}
                    // 按钮样式
                    .menu {
                        width: 331px;
                        height: 46px;
                        background: rgba(61, 134, 233, 1);
                        border-radius: 4px;
                        text-align: center;
                        line-height: 46px;
                        margin: 70px auto 0;
                        color: rgba(255, 255, 255, 1);
                        cursor: pointer;
                    }
                }
            }
        }
    }
    /deep/.fontWeightNormal {
        font-weight: normal !important;
    }
    /deep/.el-table th > .cell {
        text-align: center;
        font-weight: normal;
        font-size: 14px;
    }
    /deep/.el-table td,
    .el-table th.is-leaf {
        border-bottom: none;
        text-align: center;
    }
    /deep/.el-table .cell {
        text-align: center;
        font-size: 14px;
    }
    /deep/.el-table__body-wrapper {
        background: #ffffff;
    }
    /deep/.el-table__row{height:55px;}
    /deep/.el-popover--plain{padding: 0 0 0 0;}
    /deep/.el-table--border::after, .el-table--group::after, .el-table::before{background-color:#ffffff;}
    /deep/.el-input__inner{height: 46px;}
}
</style>
<style lang="less">
    .tool-tip-white{height: 30px;line-height: 30px;padding: 0 10px 0 10px !important;font-size: 14px;}
</style>