<template>
    <div class="add-bankcard">
        <el-dialog
            title="添加新的提现银行卡"
            :visible.sync="dialogFormVisibleHk"
            :before-close="closeDialog"
            :close-on-click-modal="false"
        >
            <div slot="title" class="header-title">
                <h3>
                    添加新的提现银行卡
                    <span class="title-age">*添加的银行卡信息与认证的实名信息保持一致</span>
                </h3>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="bankAreaValue">
                    <el-select
                        v-model="ruleForm.bankAreaValue"
                        placeholder="请选择银行所在地区"
                        @change="selectCertificateType"
                    >
                        <el-option
                            v-for="item in bankAreaList"
                            :key="item.bankAreaType"
                            :label="item.bankAreaDesc"
                            :value="item.bankAreaType"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="currencyValue">
                    <el-select
                        v-model="ruleForm.currencyValue"
                        placeholder="请选择账户币种"
                        @change="selectAcctName"
                    >
                        <el-option
                            v-for="item in currencyList"
                            :key="item.currencyKyc"
                            :label="item.currency"
                            :value="item.currencyKyc"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <template v-if="HKPersonal">
                    <el-form-item prop="publicBank">
                        <el-select
                            v-model="ruleForm.publicBank"
                            placeholder="请选择开户银行"
                            @change="selectPublicBank"
                        >
                            <el-option
                                v-for="item in publicList"
                                :key="item.bankName"
                                :label="item.bankName"
                                :value="item.bankName"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="publicBankName" v-if="othorPublicBank">
                        <el-input
                            type="text"
                            v-model="ruleForm.publicBankName"
                            placeholder="请输入银行名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="publicAcctNameValue">
                        <el-input
                            type="text"
                            v-model="ruleForm.publicAcctNameValue"
                            placeholder="请输入银行开户名称"
                            maxlength="100"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="publicBankcardNum">
                        <p
                            class="bankcard-format"
                            v-show="bankcardFormat"
                        >{{ruleForm.publicBankcardNum.replace(/(\d{4})(?=\d)/g, "$1 ")}}</p>
                        <p class="notice">*请使用对公账户，填写个人银行账号会造成提现失败</p>
                        <el-input
                            type="text"
                            v-model.trim="ruleForm.publicBankcardNum"
                            placeholder="请输入对公银行账号，请确保卡信息真实有效"
                            maxlength="20"
                            @focus="showBankcardFormat"
                            @blur="showBankcardFormat"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="swiftCode">
                        <el-input
                            type="text"
                            v-model.trim="ruleForm.swiftCode"
                            placeholder="请输入SWIFT/BIC编码，请确保卡信息真实有效"
                            maxlength="11"
                            @blur="upperCase(ruleForm.swiftCode)"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="address">
                        <el-input
                            type="text"
                            v-model="ruleForm.address"
                            placeholder="请使用英文输入银行地址"
                            maxlength="50"
                        ></el-input>
                    </el-form-item>
                </template>
                <el-form-item prop="phoneNum">
                    <el-input
                        type="text"
                        v-model.number="ruleForm.phoneNum"
                        placeholder="请输入手机号"
                        maxlength="11"
                        disabled
                    ></el-input>
                </el-form-item>
                <el-form-item prop="verificationCode">
                    <el-input
                        v-model.trim="ruleForm.verificationCode"
                        placeholder="短信验证码"
                        class="verification-code"
                        maxlength="6"
                    ></el-input>
                    <el-button
                        type="primary"
                        :loading="sendSmsLoading"
                        @click="sendSms"
                        v-if="showCountDown"
                    >发送验证码</el-button>
                    <el-button
                        type="primary"
                        :loading="false"
                        class="count-down"
                        disabled
                        v-else
                    >{{countDown}}秒</el-button>
                </el-form-item>
                <el-form-item class="btn-reg">
                    <el-button
                        type="primary"
                        @click="submitForm('ruleForm')"
                        :loading="submitLoading"
                    >确认添加</el-button>
                    <el-button @click="closeDialog">返 回</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_initAddBank, api_addBankCard } from "api/center.js";
import { api_code } from "api/login.js";
import utils from "utils/utils.js";
let timer;
export default {
    name: "addBankcard",
    props: {
        dialogFormVisibleHk: Boolean
    },
    computed: {
        ...mapState(["userInfo"])
    },
    data() {
        var checkCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("验证码不能为空"));
            } else if (value.length < 6) {
                return 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 checkAddress = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入银行地址"));
            } else if (utils.regEngName(value)) {
                callback(new Error("请使用英文输入银行地址"));
            } else {
                callback();
            }
        };
        var checkPublicBankcardNum = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入对公银行账号，请确保卡信息真实有效"));
            } else if (utils.regEngName(value)) {
                callback(new Error("对公银行账号格式不正确"));
            } else {
                callback();
            }
        };
        var checkUpperCase = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入银行SWIFT/BIC编码"));
            } else if (value.length < 8) {
                callback(
                    new Error("你的SWIFT/BIC编码长度有误，应为8或者11个字符")
                );
            } else if (8 < value.length && value.length < 11) {
                callback(
                    new Error("你的SWIFT/BIC编码长度有误，应为8或者11个字符")
                );
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                phoneNum: "",
                verificationCode: "",
                currencyValue: "",
                bankAreaValue: "",
                swiftCode: "",
                publicBank: "",
                publicBankName: "",
                publicAcctNameValue: "",
                publicBankcardNum: "",
                address: ""
            },
            rules: {
                phoneNum: [{ validator: checkPhone, trigger: "blur" }],
                verificationCode: [{ validator: checkCode, trigger: "blur" }],
                currencyValue: [
                    {
                        required: true,
                        message: "请选择账户币种",
                        trigger: "change"
                    }
                ],
                bankAreaValue: [
                    {
                        required: true,
                        message: "请选择银行所在地区",
                        trigger: "change"
                    }
                ],
                swiftCode: [{ validator: checkUpperCase, trigger: "blur" }],
                publicBank: [
                    {
                        required: true,
                        message: "请选择开户银行",
                        trigger: "change"
                    }
                ],
                publicBankName: [
                    {
                        required: true,
                        message: "请输入银行名称",
                        trigger: "blur"
                    }
                ],
                publicAcctNameValue: [
                    {
                        required: true,
                        message: "请输入银行开户名称",
                        trigger: "blur"
                    }
                ],
                publicBankcardNum: [
                    { validator: checkPublicBankcardNum, trigger: "blur" }
                ],
                address: [{ validator: checkAddress, trigger: "blur" }]
            },
            showCountDown: true,
            countDown: 60,
            submitLoading: false,
            markStr: "",
            acctNameList: [],
            currencyList: [],
            bankAreaList: [],
            bankName: "",
            bankCode: "",
            accountName: "",
            sendSmsLoading: false,
            HKPersonal: false,
            initData: {},
            publicList: [
                {
                    bankName: "Citibank N.A.,HongKong Branch"
                },
                {
                    bankName: "HSBC HongKong"
                },
                {
                    bankName: "Hang Seng Bank Limited"
                },
                {
                    bankName: "其他银行"
                }
            ],
            othorPublicBank: false,
            bankcardFormat: false
        };
    },
    methods: {
        closeDialog() {
            this.$refs["ruleForm"].resetFields();
            this.HKPersonal = false;
            this.showCountDown = true;
            clearInterval(timer);
            this.countDown = 60;
            this.$emit("close");
        },
        selectCertificateType(val) {
            this.acctNameList.filter(item => {
                if (item.value == val) {
                    this.accountName = item.label;
                }
            });
            this.currencyList = this.initData.currencyWb;
        },
        selectAcctName(val) {
            this.HKPersonal = true;
        },
        selectPublicBank(val) {
            if (val == "其他银行") {
                this.othorPublicBank = true;
            } else {
                this.othorPublicBank = false;
            }
        },
        upperCase(val) {
            this.ruleForm.swiftCode = val.toUpperCase();
        },
        showBankcardFormat() {
            this.bankcardFormat = !this.bankcardFormat;
        },
        sendSms() {
            this.sendSmsLoading = true;
            if (this.showCountDown) {
                let verificationCode = {
                    data: {
                        phoneNo: this.ruleForm.phoneNum
                    }
                };
                api_code(verificationCode)
                    .then(res => {
                        if (res.success) {
                            this.sendSmsLoading = false;
                            this.showCountDown = false;
                            this.markStr = res.data.markStr;

                            this.$message({
                                message: "验证码发送成功，请注意查收",
                                type: "success"
                            });
                            timer = setInterval(() => {
                                this.countDown--;
                                if (this.countDown < 0) {
                                    this.showCountDown = true;
                                    clearInterval(timer);
                                    this.countDown = 60;
                                }
                            }, 1000);
                        } else {
                            this.sendSmsLoading = false;
                            this.$message.error(res.msg);
                        }
                    })
                    .catch(err => {
                        this.sendSmsLoading = false;
                    });
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                this.submitLoading = true;
                if (valid) {
                    if (this.markStr === "") {
                        this.submitLoading = false;
                        this.$message.error("请获取验证码！");
                        return false;
                    }

                    let addBankCardData = {
                        data: {
                            bindingType: "BINDING_COLLECTION",
                            stateOrRegion: this.ruleForm.bankAreaValue,
                            bankName:
                                this.ruleForm.publicBankName ||
                                this.ruleForm.publicBank,
                            bankCode: this.bankCode,
                            currencyCode: this.ruleForm.currencyValue,
                            accountCode: "SELF",
                            accountName: this.ruleForm.publicAcctNameValue,
                            accountNo: this.ruleForm.publicBankcardNum,
                            phone: this.ruleForm.phoneNum,
                            swiftCode: this.ruleForm.swiftCode,
                            markStr: this.markStr,
                            smsCode: this.ruleForm.verificationCode
                        }
                    };
                    api_addBankCard(addBankCardData).then(res => {
                        if (res.success) {
                            this.$emit("success");
                            this.closeDialog();
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.submitLoading = false;
                    });
                } else {
                    this.submitLoading = false;

                    return false;
                }
            });
        }
    },
    created() {
        clearInterval(timer);
        let initAddBankParams = {
            params: {}
        };
        api_initAddBank(initAddBankParams).then(res => {
            if (res.success) {
                this.initData = res.data;
                this.bankAreaList = res.data.bankArea;
            } else {
                this.$message.error(res.msg);
            }
        });
        this.ruleForm.phoneNum = this.userInfo.loginInfo.phoneNo;
    }
};
</script>

<style lang="less" scoped>
@import "../../../assets/styles/common.css";
.add-bankcard /deep/ .el-input.is-disabled .el-input__inner {
    color: #333;
}
.add-bankcard /deep/ .el-dialog {
    width: 550px;
}
.bankcard-format {
    position: absolute;
    left: 0;
    top: -38px;
    width: 330px;
    height: 40px;
    padding-left: 15px;
    line-height: 40px;
    font-size: 20px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff8e8;
    color: #333;
}
.header-title {
    text-align: left;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    h3 {
        font-size: 18px;
        span {
            font-size: 14px;
            color: #cc3333;
        }
    }
}
.el-form /deep/ .verification-code {
    width: 190px;
}
.el-form /deep/ .verification-code + .el-button--primary {
    width: 120px;
    padding: 12px 0;
    margin-left: 16px;
    vertical-align: middle;
}
.count-down {
    width: 120px;
}
.el-form {
    width: 330px;
    .el-select {
        width: 100%;
    }
}
.btn-reg {
    position: relative;
    & /deep/ .el-button--primary {
        width: 330px;
    }
    & /deep/ .el-button--default {
        position: absolute;
        top: 0;
        right: -180px;
        width: 158px;
        height: 40px;
    }
}
.notice {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    color: #cc3333;
}
</style>
