<template>
    <div class="card">
        <div class="card-header">Controller state</div>
        <div class="card-body">

            <div class="row">
                <div class="col text-center"><h3 :class="'Status ' + statusString">{{ statusString }}</h3></div>
            </div>

            <div class="row">
                <div class="col-auto">X</div>
                <div class="col text-end">{{state.pos.x}}</div>
            </div>

            <div class="row">
                <div class="col-auto">Y</div>
                <div class="col text-end">{{state.pos.y}}</div>
            </div>

            <div class="row">
                <div class="col-auto">Z</div>
                <div class="col text-end">{{state.pos.z}}</div>
            </div>

            <div class="row">
                <div class="col-auto">A</div>
                <div class="col text-end">{{state.pos.a}}</div>
            </div>        

            <div class="row">
                <div class="col-auto">Pump</div>
                <div class="col text-end"><OnOff :state="pumpState"></OnOff></div>
            </div>

            <div class="row" v-for="valve, n in valvesState">
                <div class="col-auto">Valve {{n+1}}</div>
                <div class="col text-end"><OnOff :state="valve"></OnOff></div>
            </div>

        </div>
    </div>
</template>

<script>
    import OnOff from "../components/OnOff.vue"
    
    export default {
        components: {
            OnOff
        },
        props: {
            state: Object,
            pnpProcessing: Object,
            valvesState: Object,
            pumpState: Boolean
        },
        computed: {
            statusString () {
                if (this.pnpProcessing.runFlag == true) {
                    if (this.pnpProcessing.pauseFlag == true) {
                        return 'Paused'
                    } else {
                        return 'Job'
                    }
                } else {
                    return this.state.status
                }
            }
        }
    }
</script>

<style>
.Status {
    background-color:#e9ecef;
    color: black;
}

.Idle {
    background-color: green;
    color: aliceblue;
}

.Homing {
    background-color: gold;
    color: dimgrey;
}

.Jog {
    background-color: gold;
    color: dimgrey;
}

.Run {
    background-color: gold;
    color: dimgrey;
}

.Alarm {
    background-color: red;
    color: gold;
}

.Home {
    background-color: red;
    color: gold;
}

.Job {
    background-color: gold;
    color: dimgrey;
}

.Paused {
    background-color: gold;
    color: dimgrey;
}

</style>