<template>
    <div class="results">
        <p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
        <p>Auf Folgendes sollten Sie achten:</p>
        <div class="card-advice alert">
            <div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
            <div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
        </div>
        <p>Hier können Sie sich noch verbessern:</p>
        <div class="card-advice warning">
            <div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
            <div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
        </div>
        <p>Das machen Sie schon gut:</p>
        <div class="card-advice success">
            <div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
            <div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Results",
        mounted() {
            const biased = this.$store.state.answers.map((x, i) => {
                return x * this.$store.state.questions[i].multiplicator
            })
            const summed = biased.reduce(function(acc, current) {
                return acc + current
            })
            console.log(Math.round(summed / 10))
        }
    }
</script>

<style scoped>
    .results {
        padding: 1em;
    }
    .card-advice {
        padding: 0.8em;
        border-radius: 0.8em;
    }
    .card-advice .card-advice-title {
        font-weight: bolder;
        margin-bottom: 0.5em;
    }
    .card-advice.success {
        background: rgba(98, 225, 96, 0.25);
    }
    .card-advice.warning {
        background: rgba(255, 233, 36, 0.25);
    }
    .card-advice.alert {
        background: rgba(233, 74, 71, 0.25);
    }
</style>
