<template>
    <input
        type="time" v-model="valueStr"
        :readonly="readonly" :disabled="disabled"
    />
</template>
    
<script>
import { Time, cmp } from '@silane/datetime';


export default {
    name: 'InputTime',
    props: {
        modelValue: {
            type: Time,
            default: null,
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() { return {
        valueStr: '',
    };},
    watch: {
        modelValue: {
            handler(val, oldVal) {
                const current = this.valueStr
                    ? Time.fromISOFormat(this.valueStr) : null;
                if(val == current)
                    return;
                if(val != null && current != null && cmp(val, current) === 0)
                    return;

                this.valueStr = val === null ? '' : val.isoFormat();
            },
            immediate: true,
        },
        valueStr(val, oldVal) {
            val = val ? Time.fromISOFormat(val) : null;
            this.$emit('update:modelValue', val);
        },
    },
};
</script>
