<template>
    <van-dialog
        style="width: 300px; z-index: 9999"
        v-model:show="phoneShow"
        confirm-button-text="提交"
        @confirm="confirm"
        teleport="body"
        :overlayStyle="{ zIndex: 9998 }"
    >
        <div class="form">
            <van-image @click="getCode" :src="codeImg" width="150" height="80" fit="contain" />
            <van-field type="digit" input-align="center" placeholder="请输入图形验证码" v-model="captcha" />
        </div>
    </van-dialog>
</template>

<script>
export default {
    data() {
        return {
            phoneShow: false,
            captcha: '',
            captchaKey: '',
            codeImg: ''
        };
    },
    mounted() {
        this.emitter.on('phoneShow', () => {
            this.getCode();
        });
    },
    methods: {
        getCode() {
            this.$http.get('/captcha/get?' + new Date().getTime()).then(res => {
                this.captcha = '';
                this.codeImg = res.image;
                this.captchaKey = res.key;
                this.phoneShow = true;
            });
        },
        confirm() {
            this.emitter.emit('submitCaptcha', {
                captcha: this.captcha || ' ',
                captchaKey: this.captchaKey
            });

            this.captcha = '';
        }
    }
};
</script>

<style lang="less" scoped>
.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}
.van-field {
    margin: 0 30px;
    width: auto;
    background-color: #f5f7fa;
}
</style>
