<template>
    <div>
        <van-field
                :required="required"
                clearable
                readonly
                :label="label"
                @click="onPick">
            <van-stepper
                    :disabled="readonly"
                    :min="min"
                    :max="max"
                    slot="input"
                    :value="showValue"
                    @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,
                showValue: 0,
            }
        },
        props: {
            'label': {
                type: String,
                default: ''
            },
            'required': {
                type: Boolean,
                default: false
            },
            'readonly': {
                type: Boolean,
                default: false
            },
            'value': {
                type: Number,
                default: 0
            },
            'min': {
                type: Number,
                default: 0
            },
            'max': {
                type: Number,
                default: 999999999
            },
        },
        methods: {
            onPick(){
                this.showPopup = true;
            },
            onChange(value){
                this.showPopup = false;
                this.showValue = value;
                this.$emit('input', this.showValue);
            }
        },
        mounted(){
        }
    }

</script>
