<template>
    <div>
        <van-field
                v-model="value"
                :required="required"
                clearable
                clickable
                readonly
                :label="label"
                @click="onPick"
                right-icon="clock-o"
                placeholder="请选择日期"/>
        <van-popup
                v-model="showPopup"
                position="bottom"
                show-cancel-button>
            <van-datetime-picker
                    :min-date="minDate"
                    v-model="currentDate"
                    @confirm="onConfirm"
                    @cancel="onCancel"
                    type="date"/>
        </van-popup>

    </div>
</template>
<script>
    import {
        Field,
        DatetimePicker,
        Popup,
    } from 'vant';

    export default{
        components: {
            [Field.name]: Field,
            [DatetimePicker.name]: DatetimePicker,
            [Popup.name]: Popup
        },
        data(){
            return {
                showPopup: false,
                value: '',
                currentDate: '',
                minDate: '',
            }
        },
        props: {
            'label': String,
            'formatter': String,
            'required': Boolean
        },
        methods: {
            onPick(){
                this.showPopup = true;
            },
            onConfirm(value){
                this.showPopup = false;
                this.value = value.format(this.formatter);
                this.$emit('input', this.value);
            },
            onCancel(){
                this.showPopup = false;
            }
        },
        mounted(){
            this.minDate = new Date(new Date().getTime() - 100 * 365 * 24 * 60 * 60 * 1000);
            this.currentDate = new Date();
            if (!this.formatter) {
                this.formatter = 'yyyy-MM-dd hh:mm:00'
            }
        }
    }

</script>
<style lang="less">

</style>
