<template>
    <widget-card :bodyStyle="bodyStyle" class="weather-widget">
        <div slot="header" class="date">
            {{date}}
        </div>
        <template v-if="weather">
            <div class="info">
                <div class="city">{{weather ? weather.basic.location : ''}}&nbsp;&nbsp;&nbsp;{{weather.now.cond_txt}}
                </div>
                <div class="temp">{{weather.now.tmp}}°C</div>
            </div>
            <i :class="`icon wi ${iconMap[weather.now.cond_code]}`"></i>
        </template>
    </widget-card>
</template>

<script>
import WidgetCard from './WidgetCard'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'
import axios from 'axios'

export default {
    created() {
        axios.get('https://free-api.heweather.com/s6/weather/now', {
            params: {
                location: 'auto_ip',
                key: 'cd39b8d532784c5b881ed41eaea72e6d',
            },
            withCredentials: false
        }).then(res => {
            this.weather = res.data.HeWeather6[0]
        })
    },
    data() {
        return {
            date: format(new Date(), 'YYYY/MM/DD dddd', { locale: zh }),
            weather: null,
            iconMap: {
                '100': 'wi-day-sunny',
                '100n': 'wi-night-clear',
                '101': 'wi-cloudy',
                '102': 'wi-cloud',
                '103': 'wi-day-cloudy',
                '103n': 'wi-night-alt-cloudy',
                '104': 'wi-cloud',
                '104n': 'wi-cloud',
                '200': 'wi-windy',
                '201': 'wi-day-sunny',
                '202': 'wi-windy',
                '203': 'wi-windy',
                '204': 'wi-windy',
                '205': 'wi-strong-wind',
                '206': 'wi-strong-wind',
                '207': 'wi-strong-wind',
                '208': 'wi-strong-wind',
                '209': 'wi-storm-warning',
                '210': 'wi-storm-warning',
                '211': 'wi-hurricane',
                '212': 'wi-tornado',
                '213': 'wi-hurricane',
                '300': 'wi-day-showers',
                '300n': 'wi-night-alt-showers',
                '301': 'wi-day-showers',
                '301n': 'wi-night-alt-showers',
                '302': 'wi-day-storm-showers',
                '302n': 'wi-night-alt-storm-showers',
                '303': 'wi-day-storm-showers',
                '303n': 'wi-night-alt-storm-showers',
                '304': 'wi-day-snow-thunderstorm',
                '304n': 'wi-night-alt-snow-thunderstorm',
                '305': 'wi-rain',
                '306': 'wi-rain',
                '307': 'wi-rain',
                '308': 'wi-rain',
                '309': 'wi-rain',
                '310': 'wi-rain',
                '311': 'wi-rain',
                '312': 'wi-rain',
                '313': 'wi-sleet',
                '314': 'wi-rain',
                '315': 'wi-rain',
                '316': 'wi-rain',
                '317': 'wi-rain',
                '318': 'wi-rain',
                '399': 'wi-rain',
                '400': 'wi-snow',
                '401': 'wi-snow',
                '402': 'wi-snow',
                '403': 'wi-snow',
                '404': 'wi-sleet',
                '405': 'wi-rain-mix',
                '406': 'wi-rain-mix',
                '407': 'wi-day-snow',
                '407n': 'wi-night-alt-snow',
                '408': 'wi-snow',
                '409': 'wi-snow',
                '410': 'wi-snow',
                '499': 'wi-snow',
                '500': 'wi-fog',
                '501': 'wi-fog',
                '502': 'wi-day-haze',
                '503': 'wi-dust',
                '504': 'wi-dust',
                '507': 'wi-sandstorm',
                '509': 'wi-fog',
                '510': 'wi-fog',
                '511': 'wi-fog',
                '512': 'wi-fog',
                '513': 'wi-fog',
                '514': 'wi-fog',
                '515': 'wi-fog',
            },
            bodyStyle: {
                display: 'flex',
                alignItems: 'center'
            }
        }
    },
    components: {
        WidgetCard
    }
}
</script>
<style lang="less">
@import '../../static/weather_icons/less/weather-icons.less';
</style>
<style lang="less" >
.weather-widget {
    .date {
        color: #666;
        font-size: 14px;
    }

    .icon {
        font-size: 72px;
        color: #666;
    }

    .info {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        .city {
            font-size: 12px;
            color: #999;
        }
        .temp {
            font-size: 36px;
            color: #333;
            margin-top: 8px;
        }
    }
}
</style>
