import React, { useEffect, useState } from 'react';
import './style.less';
import { Input, List, Spin } from 'antd';
import topic_activity_default from '@/assets/topic/topic_activity_default.jpg'
import time_icon from '@/assets/topic/timeIcon.png'
import { getImageUrl } from './utils';
import { history } from 'umi';
import { getHomeGraceful } from './Home/service';

const { Search } = Input;

const JobStyleList: React.FC<{}> = () => {
  //graceful data
  const [gracefulList, setGracefulList] = useState<any[]>([]);
  //loading
  const [loading, setLoading] = useState<boolean>(false);
  //page
  const [page, setPage] = useState<number>(1);

  //get graceful
  const getGracefulData = (value: string) => {
    setLoading(true);
    getHomeGraceful({ param: value }).then(async res => {
      if (res?.code == 200) {
        setGracefulList(res?.data);
        setPage(1);
      }
    }).finally(() => {
      setLoading(false);
    })
  }
  //onclick
  const clickTitle = (data: any) => {
    history.push({ pathname: "/highQualityOperation/detail", state: { detail: data } });
  }
  //to home
  const toHome = () => {
    history.push("/highQualityOperation/home");
  }
  //to previous page
  const toPreviousPage = () => {
    setPage((page) => page - 1);
  }
  //to next page
  const toNextPage = () => {
    setPage((page) => page + 1);
  }

  useEffect(() => {
    getGracefulData('');
  }, [])
  return (
    <div className="h-page-container">
      <div className="top-banner">
        <div className="back-home">
          <span onClick={() => toHome()}>返回首页</span>
          {page > 1 && <span onClick={() => toPreviousPage()}>上一页</span>}
          {gracefulList.length != 0 && page < Math.ceil(gracefulList.length / 10) && <span onClick={() => toNextPage()}>下一页</span>}
        </div>
      </div>
      <Spin spinning={loading}>
        <div className="search">
          <span className="text"><span>工作风采</span></span>
          <div className="search-box">
            <Search
              placeholder="输入标题"
              allowClear
              enterButton="搜索"
              style={{ width: 322 }}
              onSearch={getGracefulData}
            />
          </div>
        </div>
        <div className="list-content">
          <List
            itemLayout="horizontal"
            pagination={{
              size: 'small',
              onChange: page => {
                setPage(page);
              },
              current: page,
              showTotal: (total) => `共 ${total} 条`,
              pageSize: 10,
            }}
            dataSource={gracefulList}
            renderItem={item => (
              <List.Item>
                <div className="list-pic">
                  <img src={getImageUrl(item.filePath, topic_activity_default)} />
                  <p className="tit"><span onClick={() => clickTitle(item)}>{item.title}</span></p>
                  <p className="detail">{item.secordTitle}</p>
                  <span className="time"><img src={time_icon} />{item.createTime}</span>
                </div>
              </List.Item>
            )}
          />
        </div>
      </Spin>
    </div>
  )
}

export default JobStyleList;