<template>
    <!-- <TopNavigation/> -->
    <div class="content">
        <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="请输入银行预留手机号"
                :maxlength="11"
                clearable
                v-model="form.phone"
                :rules="[
                    { required: true, message: '' },
                    {
                        pattern: phonePattern,
                        message: ''
                    }
                ]"
            />
            <!-- <div class="tips">
                <van-checkbox v-model="checked">
                    <span class="xieyi_con">同意</span>
                    <span @click.stop="$router.push('/agreement?page=service')">《拉索宇宙支付用户协议》</span>
                    <template #icon="props">
                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                    </template>
                </van-checkbox>
            </div> -->
            <div class="next_step">
                <van-button type="primary" :disabled="!canNext" 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>
    <!-- 协议弹出框 -->
    <van-overlay :show="protocol" @click="protocol = false">
        <div class="wrapper" @click.stop>
            <div class="protocol_tips" v-if="protocol === true">
                <div class="protocol_tips_top">
                    请您已阅读<span class="protocol_tips_top_con" @click.stop="$router.push('/agreement')"
                        >《拉索宇宙支付用户协议》</span
                    >的全部条款，接受后可开始使用我们的服务
                </div>
                <div class="protocol_tips_bottom">
                    <div class="protocol_tips_bottom_one" @click="agreement(false)">不同意</div>
                    <div class="protocol_tips_bottom_two" @click="agreement(true)">同意</div>
                </div>
            </div>
        </div>
    </van-overlay>
    <!-- <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: {
                code: ''
            },
            show: false,
            checked: localStorage.getItem('agreeTerm') === 'true',
            activeIcon: require('@assets/checked.png'),
            inactiveIcon: require('@assets/checked1.png'),
            protocol: 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() {
            // if (!this.checked) {
            //     this.protocol = true;
            //     return;
            // }
            this.sendMsg(this.form.phone);
            this.form.code = '';
            this.show = true;
        },
        agreement(value) {
            if (value) {
                this.checked = true;
            }
            this.protocol = false;
        },
        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: @bg;
    padding: 16px 30px 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;
    }
}
.img-icon{
    margin-top: 4px;
    width: 14px;
    height: 14px;
}
.next_step {
    padding: 30px 16px;
}
/deep/ .van-cell:after {
    border-bottom: none;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 90px 35px 0px;
}
.protocol_tips {
    transform: translateY(-150px);
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    padding: 22px 25px 26px;
    box-sizing: border-box;
    .protocol_tips_top {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 26px;
        text-align: center;
        .protocol_tips_top_con {
            color: #816232;
        }
    }
    .protocol_tips_bottom {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #202020;
        .protocol_tips_bottom_one {
            flex: 1;
            height: 42px;
            border-radius: 4px;
            border: 1px solid #dedede;
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
            margin-right: 15px;
        }
        .protocol_tips_bottom_two {
            flex: 1;
            height: 42px;
            background: #f9ddb3;
            color: #503a1e;
            border-radius: 4px;
            text-align: center;
            line-height: 42px;
        }
    }
}
/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 #97979720;
            padding: 0 16px;
            margin-top: 6px;
            // background: #29293f;
            .van-field__control {
                font-size: @font1;
                color: @gray3;
            }
        }

        .van-field__error-message {
            margin-top: 6px;
            margin-left: 16px;
        }
    }
}
/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-password-input__security i {
    background: #000;
}

.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: #503a1e;
    }
}

.tips {
    padding-top: 12px;
    span {
        color: #5e6168;
        font-size: 12px;
        line-height: 18px;

        &:nth-child(2) {
            color: #fff;
        }
    }
}
</style>