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 { getTestImage } from "educoder";
import Line from '../Line';


import './index.scss';


let setting = {
  infinite: true,
  dots:true,
  speed: 750,
  slidesToShow: 1,
  slidesToScroll: 1,
  pauseOnDotsHover: true,
  autoplaySpeed: 5000,
  // pauseOnFocus: true,
  centerMode: true,
  centerPadding: "0px",
  autoplay: true,
  arrows: false,
}


function SeventhSection({ main_web_site_url,btnUrl }) {

  const [list, setList] = useState([]);

  useEffect(() => {
    const url = `/home/platform_people.json`;
    axios.get(url, {
      params: {
        limit: 6,
        page: 1
      }
    }).then(result => {
      if (result && result.data) {
        setList(result.data.people);
      }
    }).catch(error => { });
  }, [])

  function goDetail(fake_login) {
    window.open(`${main_web_site_url}/accounts/${fake_login}`);
  }

  return (
    <div className="homepage-main seventh-main">
      <h2 className="homePage-blue-tit">论坛交流</h2>
      <h4 className="homePage-subhead">论坛交流版块通过技术交流、学术探讨等方式，为社区用户提供自主交流空间，实现思维碰撞和智慧融合</h4>
      <Line />
      <div className="clients">
        {
         list&& list.map((item, i) => {
            return (<img className="client link" key={i} src={getTestImage(item.image_url)} onClick={() => { goDetail(item.fake_login) }} alt="images-not_found" />)
          })
        }
        <i className="start-icon iconfont icon-a-shuangyinhao12x"></i>
        <i className="end-icon iconfont icon-a-shuangyinhao12x"></i>

      </div>
      <Slider {...setting}>
        {
         list&& list.map((item, i) => {
            return (<div className="issue-item" key={i} >
              <img className="author-head link" src={getTestImage(item.image_url)} onClick={() => { goDetail(item.fake_login) }} alt="images-not_found" />
              <span className="issue-author link" onClick={() => { goDetail(item.fake_login) }}>{item.name}</span>
              <h3 className="issue-title ellipsis-1">{item.announcement}</h3>
              <p className="issue-content ellipsis-5">{item.content}</p>
              <span className="issue-time">{item.created_time && item.created_time.split(' ')[0]}</span>
            </div>)
          })
        }

      </Slider>

      <Button className="homepage-btn" type="primary" onClick={() => { window.open(btnUrl) }}>参与交流 <i className="iconfont icon-gengduoicon"></i></Button>

    </div>

  )
}

export default memo(SeventhSection);