<template>
    <div>
        <v-text-field
            v-model="dateShow"
            :label="label"
            prepend-icon="WMi-calendar-alt"
            color="purple"
            :id="'my-custom-date-' + uniqueId"
            readonly
            :color="color"
            @click="show = true"
        />
        <date-picker
            v-model="dateShow"
            locale="fa,en"
            :locale-config="localeConfig"
            :format="displayFormat"
            @change="$emit('input', $event.format(format))"
            :type="type"
            :auto-submit="true"
            :element="'my-custom-date-' + uniqueId"
            :editable="true"
            :show="show"
            :min="min"
            :max="max"
            @close="show = false"
            :color="color"
        />
    </div>
</template>
<script>
    import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
    import moment from 'jalali-moment';

    export default {
        components: {
            datePicker: VuePersianDatetimePicker
        },
        props: {
            color: {default: 'black'},
            min: {default: null},
            max: {default: null},
            displayFormat: {default: 'jDD jMMMM jYYYY ساعت HH:mm'},
            format: {default: 'YYYY-MM-DD HH:mm'},
            type: {default: 'datetime'},
            label: {default: 'در تاریخ '},
            value: {default: null},
        },
        data: () => ({
            localeConfig: {
                fa: {
                    displayFormat: 'jYYYY/jMM/jDD HH:mm',
                    inputFormat: 'YYYY-MM-DD HH:mm',
                    lang: {label: 'شمسی'}
                },
                en: {
                    displayFormat: 'YYYY/MM/DD HH:mm',
                    inputFormat: 'YYYY-MM-DD HH:mm',
                    lang: {label: 'Gregorian'}
                }
            },
            show: false,
            uniqueId: Math.floor(Math.random() * 10000)
        }),
        computed: {
            dateShow: {
                get() {
                    if (this.value) {
                        return moment(new Date(this.value)).format(this.displayFormat);
                    }
                    return moment(new Date()).format(this.displayFormat);
                },
                set(value) {

                }
            },
        }
    }
</script>
