import React, { useEffect, useState } from 'react';
import './style.less';
import { Input, List, Spin } from 'antd';
import { formatTime } from './utils';
import { history } from 'umi';
import { getClassroomList } from './Home/service';

const { Search } = Input;

const ClassroomList: React.FC<{}> = () => {
  //project data
  const [classroomList, setClassroomList] = useState<any[]>([]);
  //loading
  const [loading, setLoading] = useState<boolean>(false);
  //page
  const [page, setPage] = useState<number>(1);

  //get project
  const getClassroomData = (value: string) => {
    setLoading(true);
    getClassroomList({ param: value }).then(res => {
      if (res?.code == 200) {
        setClassroomList(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(() => {
    getClassroomData('');
  }, [])

  return (
    <div className="h-page-container">
      <div className="top-banner">
        <div className="back-home">
          <span onClick={() => toHome()}>返回首页</span>
          {page > 1 && <span onClick={() => toPreviousPage()}>上一页</span>}
          {classroomList.length != 0 && page < Math.ceil(classroomList.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={getClassroomData}
            />
          </div>
        </div>
        <div className="list-content">
          <List
            itemLayout="horizontal"
            pagination={{
              size: 'small',
              onChange: page => {
                setPage(page);
              },
              current: page,
              showTotal: (total) => `共 ${total} 条`,
              pageSize: 10,
            }}
            dataSource={classroomList}
            renderItem={item => (
              <List.Item>
                <div className="list-box">
                  <p onClick={() => clickTitle(item)}>{item.title}</p>
                  <span>{formatTime(item.createTime, 'YYYY-MM-DD')}</span>
                </div>
              </List.Item>
            )}
          />
        </div>
      </Spin>
    </div>
  )
}

export default ClassroomList;