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

            <div class="row">
                <div  v-for="head, n in heads" class="col" :key="n">

                    <div class="card">
                        <div class="card-header">Head {{ head.name }}</div>
                        <div class="card-body">

                            <div class="mb-3">
                                <label class="form-label">Safety Z position</label>
                                <input v-model="head.safePosZ" type="number" step="0.1" class="form-control form-control-sm">
                                <div class="form-text">Position Z to safety moving head over the table</div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Valve On command</label>
                                <input v-model="head.valveOn" type="text" class="form-control form-control-sm">
                            </div>

                            <div class="mb-3">
                                <div class="row">
                                    <div class="col">
                                        Pause Before On: <input v-model="head.pauseBeforeOn" type="number" step="0.1" class="form-control form-control-sm">
                                    </div>
                                    <div class="col">
                                        Pause After On: <input v-model="head.pauseAfterOn" type="number" step="0.1" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Valve Off command</label>
                                <input v-model="head.valveOff" type="text" class="form-control form-control-sm">
                            </div>

                            <div class="mb-3">
                                <div class="row">
                                    <div class="col">
                                        Pause Before Off: <input v-model="head.pauseBeforeOff" type="number" step="0.1" class="form-control form-control-sm">
                                    </div>
                                    <div class="col">
                                        Pause After Off: <input v-model="head.pauseAfterOff" type="number" step="0.1" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Output name in GC</label>
                                <input v-model="head.inGC" type="text" class="form-control form-control-sm">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Nozzle default</label>
                                <select v-model="head.nozzle" class="form-control form-control-sm">
                                    <option :value="-1">Empty</option>
                                    <option :value="item.id" v-for="item in nozzles">{{ item.name }}</option>
                                </select>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <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>
    export default {
        props: {
            heads: Object,
            nozzles: Object,
            loading: Boolean
        },
        methods: {
            applaySettings() {
                this.$emit('applaySettings')
            }
        }
    }
</script>

<style>

</style>
