<template>
<div class="scroll">
    <table class="table" ref="table">
        <thead>
        <tr>
            <th> </th>
            <th>a</th>
            <th>dx</th>
            <th>dy</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row, n in rows" @mousedown="setCurrentRow(row)" :class="row==currentRow?'active-row':''">
            <td>
            <span v-if="row==currentRow">⯈</span>
            <span v-else>&nbsp;&nbsp;</span>
            </td>
            <td><span :class="row.a==machinePos.a?'text-success fw-bold':''">{{ row.a }}</span></td>
            <td><input v-model="row.dx" ref="dx" @focus="currentField='dx'" class="form-control form-control-sm"></td>
            <td><input v-model="row.dy" ref="dy" @focus="currentField='dy'" class="form-control form-control-sm"></td>
            <th nowrap>
                <button class="btn btn-sm btn-outline-secondary btn-danger me-1" @click="$emit('setPos', row)" title="Set nozzle deviation" :hidden="row.a==0">🞊</button>
            </th>
        </tr>
        </tbody>
    </table>
</div>

</template>

<script>
    import tableMixin from '../js/rows_table.js'

    export default {
        props: {
            machinePos: Object,
        },
        mixins: [tableMixin],
        data: function () {
            return {
                currentField: 'dx',
            }
        },
    }
</script>
