import React, { useState, useCallback } from "react";
import styled from "styled-components";
import { Pagination } from "antd";
import Header from "../jobAppliers/Header";
import List from "../jobAppliers/List";
import Loading from "../util/Loading";
import { getAppliers } from "../data/getAppliers";
import Nav from "../util/Nav";
import { useLoaded } from "../util/hooks";
import { Link } from "react-router-dom";

const GreyBg = styled.div`
  width: 100%;
  background: rgba(245, 246, 249, 1);
  min-height: 100vh;
`;
const Paper = styled.div`
  width: 1200px;
  padding: 30px;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  margin: 0 auto;
  min-height:500px;
`;

export default ({ jobId, history }) => {
  console.log("render");
  const [page, setPage] = useState(1);
  const { isLoaded, data } = useLoaded(getAppliers, [jobId, page, history]);
  const back = useCallback(() => {
    history.push("/recruitment?tab=1&jobstate=published");
  }, []);
  let appliers, count;
  if (data) {
    [appliers, count] = data;
  }
  return (
    <React.Fragment>
      <GreyBg>
        <Nav breadcrunmb={[<Link to="/recruitment">职位管理</Link>, "投递详情"]} back={back} />
        <Paper>
          <Header></Header>
          {!isLoaded ? (
            <div style={{ height: "300px" }}>
              <Loading />
            </div>
          ) : (
              <List data={appliers}></List>
            )}
        </Paper>
        {!isLoaded ? null : (count <= 10 ? null : <Pagination
          current={page}
          pageSize={10}
          onChange={setPage}
          total={count}
          style={{ textAlign: "center", margin: "20px auto" }}
        />)
        }

      </GreyBg>
    </React.Fragment>
  );
};
