<template>
    <v-sheet
        class=""
    >

        <cs-info-alert 
            v-if="abonamente.length == 0"
            message="Nu are definite abonamente."
            class="mb-4"
        />

        <abonamente-lista 
            v-else
            :items="abonamente"
            class="mb-4"
            @reordered="OnReordered"
            @delete="OnDeleteItem"
            
        />

        <v-sheet class="d-flex align-center justify-space-between">
            <v-row dense>
                <v-col cols="12">
                    <v-text-field
                        dense
                        :label="__('Denumirea abonamentului')"
                        class="ma-0"
                        v-model="newabonament.name"
                    >
                    </v-text-field>
                </v-col>

                <v-col cols="4">
                    <v-text-field
                        dense
                        type="number"
                        :label="__('Tarif')"
                        class="ma-0 cs-input-numeric"
                        v-model="newabonament.tarif"
                    >
                    </v-text-field>
                </v-col>

                <v-col cols="4">
                    <v-text-field
                        dense
                        type="number"
                        :label="__('Tarif ore suplimentare')"
                        class="ma-0 cs-input-numeric"
                        v-model="newabonament.tarif_ore_suplimentare"
                    >
                    </v-text-field>
                </v-col>

                <v-col cols="4">
                    <v-text-field
                        dense
                        type="number"
                        :label="__('Număr de ore incluse')"
                        class="ma-0 cs-input-numeric"
                        v-model="newabonament.numar_ore_incluse"
                    >
                    </v-text-field>
                </v-col>
            </v-row>

            <v-sheet width="50" class="d-flex justify-end">
                <cs-btn 
                    icon="mdi-plus"
                    color="primary"
                    :xsmall="true"
                    :small="false"
                    tooltip="Confirmarea adăugarea"
                    :disabled="! newabonament.name"
                    @click="OnClickInsert"
                />
            </v-sheet>
        </v-sheet>

        
    </v-sheet>
</template>

<script>
    import RandomString from '@CsFunc/global/RandomString';
    const OrderByOrderNo = require('@CsFunc/global/OrderByOrderNo');
    
    export default {

        props: {
            value: {required: true}, // <---abonamente
        },

        data: () => ({
            order_no: 0,
            newabonament: {
                name: null,
                tarif_ore_suplimentare: 0,
                tarif: 0,
                numar_ore_incluse: 0,
            },
        }),

        computed: {

            abonamente: {
                get: function() {
                    return OrderByOrderNo(this.value);
                },

                set: function(value) {
                    this.$emit('input', value);
                }
            }
        },

        watch: {
            'newabonament.name': function(value) {
                this.$emit('new-abonament', value);
            }
        },

        methods: {
            OnDeleteItem(id) {
                let r = [...this.abonamente];
                r = _.filter(r, item => item.id != id);
                this.abonamente = r;
            },

            OnReordered(items) {
                let r = [...items];
                _.each(r, (item, index) => {
                    item.order_no = index + 1
                })
                this.abonamente = r;
            },

            OnClickInsert() {
                let r = [...this.abonamente];
                r.push({
                    id: RandomString(16),
                    name: this.newabonament.name,
                    tarif_ore_suplimentare: this.newabonament.tarif_ore_suplimentare,
                    tarif: this.newabonament.tarif,
                    numar_ore_incluse: this.newabonament.numar_ore_incluse,
                    
                    order_no: ++this.order_no,
                })
                this.abonamente = r;

                this.newabonament = {
                    name: null,
                    tarif_ore_suplimentare: 0,
                    tarif: 0,
                    numar_ore_incluse: 0,
                };

                this.Focus();
            },

            Focus() {
                // this.$refs.FirstControl.$refs.input.focus();
            }
        },

        created() {
            this.order_no = !!this.abonamente ? this.abonamente.length : 0;
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
        },
        
        name: 'CursTematicaControl',
    }
</script>