import React, { memo, useEffect, useState } from 'react';
import CountUp from 'react-countup';
import axios from 'axios';
import Line from '../Line';
import './index.scss';

const countUpProps = {
  redraw: true,
  start: 0,
  duration: 1
};


function ThirdSection({ third }) {
  const [statisticsNum, setStatisticsNum] = useState({});

  useEffect(() => {
    const url = `/home/platform_statistics.json`;
    axios.get(url).then(result => {
      if (result && result.data) {
        setStatisticsNum(result.data);
      }
    }).catch(error => { });
  }, [])

  return (
    <div className="ball-background">
      <h2 className="third-tit">数据统计总览</h2>
      <Line />
      <div className="homepage-main third-main ">
        <div className="circle-item">
          <div className="circle-item-box">
            <div className="circle-item-num" style={{fontSize:statisticsNum.visits>9999999?'24px':statisticsNum.visits>99999?'36px':'48px'}}>
              <CountUp
                {...countUpProps}
                end={statisticsNum.visits}
              />
            </div>
          </div>
          <h4>平台点击量</h4>
        </div>

        <div className="circle-item">
          <div className="circle-item-box">
            <div className="circle-item-num">
              <CountUp {...countUpProps} end={statisticsNum.users_count} />
            </div>
          </div>
          <h4 >平台用户数</h4>
        </div>

        <div className="circle-item">
          <div className="circle-item-box">
            <div className="circle-item-num">
              <CountUp {...countUpProps} end={statisticsNum.projects_count} />
            </div>
          </div>
          <h4 >开源项目托管数</h4>
        </div>

        <div className="circle-item">
          <div className="circle-item-box">
            <div className="circle-item-num">
              <CountUp {...countUpProps} end={statisticsNum.tasks_count} />
            </div>
          </div>
          <h4 >创客任务发布数</h4>
        </div>

        <div className="circle-item">
          <div className="circle-item-box">
            <div className="circle-item-num">
              <CountUp {...countUpProps} end={statisticsNum.memos_count} />
            </div>
          </div>
          <h4 >论坛发帖数量</h4>
        </div>

      </div>

      <svg className="waves waves-low "
        viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
        <defs>
          <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g className="parallax">
          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" />
          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.4)" />
          <use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
        </g>
      </svg>
    </div>
  )
}

export default memo(ThirdSection);