<template>
    <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>
            <div class="send" @click="onSubmit">未收到验证码?</div>
            <van-password-input :value="code" :length="4" />
            <!-- 数字键盘 -->
            <van-number-keyboard
                maxlength="4"
                theme="custom"
                v-model="code"
                :show="show"
                close-button-text="完成"
                @close="bind"
                :class="[theme]"
            />
        </div>
    </van-popup>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            show: false,
            code: ''
        };
    },
    computed: {
        ...mapState(['theme'])
    },
    watch: {
        code() {
            if (this.code && this.code.length === 6) {
                this.$emit('bind', this.code);
            }
        }
    },
    methods: {
        onSubmit(e) {
            this.$emit('onSubmit', e);
        },
        bind() {
            if (!this.code || this.code.length < 4) {
                this.$toast('请输入验证码');
            }
            this.$emit('bind', this.code);
        },
        init() {
            this.code = '';
            this.show = true;
        }
    }
};
</script>

<style lang="less" scoped>
@bottom: 280px;
@gray3: #c8c9cc;
.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 #f5f7fa;
    }

    .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;
    }
}
</style>
