<template>
    <v-tooltip
        top
        nudge-bottom="20"
        :color="order.days_difference.color"
    >
        <template 
            v-slot:activator="{ on }"
        >
            <v-chip 
                v-on="on"
                small
                outlined
                :color="order.days_difference.color "
                :class="order.days_difference.color + '--text'"
            >
                <div width="95%" class="text-cation text-truncate">
                    {{ order.number}} / {{ ToDateInterval(order.date, order.date_to) }}
                </div>
            </v-chip>
        </template>

        <span class="text-caption">
            {{ order.number}} / {{ ToDateInterval(order.date, order.date_to) }}
        </span>
    </v-tooltip>
</template>

<script>
    export default {
        props: {
            order: {required: true},
        },

        name: 'OrderInfo',
    }
</script>