import React from "react";
import styles from "./index.css";
import {getData} from '../../api/index';
import Edit from '../../components/edit/index';
import Images from './getImg';

const format = (v,_fmt)=>{
    const date = v ? new Date(v) : new Date();
	if (date == "Invalid Date") return '';
	let ret, fmt = _fmt || 'yyyy-MM-dd HH:mm:ss';
	//yyyyMMddHHmmss
	const opt = {
		"y+": date.getFullYear().toString(), // 年
		"M+": (date.getMonth() + 1).toString(), // 月
		"d+": date.getDate().toString(), // 日
		"H+": date.getHours().toString(), // 时
		"m+": date.getMinutes().toString(), // 分
		"s+": date.getSeconds().toString() // 秒
		// 有其他格式化字符需求可以继续添加，必须转化成字符串
	};
	for (let k in opt) {
		ret = new RegExp("(" + k + ")").exec(fmt);
		if (ret) {
			fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
		};
	};
	return fmt;
}

export class Weather extends React.Component {
    state = {
        config: {
            data: {
                todayWeather: {},
                castWeather: []
            }
        },
        newDate:format(new Date())
    }
    newDateTime = null
    componentWillReceiveProps(props){
        const {RequestData,match = {}} = props,
        {RequestData:_RequestData} = this.props,{
            params = {}
        } = match;
        RequestData != _RequestData && getData({
            port: 'Weather', //组件名称
            ...params,
            params:RequestData
        }).then(res => {
            const {config} = res;
            this.setState({config});
        });
        this.newDateTime = setInterval(e=>{
            this.setState({newDate:format(new Date())});
        },1000)
    }
    componentWillUnmount(){
        clearInterval(this.newDateTime);
    }
    render() {
        const {
                config,
                config: {
                    data: {
                        todayWeather: nowDay = {},
                        castWeather = []
                    }
                },
                newDate = ''
            } = this.state,
            nextDay = castWeather[0] || {};
        return (
            <div className={styles.weatherWarp}>
                <Edit data={config} updata={config => this.setState({config})}/>
                <span className={styles.rightLine}>
                    <i className={styles.titleSite}></i>
                    {nowDay.cityName}
                </span>
                <div className={styles.weather}>
                    <img src={Images[nowDay.weather+'']} height="32" width="32"/>
                    <ul className={styles.weatherUl}>
                        <li>{nowDay.currDate} {nowDay.week}</li>
                        <li>（{nowDay.minTemp}
                            ℃ ~ {nowDay.maxTemp}
                            ℃）</li>
                    </ul>
                    <img src={Images[nextDay.castWeaDesc+'']} height="32" width="32"/>
                    <ul className={styles.weatherUl}>
                        <li>{nextDay.castDate} {nextDay.castWeek}</li>
                        <li>（{nextDay.castMinTemp}
                            ℃ ~ {nextDay.castMaxTemp}
                            ℃）</li>
                    </ul>
                    <ul className={styles.weatherUl}>
                        <li>{newDate.split(" ")[0]}</li>
                        <li>{newDate.split(" ")[1]}</li>
                    </ul>
                </div>
                {}
            </div>
        )
    }
}
export default Weather;