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

          <FeedersTable
            :rows="feeders"
            :currentRow="currentFeeder"
            :settings="settings"
            :cases="cases"
            :feederTypes="feederTypes"
            :machineState="machineState"
            :machinePos="machinePos"
            :disabled="disabled"
            @goToFeeder="$emit('goToFeeder', $event)"
            @goToFeederCam="$emit('goToFeederCam', $event)"
            @pickFromFeeder="$emit('pickFromFeeder', $event)"
            @adjPosition="$emit('adjPosition', $event)"
            @adjFeederPositionCV="$emit('adjFeederPositionCV', $event)"
            @dropIntoBasket="$emit('dropIntoBasket', $event)"
            @add="addFeeder()"
            @set="currentFeeder=$event"
            @up="rowUp(feeders, $event)"
            @down="rowDown(feeders, $event)"
            @delete="rowDelete(feeders, $event)">
          </FeedersTable>

          <div class="mt-1">
            <button :disabled="loading" class="btn btn-sm btn-outline-secondary me-1" @click="saveFeeders()">Save feeders</button>
          </div>

        </div>

    </div>
</template>

<script>
    import rowsEdit from '../js/rows_edit.js'
    import FeedersTable from "../components/FeedersTable.vue"

    export default {
        mixins: [rowsEdit],
        props: {
            feeders: Object,
            settings: Object,
            cases: Object,
            machineState: Object,
            machinePos: Object,
            disabled: Boolean,
            loading: Boolean
        },
        components: {
            FeedersTable
        },
        data: function () {
            return {
                feederTypes: [
                    {id:0, name:"Liner"},
                    {id:1, name:"Push-pull"},
                    {id:2, name:"Heap"},
                ],
                currentFeeder: this.currentFeeder
            }
        },
        mounted () {
            this.setCurrentFirst()
        },
        methods: {
            setCurrentFirst() {
                if (this.feeders.length > 0) {
                    this.currentFeeder = this.feeders[0]
                }
            },
            addFeeder() {
                let id = 1
                for (let row of this.feeders) {
                    if (row.id >= id) {
                        id = row.id + 1
                    }
                }
                this.feeders.push(
                    {
                        id: id,
                        name: "Feeder " + id.toString(),
                        caption: "",
                        type: 0,
                        pos: {x:0, y:0, z:0},
                        step: {x:0, y:0, z:0},
                        pathPoints:[],
                        capacity: 0,
                        current: 0,
                        elementHeight: 0.4,
                        nozzle: 0,
                        case: '',
                        caseRotate: 0,
                        posCorrection: true,
                        active: true,
                    }
                )

                this.currentFeeder = this.feeders[this.feeders.length-1]
            },
            saveFeeders() {
                this.$emit('saveFeeders')
            }
        },

        watch: {
            feeders() {
                this.setCurrentFirst()
            }
        }
    }
</script>

<style>


</style>
