<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 capitalize">{{ captor.device }}</span>
                        <span class="tinline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ dateIt(captor.date_meteo) }}</span>
                    </div>
                    <div class="flex flex-no-wrap text-sm -m-1">
                        <span v-if="captor.temperature" class="px-1 w-1/4">{{ floated(captor.temperature) }} <span class="font-semibold text-xs">°C</span></span>
                        <span v-if="captor.humidite" class="px-1 w-1/4">{{ floated(captor.humidite) }} <span class="font-semibold text-xs">%</span></span>
                        <span v-if="captor.pression" class="px-1 w-1/4">{{ floated(captor.pression) }} <span class="font-semibold text-xs">hPa</span></span>
                        <span v-if="captor.lumiere" class="px-1 w-1/4">{{ 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
            })
            .catch(() => {
                console.log('Unable to fetch memos.')
            })
    },
    methods: {
        floated: function (value) {
            return value.toFixed(2)
        },
        dateIt: function (val) {
            let hour = val.split(' ')[1].split(':00:')[0]
            let date = val.split(' ')[0].split('-')
            let result = hour + 'h ' + date[2] + '/' + date[1]
            if (parseInt(date[0]) !== new Date().getFullYear()) {
                result += '/' + date[0]
            }
            return result
        }
    }
}
</script>
