import React, { Component } from 'react'
import { Space } from 'antd'
import AntIcon from 'components/ant-icon'
import { axios } from 'common/api'
import { AMAP_WEBAPI_KEY } from 'util/global'

export default class weather extends Component {
    state = {
        weather: '',
        temperature: 0,
    }

    async componentDidMount() {
        const {
            data: { adcode },
        } = await axios.get('https://restapi.amap.com/v3/ip', {
            params: {
                key: AMAP_WEBAPI_KEY,
            },
        })
        const {
            data: { lives },
        } = await axios.get('http://restapi.amap.com/v3/weather/weatherInfo', {
            params: {
                key: AMAP_WEBAPI_KEY,
                city: adcode,
            },
        })
        if (Array.isArray(lives)) {
            const { weather, temperature } = lives.shift()
            this.setState({
                weather,
                temperature,
            })
        }
    }

    render() {
        const { weather, temperature } = this.state

        return (
            <span className="header-action">
                <Space align="center" style={{ lineHeight: 1 }}>
                    <AntIcon type="cloud" />
                    <span>{temperature}℃</span>
                    <span>{weather}</span>
                </Space>
            </span>
        )
    }
}
