<template>
    <div>
        <div class="card flex flex-col">
            <h2>Météo Home</h2>
            <ul class="mt-2">
                <li v-for="(captor, index) in captors" :key="index" class="block mb-4">
                    <div class="flex justify-between items-baseline mb-2">
                        <span class="font-bold text-lg">{{ captor.device }}</span>
                        <span class="text-sm">{{ captor.date_meteo }}</span>
                    </div>
                    <div class="flex flex-no-wrap text-sm -m-1">
                        <span v-if="captor.temperature" class="mx-1">{{ floated(captor.temperature) }} <span class="font-semibold text-xs">°C</span></span>
                        <span v-if="captor.humidite" class="mx-1">{{ floated(captor.humidite) }} <span class="font-semibold text-xs">%</span></span>
                        <span v-if="captor.pression" class="mx-1">{{ floated(captor.pression) }} <span class="font-semibold text-xs">hPa</span></span>
                        <span v-if="captor.lumiere" class="mx-1">{{ captor.lumiere }}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AutomaticMeteoHome',
    data: function () {
        return {
            captors: null,
        }
    },
    mounted() {
        // eslint-disable-next-line no-undef
        axios.get('/api/automation/home')
            .then(response => {
                this.captors = response.data.data
                console.log(response.data.data)
            })
            .catch(() => {
                console.log('Unable to fetch memos.')
            })
    },
    methods: {
        floated: function (value) {
            return value.toFixed(2)
        }
    },
}
</script>

<style scoped>

</style>
