import React, { useEffect, useState } from 'react';
import { Button, Col, Row } from 'antd';
import axios from 'axios';
import './index.scss';


function News() {

  const [list, setList] = useState([]);
  useEffect(() => {
    const url = `/topics.json?topic_type=glcc_news&limit=5`;
    axios.get(url).then(result => {
      if (result && result.data) {
        setList(result.data.topics);
      }
    }).catch(error => { })
  },[])

  return (
    <div className="news">
      <div className="glcc-content">
        <h3 className="glcc-tit">新闻中心</h3>
        <div className="news-content">

          {list.length ? <div className="main-news">
            <h3 className="news-tit ellipsis-2">{list[0].title}</h3>
            <div className="news-date">{list[0].created_time && list[0].created_time.split(' ')[0]}</div>
            <Button type="link" ><a target="_black" href={list[0].url}>查看详情</a></Button>
          </div> : ''}

          <div className="news-box">
            {
              list.map((item, i) => {
                return i ? <div className="news-item" key={item.id}>
                  <h3 className="news-tit ellipsis-2">{item.title}</h3>
                  <div className="news-content">
                    <div className="news-date">{item.created_time && item.created_time.split(' ')[0]}</div>
                    <Button type="link"><a target="_black" href={item.url}>查看详情</a></Button>
                  </div>
                </div> : ''

              })
            }

          </div>
        </div>
      </div>
    </div>
  )
}
export default News;