import React, { memo, useEffect, useState } from 'react';
import { Button } from 'antd';
import axios from 'axios';
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Line from '../Line';

import './index.scss';


let setting = {
  infinite: true,
  speed: 750,
  slidesToShow: 3,
  slidesToScroll: 1,
  pauseOnDotsHover: true,
  autoplaySpeed: 4000,
  centerMode: true,
  centerPadding: "10px",
  // pauseOnFocus: true,
  autoplay: true,
  arrows: false,
  vertical: true,
}


function SecondSection({ second ,main_web_site_url ,btnUrl}) {

  const [leftItem, setLeftItem] = useState({});
  const [list, setList] = useState([]);

  useEffect(() => {
    const url = `/home/platform_communicates.json`;
    axios.get(url, {
      params: {
        limit: 10,
        page: 1
      }
    }).then(result => {
      if (result && result.data) {
        let communicates = result.data.communicates;
        if (communicates.length) {
          setLeftItem(communicates[0]);
          setList(communicates.slice(1, 5));
        }
      }
    }).catch(error => { });
  }, [])

 
  function goDetail(id) {
    window.open(`${main_web_site_url}/forums/${id}/detail`);
  }

  return (
    <React.Fragment>
      <h2 className="homePage-blue-tit">社区动态</h2>
      <h4 className="homePage-subhead">关注开源热点资讯与技术，分享红山观点与活动</h4>
      <Line />
      <div className="homepage-main community-main">

        <div className={`community-left ${second ? "community-active" : ''}`}>
          <div className="community-english">C O M M U N I T Y &nbsp;&nbsp; D Y N A M I C S</div>
          <h3 className="community-star">
            <i className="iconfont icon-quxiaoguanzhu"></i>
            <i className="iconfont icon-quxiaoguanzhu"></i>
            <i className="iconfont icon-quxiaoguanzhu"></i>
            <i className="iconfont icon-quxiaoguanzhu"></i>
            <i className="iconfont icon-quxiaoguanzhu"></i>
          </h3>

          <h4 className="community-left-tit link" onClick={() => { goDetail(leftItem.fake_id) }}>{leftItem.title}</h4>

          <div className="community-left-content ellipsis-8">
            {leftItem.content}
          </div>

          <div className="text-center">
            <Button className="homepage-btn" type="primary" onClick={() => {  window.open(btnUrl)}}>更多动态 <i className="iconfont icon-gengduoicon"></i></Button>
          </div>
        </div>

        <div className="home-second-section-slide">
          <Slider {...setting}>
            {
              list&&list.map((item, i) => {
                return (
                  <div className="news-slide-item" key={i}>
                    <div className="slide-title" >
                      <span className="order-num">{i + 1}</span>
                      <h3 className="slide-title-content ellipsis-1 link" onClick={() => { goDetail(item.fake_id) }}>{item.title}</h3>
                      <span className="slide-tag">{item.tag}</span>
                    </div>
                    <p className="ellipsis-2">{item.content}</p>
                    <span className="news-time">{item.created_time && item.created_time.split(' ')[0]}</span>
                  </div>
                )
              })
            }
          </Slider>
        </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="3" fill="rgba(4,22,112,0.2)" />
          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(4,22,112,0.2)" />
          <use xlinkHref="#wave-path" x="50" y="9" fill="#041670" /> */}
          <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" />
          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" />
          <use xlinkHref="#wave-path" x="50" y="9" fill="#0037AF" />
        </g>
      </svg>
    </React.Fragment>

  )
}

export default memo(SecondSection);