/** @format */

// import fetch from '../../../utils/request';
// import '../../../baseComponents/Modal/style/iconfont.css';

import _ from 'lodash';
import React, { useEffect, useState } from 'react';

import styles from './index.less';

interface TemperatureProps {
  size?: Record<string, any>;
  city: Record<string, any>;
  [key: string]: any;
}
const Temperature = (props: TemperatureProps) => {
  const { size, city = '杭州市', boxStyle, iconWidth = 10, iconMargin } = props;
  const [temperature, setTemperature] = useState();
  const iconStyle = {
    width: iconWidth,
    marginRight: iconMargin,
  };
  const styleBase = {
    height: 37,
    width: 105,
    fontSize: 24,
    color: '#fff',
  };

  const style = _.merge(styleBase, size, boxStyle);

  useEffect(() => {
    fetch(
      `https://restapi.amap.com/v3/weather/weatherInfo?key=abb419c77c3a2e1292893441fde0ae87&extensions=base&city=${city}`,
    )
      .then(res => res.json())
      .then(res => {
        if (res && res.lives && res.lives[0]) {
          setTemperature(res.lives[0].temperature);
        }
      });
  }, [city]);

  return (
    <div style={style} className={styles.wendu}>
      <img
        src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/4bf54cf9-5264-4133-887d-2eade7ac64b2.png"
        alt=""
        style={iconStyle}
        className={styles.icon}
      />
      {/* <span className="iconfont">&#xe6fb;</span> */}
      <span> {temperature}℃</span>
    </div>
  );
};

export default Temperature;