import React, { useEffect, useState } from 'react';
import { IOTWeatherProps } from './interface';
import './style/index.less';
const prefixCls = 'iot-weather-out';
type items = {
  flag: boolean,
  text: string
}
const IOTWeather: React.FC<IOTWeatherProps> = ({
  weather,
  ...rest
}) => {
  const [location, setLocation] = useState<items>({ flag: false, text: '' });
  const [temperature, setTemperature] = useState({ flag: false, text: '' });
  const [humidity, setHumidity] = useState({ flag: false, text: '' });
  const [pm25, setPm25] = useState({ flag: false, text: '' });

  useEffect(() => {
    if (weather) {
      setLocation({ ...weather['location'] });
      setTemperature({ ...weather['temperature'] });
      setHumidity({ ...weather['humidity'] });
      setPm25({ ...weather['pm25'] });
    }
  }, [weather])
  return (
    <div>
      <div className={prefixCls} {...rest}>
        <div className="iot-weather">
          <div className='new-weather'>
            {
              location.flag && (
                <>
                  <i className='icon-w insideicon-weater-location' />
                  <span className='default-text'>
                    {location.text ? location.text : '定位失败'}
                  </span>
                </>
              )}
            {
              temperature.flag && (
                <>
                  <span className='line-new' />
                  <span className='text'>
                    温度 {temperature.text ? temperature.text + '℃' : '--'}
                  </span>
                </>
              )}
            {humidity.flag && (
              <>
                <span className='line-new' />
                <span className='text'>
                  湿度 {humidity.text ? humidity.text : '--'}
                </span>
              </>
            )}
            {pm25.flag && (
              <>
                <span className='line-new' />
                <span className='text'>PM2.5 {pm25.text ? pm25.text : '--'}</span>
              </>
            )}
          </div>
          {/* {
            location.flag && (
              <div className='location-style'>
                <div className="icon-w insideicon-weater-location"></div>
                <div className='text'>{location.text ? location.text : '定位失败'}</div>
              </div>
            )
          }
          {
            temperature.flag && (
              <div className='block-info'><div className='line'></div>
                <div className='text'>温度 {temperature.text ? temperature.text : '--'}</div>
              </div>
            )
          }

          {
            humidity.flag && (
              <div className='block-info'>
                <div className='line'></div>
                <div className='text'>湿度 {humidity.text ? humidity.text : '--'}</div>
              </div>
            )
          }
          {
            pm25.flag && (
              <div className='block-info'>
                <div className='line'></div>
                <div className='text'>PM2.5 {pm25.text ? pm25.text : '---'}</div>
              </div>
            )
          }

          <div className='right-div'>
            占
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default IOTWeather;