import React from "react";
import styled from "styled-components";
import { Row, Col, Tooltip } from "antd";
import { TextButton } from "../util/Button";

const Box = styled(Row)`
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  margin: 0 auto;
`;
const FlexBox = ({ children }) => (
  <Box type="flex" justify="space-around" align="middle">
    {children}
  </Box>
);
const FlexRow = ({ children }) => (
  <Row type="flex" justify="space-around" align="middle">
    {children}
  </Row>
);

const Edu = styled.div`
  div {
    font-size: 12px;
    color: rgba(136, 136, 136, 1);
  }
`;

const Download = ({ onClick }) => {
  if (onClick) {
    return (
      <TextButton color="rgba(66,179,102,1)" onClick={onClick}>
        下载简历
      </TextButton>
    );
  }
  return (
    <Tooltip title="求职者未上传简历">
      <TextButton color="rgba(136,136,136,1)">下载简历</TextButton>
    </Tooltip>
  );
};

export default ({ data }) => {
  return (
    <FlexBox>
      <Col span={3}>{data.name}</Col>
      <Col span={3}>{data.job}</Col>
      <Col span={2}>{data.sex}</Col>
      <Col span={2}>{data.age}</Col>
      <Col span={2}>{data.exp ? data.exp + "年" : "-"}</Col>
      <Col span={4}>
        <Edu>
          {data.edu_1}
          <div>({data.edu_2})</div>
        </Edu>
      </Col>
      <Col span={4}>{data.time}</Col>
      <Col span={4}>
        <FlexRow>
          <TextButton color="rgba(76,172,255,1)" onClick={data.pfFunc}>
            查看
          </TextButton>
          <Download onClick={data.dlFunc}></Download>
        </FlexRow>
      </Col>
    </FlexBox>
  );
};