<template>
    <v-sheet class="pa-2" :width="width">

        
        <v-row dense>
            <v-col cols="3">
                {{ order.number}}
                <cs-text-box 
                    :control="controls.number"
                    v-model="order.number"
                />
            </v-col>

            <v-col cols="6">
                <cs-date-interval-box 
                    :control="controls.contractinterval"
                    :errors="null"
                    :value="controls.contractinterval.GetRange(order.date, contract.date_to)"
                    @input="controls.contractinterval.SetRangeValue($event, order, 'date', 'date_to')"
                />
                
                <v-alert dense :color="order.days_difference.color" outlined class="text-caption">
                    <span v-if="order.days_difference.color == 'red'">
                        {{ __('Comandă expirată (:text)', {text: order.days_difference.human }) }}
                    </span>
                    <span v-else>
                {{ order.days_difference}}
                    </span>
                </v-alert>
            </v-col>

            <v-col cols="3">
                <v-checkbox
                    dense
                    :true-value="1"
                    :false-value="0"
                    v-model="order.prelungire_automata"
                >
                    <template #label>
                        <span class="text-caption">
                            {{ __('Se prelungește automat') }}
                        </span>
                    </template>
                </v-checkbox>
            </v-col>
        </v-row>
    </v-sheet>
</template>

<script>

    import ContractInterval from 'APPS/Forms/Customer/Contracte/Controls/ContractInterval';
    import Number from 'APPS/Forms/Customer/Contracte/Controls/Number';

    export default {
        props: {
            contract: {required: true},
            order: {required: true},
            app: {required: true},
            customer: {required: true},
            width: {default: null},
        },

        data: () => ({
            controls: {
                number: null,
                contractinterval: null,
            },
        }),

        

        created() {
            this.controls.contractinterval = new ContractInterval(null);
            this.controls.number = new Number(null);
        },

        components: {
            CsDateIntervalBox: require('@CsVueComp/controls/dates/CsDateIntervalBox').default,
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
        },
        
        name: 'OrderForm',
    }
</script>