import React, { memo, useEffect, useState } from 'react';
import { Button } from 'antd';
import axios from 'axios';
import Line from '../Line';
import completeIcon1 from '../img/6-completeIcon1.png';
import completeIcon2 from '../img/6-completeIcon2.png';
import completeIcon3 from '../img/6-completeIcon3.png';
import ball from '../img/6-ball.png';
import cup from '../img/6-cup.png';
import yLetter from '../img/6-y.png';
import net from '../img/6-net.png';
import overall from '../img/6-overall.png';
import pillar1 from '../img/6-pillar1.png';
import pillar2 from '../img/6-pillar2.png';
import pillar3 from '../img/6-pillar3.png';
import './index.scss';
let iconArr = [completeIcon1, completeIcon2, completeIcon3];


function SixthSection({ sixth, main_web_site_url,btnUrl }) {

  const [list, setList] = useState();

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

  function goDetail(id) {
    window.open(`${main_web_site_url}/competitions/${id}/enroll`);
  }

  return (
    <div className="grid-picture">
      <div className="homepage-main sixth-main">

        <div className={sixth ? "active complete-des" : "complete-des"}>

          {
            list && list.map((item, i) => {
              return (
                <div className="des-item" key={i}>
                  <img className="des-item-img" alt="竞赛" src={iconArr[i]}></img>
                  <div className="des-item-content">
                    <h4 className="des-item-title ellipsis-1 link" onClick={() => { goDetail(item.id) }}>{item.title}</h4>
                    <p className="des-item-time">竞赛时间：{item.start_time && item.start_time.split(' ')[0]}-{item.end_time && item.end_time.split(' ')[0]}</p>
                    <p className="des-item-intro ellipsis-2">赛事简介： {item.content||'暂无简介'}</p>
                  </div>
                </div>
              )
            })
          }
        </div>

        <div className="sixth-right">
          <div className="sixth-right-title">
            <h2 className="homePage-white-tit">开放竞赛</h2>
            <h4 className="homePage-white-subhead">开放竞赛版块通过赛事和学术活动组织，为验证技术成果、挖掘优秀人才提供有效途径</h4>
            <Line />
          </div>

          <div className="sixth-play-img">
            <img alt="images-not_found" className="overall" src={overall}></img>
            <img alt="images-not_found" className="ball" src={ball}></img>
            <img alt="images-not_found" className="cup" src={cup}></img>
            <img alt="images-not_found" className="net" src={net}></img>
            <img alt="images-not_found" className="yLetter" src={yLetter}></img>
            <img alt="images-not_found" className="pillar3" src={pillar3}></img>
            <img alt="images-not_found" className="pillar2" src={pillar2}></img>
            <img alt="images-not_found" className="pillar1" src={pillar1}></img>

          </div>
        </div>

      </div>

      <Button className="homepage-btn" type="primary" onClick={() => { window.open(btnUrl) }}>我要参赛 <i className="iconfont icon-gengduoicon"></i></Button>
      <svg className="waves"
        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="3" fill="rgba(255,255,255,0.5)" />
          <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(SixthSection);