import React, { useEffect, useState } from 'react';
import Slider from 'react-slick';
import './index.scss';

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

function SliderLeft({list,history}) {


  function goDetail(projectName){
    // history.push({
    //   pathname:'/glcc/projects',
    //   state:{projectName:projectName.replace(/ /g,'-')} 
    // })
    window.open(`/glcc/projects?projectName=${projectName.replace(/ /g,'')}`);
  }

  return (
    <Slider {...setting}>
      {
        list && list.map((item, i) => {
          return (
            <div className="news-slide-item" key={i}>
              <div className="slide-title" >
                <h3 className="slide-title-content ellipsis-1 link" onClick={() => { goDetail(item.projectName) }}>{item.projectName}</h3>
                {/* <span className="slide-tag">{item.projectType}</span> */}
              </div>
              <p className="ellipsis-2">{item.projectIntro}</p>
              <span className="project_more" onClick={()=>{goDetail(item.projectName)}}>查看详情<i className="iconfont font-12 icon-xiangyoujiantou"></i></span>
            </div>
          )
        })
      }
    </Slider>
  )
}
export default SliderLeft;

