<template>
    <div class="wrap box-shadow" v-loading="loading">
        <div class="first-step" v-if="step === 1">
            <div class="center-title clearfix">
                <h3>银行卡管理</h3>
                <ul class="nav-bankcard clearfix" v-if="kycType !== 'HK_PERSONAL'">
                    <li
                        v-for="(item,index) in bankcardType"
                        :key="item.id"
                        :class="{active:indexs == index}"
                        @click="changeType(index)"
                    >{{ item.value }}</li>
                </ul>
            </div>
            <ul class="card-ul clearfix" v-if="indexs">
                <li class="add-bankcard">
                    <a
                        href="javascript:;"
                        class="add-bankcard-btn"
                        @click="toAddBankcard"
                    >+添加新的贷款接收银行卡</a>
                </li>
                <li class="card-box" v-for="item in bankcardList2" :key="item.id">
                    <div class="card-title">
                        <p class="ellipsis" :title="item.bankName">
                            <img :src="item.bankCode" alt />
                            {{ item.bankName }}
                        </p>
                        <div class="card-info">
                            <span>尾号：</span>
                            {{ item.accountNo }}
                            <template
                                v-if="item.currencyDesc !== null"
                            >
                                <span>支持币种：</span>
                                {{ item.currencyDesc }}
                            </template>
                        </div>
                        <div class="del-btn" @click="delBankcard(item.id)">删除</div>
                    </div>
                    <div class="card-content" :title="item.accountName">
                        <p class="ellipsis">
                            <span>{{ item.accountName }}</span>
                        </p>
                    </div>
                </li>
            </ul>
            <ul class="card-ul clearfix" v-else>
                <li class="add-bankcard">
                    <a
                        href="javascript:;"
                        class="add-bankcard-btn"
                        @click="toAddBankcard"
                    >+添加新的提现银行卡</a>
                </li>
                <li class="card-box" v-for="item in bankcardList" :key="item.id">
                    <div class="card-title">
                        <p class="ellipsis" :title="item.bankName">
                            <img :src="item.bankCode" alt />
                            {{ item.bankName }}
                        </p>
                        <div class="card-info">
                            <span>尾号：</span>
                            {{ item.accountNo }}
                            <template
                                v-if="item.currencyDesc !== null"
                            >
                                <span>支持币种：</span>
                                {{ item.currencyDesc }}
                            </template>
                        </div>
                        <div class="del-btn" @click="delBankcard(item.id)">删除</div>
                    </div>
                    <div class="card-content" :title="item.accountName">
                        <p class="ellipsis">
                            <span>{{ item.accountName }}</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="second-step" v-else-if="step === 2">
            <div class="center-title clearfix">
                <h3>删除提现银行卡</h3>
                <a href="javascript:;" class="back-btn" @click="goBack">返回</a>
            </div>
            <ul class="del-card-ul clearfix">
                <li class="card-box" v-for="item in delBankcardList" :key="item.id">
                    <div class="card-title">
                        <p class="ellipsis" :title="item.bankName">
                            <img :src="item.bankCode" alt />
                            {{ item.bankName }}
                        </p>
                        <div class="card-info">
                            <span>尾号：</span>
                            {{ item.accountNo }}
                            <template
                                v-if="item.currencyDesc !== ''"
                            >
                                <span>支持币种：</span>
                                {{ item.currencyDesc }}
                            </template>
                        </div>
                    </div>
                    <div class="card-content" :title="item.accountName">
                        <p class="ellipsis">
                            <span>{{ item.accountName }}</span>
                        </p>
                    </div>
                </li>
            </ul>
            <div class="del-form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item prop="phoneNum">
                        <el-input
                            type="text"
                            v-model.number="ruleForm.phoneNum"
                            placeholder="请输入手机号"
                            class="phone"
                            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-form-item>
                </el-form>
            </div>
        </div>
        <div class="third-step" v-else>
            <div class="center-title clearfix">
                <h3>删除提现银行卡</h3>
            </div>
            <div class="layout-status">
                <img src="~assets/images/icon-status-delSucc.png" alt />
                <h2>删除提现银行卡成功</h2>
                <p class="notice">您已成功删除了提现银行卡</p>
                <a href="javascript:;" class="layout-btn" @click="goBack">确定</a>
            </div>
        </div>
        <add-bankcard
            :dialogFormVisible="dialogFormVisible"
            @close="closeDialog"
            @success="addSuccess"
        ></add-bankcard>
        <add-bankcard-company
            :dialogFormVisibleCompany="dialogFormVisibleCompany"
            @close="closeDialog"
            @success="addSuccess"
        ></add-bankcard-company>
        <add-bankcard-hk
            :dialogFormVisibleHk="dialogFormVisibleHk"
            @close="closeDialog"
            @success="addSuccess"
        ></add-bankcard-hk>
        <add-bankcard-hk-company
            :dialogFormVisibleHkCompany="dialogFormVisibleHkCompany"
            @close="closeDialog"
            @success="addSuccess"
        ></add-bankcard-hk-company>
        <add-loan-bankcard
            :dialogFormVisibleLoan="dialogFormVisibleLoan"
            @close="closeDialog"
            @success="addSuccess"
        ></add-loan-bankcard>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import BIN from "bankcardinfo";
import { api_bankList, api_disableBankCard } from "api/center.js";
import { api_code } from "api/login.js";
import bank from "utils/bank.js";
import addBankcard from "./components/addBankcard";
import addBankcardCompany from "./components/addBankcardCompany";
import addBankcardHk from "./components/addBankcardHk";
import addBankcardHkCompany from "./components/addBankcardHkCompany";
import addLoanBankcard from "./components/addLoanBankcard";
let timer;
export default {
    name: "bankcard",
    components: {
        addBankcard,
        addBankcardCompany,
        addBankcardHk,
        addBankcardHkCompany,
        addLoanBankcard
    },
    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();
            }
        };
        return {
            ruleForm: {
                phoneNum: "",
                verificationCode: ""
            },
            rules: {
                verificationCode: [{ validator: checkCode, trigger: "blur" }]
            },
            showCountDown: true,
            countDown: 60,
            submitLoading: false,
            markStr: "",
            bankcardList: [],
            bankcardList2: [],
            delBankcardList: [],
            step: 1,
            dialogFormVisible: false,
            dialogFormVisibleCompany: false,
            dialogFormVisibleHk: false,
            dialogFormVisibleHkCompany: false,
            dialogFormVisibleLoan: false,
            sendSmsLoading: false,
            loading: true,
            bankId: "",
            phone: "",
            kycType: "",
            bankcardType: [
                {
                    id: 0,
                    value: "提现银行卡"
                },
                {
                    id: 0,
                    value: "贷款接收银行卡"
                }
            ],
            indexs: 0
        };
    },
    methods: {
        init(type) {
            let bankListParams = {
                params: {
                    bindingType: type
                }
            };
            api_bankList(bankListParams).then(res => {
                if (res.success) {
                    res.data.map(item => {
                        item.accountNo = item.accountNo.substring(
                            item.accountNo.length - 4
                        );
                        if (item.bankCode == "") {
                            item.bankCode = require("assets/images/bankcard/HK.png");
                        } else {
                            item.bankCode = require("assets/images/bankcard/" +
                                item.bankCode +
                                ".png");
                        }
                    });
                    if (type == "BINDING_COLLECTION") {
                        this.bankcardList = res.data;
                    } else {
                        this.bankcardList2 = res.data;
                    }
                } else {
                    this.$message.error(res.msg);
                }
                this.step = 1;
                this.loading = false;
            });
        },
        changeType(index) {
            this.indexs = index;
        },
        toAddBankcard() {
            if (!this.indexs) {
                if (this.kycType === "MAINLAND_PERSONAL") {
                    this.dialogFormVisible = true;
                } else if (this.kycType === "MAINLAND_COMPANY") {
                    this.dialogFormVisibleCompany = true;
                } else if (this.kycType === "HK_PERSONAL") {
                    this.dialogFormVisibleHk = true;
                } else if (this.kycType === "HK_COMPANY") {
                    this.dialogFormVisibleHkCompany = true;
                }
            } else {
                this.dialogFormVisibleLoan = true;
            }
        },
        delBankcard(id) {
            this.bankId = id;
            if (this.indexs) {
                this.delBankcardList = this.bankcardList2.filter(item => {
                    if (item.id === id) {
                        this.phone = item.phone;
                        this.ruleForm.phoneNum =
                            item.phone.substring(0, 3) +
                            "****" +
                            item.phone.substring(7, 11);
                        return item;
                    }
                });
            } else {
                this.delBankcardList = this.bankcardList.filter(item => {
                    if (item.id === id) {
                        this.phone = item.phone;
                        this.ruleForm.phoneNum =
                            item.phone.substring(0, 3) +
                            "****" +
                            item.phone.substring(7, 11);
                        return item;
                    }
                });
            }

            this.step = 2;
        },
        goBack() {
            this.showCountDown = true;
            clearInterval(timer);
            this.countDown = 60;
            this.ruleForm.verificationCode = "";
            this.init("BINDING_COLLECTION");
            this.init("BINDING_LOANS");
        },
        closeDialog() {
            this.dialogFormVisible = false;
            this.dialogFormVisibleCompany = false;
            this.dialogFormVisibleHk = false;
            this.dialogFormVisibleHkCompany = false;
            this.dialogFormVisibleLoan = false;
        },
        addSuccess() {
            this.init("BINDING_COLLECTION");
            this.init("BINDING_LOANS");
            this.dialogFormVisible = false;
            this.dialogFormVisibleCompany = false;
            this.dialogFormVisibleHk = false;
            this.dialogFormVisibleLoan = false;
        },
        sendSms() {
            this.sendSmsLoading = true;
            if (this.showCountDown) {
                let verificationCode = {
                    data: {
                        phoneNo: this.delBankcardList[0].phone
                    }
                };
                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) {
            if (this.markStr === "") {
                this.$message.error("请获取验证码！");
                return false;
            }
            this.submitLoading = true;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let disableBankCardData = {
                        data: {
                            bankId: this.bankId,
                            phone: this.phone,
                            smsCode: this.ruleForm.verificationCode,
                            markStr: this.markStr
                        }
                    };
                    api_disableBankCard(disableBankCardData).then(res => {
                        if (res.success) {
                            this.step = 3;
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.submitLoading = false;
                    });
                } else {
                    this.submitLoading = false;

                    return false;
                }
            });
        }
    },
    created() {
        clearInterval(timer);
        // console.log(bank.bankCardAttribution("6214830157236166"));
        this.kycType = this.userInfo.loginInfo.registerType;
        this.init("BINDING_COLLECTION");
        this.init("BINDING_LOANS");

        BIN.getBankBin("622960867178034618")
            .then(res => {
                // console.log(res);
            })
            .catch(err => {});

        BIN.getBankBin("621267888888888888")
            .then(res => {
                // console.log(res);
                // "CZCB"  浙江稠州商业银行
            })
            .catch(err => {});

        if (this.userInfo.loginInfo.certificationStatus !== "SUCCESS") {
            this.$router.push({
                path: "/account"
            });
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.wrap {
    min-height: calc(100vh - 224px);
    background: #fff;
}
.center-title {
    position: relative;
}
.nav-bankcard {
    position: absolute;
    top: 20px;
    left: 100px;
    li {
        float: left;
        padding: 0 10px 14px;
        margin: 0 10px;
        font-size: 14px;
        cursor: pointer;
        &.active {
            color: #3d86e9;
            border-bottom: 2px solid #3d86e9;
        }
        &:hover {
            color: #3d86e9;
            border-bottom: 2px solid #3d86e9;
        }
    }
}
.del-form {
    width: 330px;
    padding: 20px;
}
.del-form /deep/ .verification-code {
    width: 190px;
}
.del-form /deep/ .verification-code + .el-button--primary {
    width: 120px;
    padding: 12px 0;
    margin-left: 16px;
    vertical-align: middle;
}
.del-form /deep/ .btn-reg {
    .el-button--primary {
        width: 100%;
    }
}
.card-ul {
    padding: 0 20px;
}
.del-card-ul {
    margin: 0 20px;
    padding: 20px 0;
    border-bottom: 1px solid #eaeaea;
    .card-box {
        margin-bottom: 0;
    }
}
.count-down {
    width: 120px;
}
.card-box {
    width: 100%;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
    .card-title {
        position: relative;
        height: 40px;
        line-height: 40px;
        background: #f6f6f6;
        p {
            float: left;
            margin-left: 20px;
            font-size: 14px;
            text-align: left;
            overflow: hidden;
            img {
                float: left;
                margin-top: 6px;
                margin-right: 12px;
            }
        }
        .card-info {
            float: left;
            height: 20px;
            line-height: 20px;
            margin: 10px 0 10px 20px;
            font-size: 12px;
            box-sizing: border-box;
            border-left: 1px solid #ccc;
            color: #333;
            span {
                margin-left: 20px;
                color: #999;
            }
        }
        .del-btn {
            position: absolute;
            top: 0;
            right: 20px;
            height: 100%;
            font-size: 14px;
            color: #cc3333;
            cursor: pointer;
        }
    }
    .card-content {
        h3 {
            line-height: 70px;
        }
        p {
            height: 40px;
            line-height: 40px;
            text-align: left;
            padding-left: 60px;
            color: #999;
            span {
                font-size: 14px;
            }
        }
    }
}
.add-bankcard {
    position: relative;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: left;
    .add-bankcard-btn {
        color: #3d86e9;
    }
}
.back-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding-left: 22px;
    font-size: 14px;
    background: url(~assets/images/icon-center-back.png) left center no-repeat;
    color: #3d86e9;
}
</style>
