<template>
<div class="scroll">
    <table class="table mb-5" ref="table">
        <thead>
        <tr>
            <th> </th>
            <th>x</th>
            <th>y</th>
            <th>z</th>
            <th>pick</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">
                <CopyPasteMenu :row="row" :clipboard="clipboard" @copy="doAction('copy', $event)" @paste="doAction('paste', $event)">⯈</CopyPasteMenu>
            </span>
            <span v-else>&nbsp;&nbsp;</span>
            </td>
            <td><input v-model="row.x" ref="x" @focus="currentField='x'" class="form-control form-control-sm"></td>
            <td><input v-model="row.y" ref="y" @focus="currentField='y'" class="form-control form-control-sm"></td>
            <td><input v-model="row.z" ref="z" @focus="currentField='z'" class="form-control form-control-sm"></td>
            <td><input v-model="row.pick" type="checkbox" class="form-check-input"></td>
            <th nowrap>
                <button class="btn btn-sm btn-outline-secondary btn-danger me-1" @click="$emit('setPos', row)" title="Set current position of nozzle">🞊</button>
                <button class="btn btn-sm btn-outline-secondary btn-danger" @click="$emit('delete', row)">⮿</button>
            </th>
        </tr>
        </tbody>
    </table>
    <div class="text-end">
        <button @click="$emit('add')" class="btn btn-sm btn-outline-secondary">Add point</button>
    </div>
</div>

</template>

<script>
    import tableMixin from '../js/rows_table.js'
    import CopyPasteMenu from "../components/CopyPasteMenu.vue"
    import deepMerge from '../js/deep_merge.js'

    export default {
        mixins: [tableMixin, deepMerge],
        components: {
            CopyPasteMenu
        },
        data: function () {
            return {
                currentField: 'x',
                clipboard: this.clipboard
            }
        },
        methods: {
            doAction(event, row) {
                if (event == 'copy') {
                    this.clipboard = Object.assign({}, row)
                }

                if (event == 'paste') {
                    row = this.deepMerge(row, this.clipboard)
                }
            }
        }
    }
</script>
