<template>
    <!-- <TopNavigation/> -->
    <div class="content">
        <div class="content_title">我的银行卡</div>
        <div class="content_tip">成功绑定后不能修改</div>
        <van-form @submit="onSubmit" class="form">
            <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="next_step">
                <van-button type="primary" :disabled="!canNext" round block native-type="submit">下一步</van-button>
            </div>
        </van-form>
        <van-popup class="popup-content" v-model:show="show" teleport="body" position="bottom">
            <div class="popup">
                <div class="cancel" @click="show = false">取消</div>
                <div class="title">输入验证码</div>
                <div class="phone">已发送到您{{ phoneText }}手机</div>
                <van-password-input :value="form.code" :length="4" />
                <!-- 数字键盘 -->
                <van-number-keyboard
                    maxlength="4"
                    theme="custom"
                    v-model="form.code"
                    :show="show"
                    close-button-text="完成"
                    @close="bind"
                />
            </div>
        </van-popup>
        <!-- <div class="prompt_information">银行卡号</div>
        <input type="text" v-model="bankCard" placeholder="点击输入*某某 银行卡号" class="input_information"/>
        <div class="prompt_information">银行预留手机号</div>
        <input type="text" v-model="phoneNumber" placeholder="请输入银行预留手机号" class="input_information"/> -->
    </div>
    <!-- <page-bar>
            添加银行卡
            <template #sub>成功绑定银行卡后</template>
            <template #sub-prim>不能修改</template>
        </page-bar>
        <van-form @submit="onSubmit" class="form">
            <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> -->
</template>

<script>
import phone from '../../mixins/phone';
import { mapState } from 'vuex';
import { Dialog } from 'vant';
// import TopNavigation from "../../components/TopNavigation.vue"
export default {
    mixins: [phone],
    components: {
        // TopNavigation
    },
    data() {
        return {
            form: {},
            show: false
        };
    },
    computed: {
        ...mapState(['userInfo']),
        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 '';
        }
    },
    methods: {
        onSubmit() {
            this.sendMsg(this.form.phone);
            this.form.code = '';
            this.show = true;
        },
        bind() {
            if (!this.form.code || this.form.code.length < 4) {
                this.$toast('请输入验证码');
            } else {
                if (this.userInfo.authStatus === 'PENDING' || this.userInfo.authStatus === 'FAIL') {
                    Dialog.confirm({
                        title: '认证信息',
                        message: '用户认证中,是否查看认证'
                    }).then(() => {
                        this.$router.push('/waiting');
                    });
                } else if (this.userInfo.authStatus === 'NOT_AUTH') {
                    Dialog.confirm({
                        title: '认证信息',
                        message: '用户未认证,是否立即认证'
                    }).then(() => {
                        this.$router.push('/verified');
                    });
                } else {
                    this.$toast.loading({
                        message: '加载中...',
                        forbidClick: true
                    });
                    let bankNo = this.form.bankNo.replace(/ /g, '');
                    this.$http
                        .post(`/user/addBankCard?bankNo=${bankNo}&phone=${this.form.phone}&code=${this.form.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>
.content {
    width: 100%;
    height: 100%;
    position: absolute;
    // margin-top: 44px;
    background: #0f0f27;
    padding: 16px 16px 16px 16px;
    box-sizing: border-box;
    .content_title {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 6px;
    }
    .content_tip {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffca5e;
    }
    .prompt_information {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #939599;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .input_information {
        width: 100%;
        height: 44px;
        background: #29293f;
        border-radius: 8px;
        padding-left: 10px;
        box-sizing: border-box;
        border: 0;
        line-height: 44px;
    }
}
.next_step {
    width: 100%;
    height: 56px;
    background: #15152d;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: calc(@bottom+ constant(safe-area-inset-bottom));
    padding-bottom: calc(@bottom + env(safe-area-inset-bottom));
    padding: 8px 16px;
    box-sizing: border-box;
    .next_step_con {
        width: 100%;
        height: 40px;
        background: #28b6ff;
        border-radius: 8px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }
}
/deep/ .van-cell:after {
    border-bottom: none;
}
/deep/.form {
    .van-cell {
        padding: 0px;
        box-sizing: border-box;
        margin-top: 20px;
        .flex-col();
        .van-field__label {
            width: auto;
        }
        .van-field__body {
            line-height: 48px;
            border-radius: 8px;
            // border: 1px solid #939599;
            padding: 0 16px;
            margin-top: 6px;
            background: #29293f;
            .van-field__control {
                font-size: @font1;
                color: @gray3;
            }
        }

        .van-field__error-message {
            margin-top: 6px;
        }
    }
}
/deep/ .van-password-input__security li {
    width: 52px;
    height: 42px;
    border: 1px solid #c8c9cc;
}
/deep/ .van-password-input__security li:nth-of-type(2n) {
    border-left: none;
}
/deep/ .van-button {
    background: #28b6ff;
    border-radius: 8px;
}
.sub {
    margin: 60px 48px;
}
@bottom: 6px;
@gray3: #f2f4f5;
.popup {
    color: #000;
    position: relative;
    padding-bottom: calc(@bottom+ constant(safe-area-inset-bottom));
    padding-bottom: calc(@bottom + env(safe-area-inset-bottom));
    padding-bottom: 280px;
    .title {
        text-align: center;
        font-size: @font3;
        padding: 20px 0;
    }

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

    .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: linear-gradient(135deg, @prim 0%, @warn 100%);
        color: @btnText;
    }
}
</style>
