<template>
    <span>
        <input class="form-control"
               type="text"
               :id="id"
               :name="name"
               @focus="openDte"
               v-model="formattedDateTime"
               readonly
               style="cursor: pointer !important" />
        <date-picker v-model="dateTime"
                     :display-format="displayFormat"
                     :format="format"
                     :view="view"
                     :jump-minute="jumpMinute"
                     :round-minute="roundMinute"
                     :type="type"
                     ref="dp"
                     :locale="locale"
                     :element="id"
                     :disabled="disabled"
                     :min="minDateTime"
                     :max="maxDateTime">
        </date-picker>
    </span>
</template>

<script>
import datePicker from './VuePersianDatetimePicker.vue';
import { guid, cultureManager } from "libj-core";
import moment from 'moment';
export default {
    components: {
        'date-picker': datePicker
    },
    props: {
        name: {
            type: String,
            default: ''
        },
        value: {
            type: Number,
            default: moment().valueOf()
        },
        view: {
            type: String,
            default: 'day'     //day, month, year, time
        },
        type: {
            type: String,
            default: 'datetime', //datetime, date, year, month, time
        },
        disabled: {
            type: Boolean,
            default: false
        },
        jumpMinute: {
            type: Number,
            default: 1
        },
        roundMinute: {
            type: Boolean,
            default: false
        },
        min: {
            type: Number,
            default: null
        },
        max: {
            type: Number,
            default: null
        }
    },
    data() {
        var format = 'YYYY/MM/DD HH:mm:ss';
        var culture = cultureManager.getActiveCulture().code;
        return {
            id: guid.newId(),
            format: format,
            dateTime: '',
            formattedDateTime: moment(this.value).locale(culture).format(this.displayFormat),
            minDateTime: '',
            maxDateTime: '',
        };
    },
    mounted() {
        this.setDateTime(this.value);
        this.setMinDateTime(this.min);
        this.setMaxDateTime(this.max);
    },
    computed: {
        locale() {
            return cultureManager.getActiveCulture().code === 'fa' ? 'fa,en' : 'en,fa';
        },
        displayFormat() {
            return cultureManager.getActiveCulture().code === 'fa' ? 'dddd jDD jMMMM jYYYY HH:mm' : 'dddd DD MMMM YYYY HH:mm';
        }
    },
    methods: {
        getMs() {
            return moment(this.dateTime, this.format).valueOf();
        },
        setDateTime(ms) {
            this.dateTime = moment(ms).locale('en').format(this.format);
        },
        setMinDateTime(ms) {
            if (ms === undefined || ms === null) {
                this.minDateTime = null;
            } else {
                this.minDateTime = moment(ms).locale('en').format(this.format);
            }
        },
        setMaxDateTime(ms) {
            if (ms === undefined || ms === null) {
                this.maxDateTime = null;
            } else {
                this.maxDateTime = moment(ms).locale('en').format(this.format);
            }
        },
        openDte() {
            this.$refs.dp.open();
        }
    },
    watch: {
        value() {
            var v = this.getMs();
            if (this.value != v) {
                this.setDateTime(this.value);
            }
        },
        dateTime() {
            var culture = cultureManager.getActiveCulture().code;
            this.formattedDateTime = moment(this.dateTime, this.format).locale(culture).format(this.displayFormat);
            var v = this.getMs();
            if (this.value != v) {
                this.$emit('input', v);
            }
        },
        min() {
            this.setMinDateTime(this.min);
        },
        max() {
            this.setMaxDateTime(this.max);
        }
    }
}
</script>