<template>
    <div>
        <van-field
                v-model="value"
                :required="required"
                clearable
                readonly
                :label="label"
                @click="onPick">
            <van-stepper
                    slot="input"
                    :value="value"
                    @change="onChange"/>
        </van-field>
    </div>
</template>
<script>
    import {
        Field,
        Stepper,
    } from 'vant';

    export default{
        components: {
            [Field.name]: Field,
            [Stepper.name]: Stepper,
        },
        data(){
            return {
                showPopup: false,
                value: '',
            }
        },
        props: {
            'label': String,
            'required': Boolean
        },
        methods: {
            onPick(){
                this.showPopup = true;
            },
            onChange(value){
                this.showPopup = false;
                this.$emit('input', value);
            }
        },
        mounted(){
        }
    }

</script>
