<template>
    <div class="card">
        <div class="card-header">Nozzles Holder Settings</div>
        <div class="card-body">

            <NozzlesHolderPlaceTable
                :rows="nozzlesHolder.places"
                :currentRow="currentPlace"
                :machineState="machineState"
                :machinePos="machinePos"
                :settings="settings"
                :disabled="disabled"
                @putOnNozzle="$emit('putOnNozzle', $event)"
                @add="addPlace()"
                @set="currentPlace=$event"
                @up="rowUp(nozzlesHolder.places, $event)"
                @down="rowDown(nozzlesHolder.places, $event)"
                @delete="rowDelete(nozzlesHolder.places, $event)">
            </NozzlesHolderPlaceTable>

            <div class="row mt-2">
                <div class="col">
                    <button :disabled="loading" class="btn btn-sm btn-outline-secondary" @click="applaySettings()">Applay settings</button>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
    import rowsEdit from '../js/rows_edit.js'
    import machineState from '../js/machine_state.js'
    import { alert, confirm } from '../js/dialogs.js'

    import NozzlesHolderPlaceTable from '../components/NozzlesHolderPlaceTable.vue'

    export default {
        mixins: [rowsEdit, machineState],
        props: {
            nozzlesHolder: Object,
            machineState: Object,
            machinePos: Object,
            settings: Object,
            disabled: Boolean,
            loading: Boolean
        },

        components: {
            NozzlesHolderPlaceTable
        },
        data: function () {
            return {
                currentPlace: this.currentPlace
            }
        },
        mounted () {
            if (this.nozzlesHolder.places.length > 0) {
                this.currentPlace = this.nozzlesHolder.places[0]
            }
        },

        methods: {
            applaySettings() {
                let isEmptyPlase = false
                for (let place of this.nozzlesHolder.places) {
                    if (place.nozzleId == -1) {
                        isEmptyPlase = true
                        break
                    }
                }

                if (isEmptyPlase) {
                    this.$emit('applaySettings')
                } else {
                    alert('There is no anyone empty place. There need one empty space.', 'Warning', 'warning')
                }
            },

            addPlace() {
                let id = 1
                for (let row of this.nozzlesHolder.places) {
                    if (row.id >= id) {
                        id = row.id + 1
                    }
                }

                this.nozzlesHolder.places.push(
                    {
                        id: id,
                        name: 'Place ' + id,
                        nozzleId:-1,
                        points:[{x:0, y:0, z:0}, {x:0, y:0, z:0}, {x:0, y:0, z:0}],
                        feed: 100
                    }
                )

                this.currentPlace = this.nozzlesHolder.places[this.nozzlesHolder.places.length -1]

            }

        }
    }
</script>

<style>

</style>
