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

            <NozzlesTable
                :rows="nozzles"
                :currentRow="currentNozzle"
                :machineState="machineState"
                :machinePos="machinePos"
                :disabled="disabled"
                @add="addNozzle()"
                @set="currentNozzle=$event"
                @up="rowUp(nozzles, $event)"
                @down="rowDown(nozzles, $event)"
                @delete="rowDelete(nozzles, $event)"
                @setPos="setXYOffset($event)"
                @autocalibrate="autocalibrate($event)">
            </NozzlesTable>

            <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 { confirm } from '../js/dialogs.js'
    import NozzlesTable from "../components/NozzlesTable.vue"

    export default {
        mixins: [rowsEdit, machineState],
        props: {
            nozzles: Object,
            machineState: Object,
            machinePos: Object,
            settings: Object,
            disabled: Boolean,
            loading: Boolean
        },
        components: {
            NozzlesTable
        },
        data: function () {
            return {
                currentNozzle: this.currentNozzle
            }
        },
        mounted () {
            if (this.nozzles.length > 0) {
                this.currentNozzle = this.nozzles[0]
            }
        },
        methods: {
            applaySettings() {
                this.$emit('applaySettings')
            },
            
            addNozzle() {
                let id = 1
                for (let row of this.nozzles) {
                    if (row.id >= id) {
                        id = row.id + 1
                    }
                }
                this.nozzles.push(
                    {
                        id: id,
                        name: "Nozzle " + id.toString(),
                        caption: "",
                        calibrationData: [
                            {a:0.0,   dx:0.0, dy:0.0},
                            {a:0.125, dx:0.0, dy:0.0},
                            {a:0.25,  dx:0.0, dy:0.0},
                            {a:0.375, dx:0.0, dy:0.0},
                            {a:0.5,   dx:0.0, dy:0.0},
                            {a:0.625, dx:0.0, dy:0.0},
                            {a:0.75,  dx:0.0, dy:0.0},
                            {a:0.875, dx:0.0, dy:0.0}
                        ]
                    }
                )

                this.currentNozzle = this.nozzles[this.nozzles.length-1]
            },

            setXYOffset(row) {
                if (this.machineStateIsOK() == true) {
                    let zeroX = this.settings.cams[1].pos.x
                    let zeroY = this.settings.cams[1].pos.y
                    row.dx = Math.round((this.machinePos.x - zeroX) * 1000) / 1000
                    row.dy = Math.round((this.machinePos.y - zeroY) * 1000) / 1000
                }
            },

            autocalibrate(row) {
                confirm('Do You want to start Autocalibration of Nozzle?', 'Confirm').then((res)=> {
                    if (res == true) {
                        this.$emit('autocalibrate', row)
                    }
                })
            }
        }
    }
</script>

<style>

</style>
