<template>
    <div class="page">
        <page-bar>
            添加银行卡
            <template #sub>成功绑定银行卡后</template>
            <template #sub-prim>不能修改</template>
        </page-bar>
        <van-form @submit="onSubmit" class="form">
            <van-field class="name" type="digit" name="持卡人" label="持卡人" :maxlength="23" v-model="name" disabled />
            <van-field
                type="digit"
                name="卡号"
                label="卡号"
                :maxlength="23"
                placeholder="点击输入银行卡号"
                :formatter="bankFormatter"
                v-model="form.bankNo"
                clearable
                :rules="[{ required: true, message: '请填写银行卡号' }]"
            />
            <van-field
                type="tel"
                name="银行预留手机号"
                label="银行预留手机号"
                placeholder="请输入银行预留手机号"
                v-model="form.phone"
                :rules="[
                    { required: true, message: '请填写银行预留手机号' },
                    {
                        pattern: phonePattern,
                        message: '手机号码格式错误'
                    }
                ]"
            />
            <div class="sub">
                <van-button type="primary" :disabled="!canNext" round block native-type="submit">下一步</van-button>
            </div>
        </van-form>

        <phone-code ref="code" @onSubmit="onSubmit" @bind="bind"></phone-code>
    </div>
</template>

<script>
import phoneCode from '../../components/phoneCode.vue';
import phone from '../../mixins/phone';
export default {
    components: { phoneCode },
    mixins: [phone],
    data() {
        return {
            form: {},
            show: false,
            identityAuthInfo: {},
            bindCardId: 0
        };
    },
    computed: {
        name() {
            let name = '';
            if (this.identityAuthInfo.realName) {
                for (let i = 0; i < this.identityAuthInfo.realName.length - 1; i++) {
                    name += '*';
                }
            }

            name += (this.identityAuthInfo.realName || '').slice(-1);
            return name;
        },
        canNext() {
            return this.form.bankNo && this.form.phone;
        },
        phoneText() {
            let phone = this.form.phone || '';
            if (phone.length === 11) {
                return phone.substr(0, 3) + '****' + phone.substr(-4, 4);
            }

            return '';
        }
    },
    mounted() {
        this.$http.post('/identityAuth/my').then(res => {
            this.identityAuthInfo = res;
        });
    },
    methods: {
        onSubmit(e) {
            if (!this.checkWebDriver(e)) {
                return;
            }
            this.sendMsg(this.form.phone);
            this.$refs.code.init();
            // .then(res => {
            //     this.$refs.code.init();
            // })
            // .catch(e => {
            //     if (e.error.indexOf('渠道系统异常') !== -1) {
            //         this.$toast('暂不支持该银行');
            //     } else {
            //         this.$toast(e.error);
            //     }
            // });
            // let bankNo = this.form.bankNo.replace(/ /g, '');
            // this.$http
            //     .post('/userBankCard/bindCard?phone=' + this.form.phone + '&bankNo=' + bankNo)
            //     .then(res => {
            //         this.bindCardId = res.bindCardId;
            //         this.$toast.success('发送成功');
            //         this.$refs.code.init();
            //         // return this.$http.post('/userBankCard/bindCardCaptcha?bindCardId=' + res.bindCardId);
            //     })
            //     .catch(e => {
            //         if (e.error.indexOf('渠道系统异常') !== -1) {
            //             this.$toast('暂不支持该银行');
            //         } else {
            //             this.$toast(e.error);
            //         }
            //     });
        },
        bind(code) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            let bankNo = this.form.bankNo.replace(/ /g, '');
            this.$http
                .post('/user/addBankCard', {
                    bankNo: bankNo,
                    phone: this.phone,
                    code: code
                })
                .then(res => {
                    this.$toast.success('添加成功');
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                });
            // this.$http
            //     .post(`/userBankCard/bindCardCaptcha?bindCardId=${this.bindCardId}&code=${code}`)
            //     .then(res => {
            //         this.$toast.success('添加成功');
            //         setTimeout(() => {
            //             this.$router.go(-1);
            //         }, 1000);
            //     })
            //     .catch(e => {
            //         if (e) {
            //             this.$toast(e.error);
            //         }
            //     });
        },
        bankFormatter(val) {
            let _val = val.replace(/ /g, '');
            _val = _val.split('');
            let vals = [];
            _val.forEach((item, index) => {
                vals.push(item);
                if ((index - 2) % 4 === 0 && index !== _val.length - 1) {
                    vals.push(' ');
                }
            });
            return vals.join('');
        }
    }
};
</script>

<style lang="less" scoped>
/deep/.form {
    .van-cell {
        .flex-col();

        .van-field__label {
            width: auto;
        }

        .van-field__body {
            line-height: 48px;
            border-radius: 8px;
            border: 1px solid @text3;
            padding: 0 16px;
            margin-top: 6px;

            .van-field__control {
                font-size: @font1;
            }
        }

        .van-field__error-message {
            margin-top: 6px;
        }
    }
}
.sub {
    margin: 60px 48px;
}
@bottom: 280px;
@gray3: #c8c9cc;
@text3: #939599;
.popup {
    color: #000;
    position: relative;
    padding-bottom: calc(@bottom+ constant(safe-area-inset-bottom));
    padding-bottom: calc(@bottom + env(safe-area-inset-bottom));
    .title {
        text-align: center;
        font-size: @font3;
        padding: 20px 0;
        border-bottom: 1px solid #c8c9cc;
    }

    .cancel {
        position: absolute;
        font-size: @font1;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: @text3;
        line-height: 22px;
        padding: 21px 20px;
        left: 0;
        top: 0;
    }

    .send {
        position: absolute;
        font-size: @font1;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: @text3;
        line-height: 22px;
        padding: 21px 20px;
        right: 0;
        top: 0;
        text-decoration: underline;
    }

    .phone {
        padding: 12px 0 20px;
        text-align: center;
        font-size: 12px;
        color: #aaabad;
        line-height: 24px;
    }

    /deep/.van-password-input {
        margin: 0 80px;
    }

    /deep/.van-key {
        // &:hover {
        //     background-color: @gray3;
        // }
        // &:focus {
        //     background-color: @gray3;
        // }
        // &:active {
        //     background-color: @gray3;
        // }
        // &:link {
        //     background-color: @gray3;
        // }
        // &:visited {
        //     background-color: @gray3;
        // }

        // &.van-key--active {
        //     background-color: @gray3;
        // }
    }

    /deep/[class*='van-hairline']::after {
        border-color: @gray3;
    }

    /deep/.van-key--blue {
        // background: var(--prim);
        color: @btnText;
    }
}

/deep/.name {
    .van-field__body {
        border-top-width: 0 !important;
        border-left-width: 0 !important;
        border-right-width: 0 !important;
        border-color: #f5f7fa !important;
        border-radius: 0 !important;
        padding: 0 0 !important;
    }
    .van-field__control:disabled {
        font-size: 16px !important;
        color: #000;
        -webkit-text-fill-color: #000;
    }
}
</style>
