<script lang="ts">
    import { isDateTime, toDate } from '@/components/helpers/instances';
    import { Options } from '@/components/models/tablemodels';
    
    export default {
        props: {
            item: {
                type: Object,
                required: true
            },
            id: {
                type: Number,
                required: true
            },
            prop: {
                type: String,
                required: true
            },
            options: {
                type: Options,
                required: false,
                default: () => new Options()
            }
        },
        watch: {
            item(newValue: any, oldValue: any) {
                this.item = newValue;
            },
            id(newValue: any, oldValue: any) {
                this.id = newValue;
            },
            prop(newValue: any, oldValue: any) {
                this.prop = newValue;
            },
        },
        data() {
            return {
                item: this.item,
                id: this.id,
                prop: this.prop,
                options: this.options,
                isDateTime: isDateTime,
                toDate: toDate
            }
        }
    }

</script>
<template>
    <span v-if="prop == options.Key! && options.ShowKey">
        {{ item[prop] }}
    </span>
    <span v-else-if="prop == options.Key! && options.Active">
        {{ id }}
    </span>
    <span v-else-if="isDateTime(item[prop])">
        {{ toDate(item[prop]) }}
    </span>
    <span v-else>
        {{ item[prop] }}
    </span>
</template>