import React, { Component } from "react";
import "../../recrulistcss/recrulistcss.scss";
import { Tabs, Input } from "antd";
const Search = Input.Search;
class TabheadSekinds extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Choice: props.jobState || "published",
    };
  }

  setdatafunsval = (e) => {
    this.setState({
      keyword: e.target.value,
    });
    console.log("e.target.value" + e.target.value);
  };

  setdatafuns = (value) => {
    this.setState({
      keyword: value,
    });
    console.log("value" + value);
    this.props.keywordCallback(value);
  };

  setChoice = (i) => {
    this.setState({
      Choice: i,
    });
    this.props.jobStateCallback(i);
  };

  render() {
    let { Choice } = this.state;
    const { stateCount } = this.props;
    const {
      published_count,
      rejected_count,
      drafted_count,
      offline_count,
    } = stateCount;
    return (
      <div className="educontent  tabone">
        <div className="edu-back-white pdtabss sortinxdirection pd30 ptabo">
          <div className="sortinxdirection w70s">
            <div
              className={
                Choice === "published"
                  ? "divgreens brodersdiv xiaoshou"
                  : "divgreen brodersdiv xiaoshou"
              }
              onClick={() => this.setChoice("published")}
            >
              {`在线中的职位 ${published_count}`}
            </div>
            <div
              className={
                Choice === "offline"
                  ? "divViolets brodersdiv ml21 xiaoshou"
                  : "divViolet brodersdiv ml21 xiaoshou"
              }
              onClick={() => this.setChoice("offline")}
            >
              {`已下线的职位 ${offline_count}`}
            </div>
            <div
              className={
                Choice === "drafted"
                  ? "divoranges brodersdiv ml21 xiaoshou"
                  : "divorange brodersdiv ml21 xiaoshou"
              }
              onClick={() => this.setChoice("drafted")}
            >
              {`审核中的职位 ${drafted_count}`}
            </div>
            <div
              className={
                Choice === "rejected"
                  ? "divreds brodersdiv ml21 xiaoshou"
                  : "divred brodersdiv ml21 xiaoshou"
              }
              onClick={() => this.setChoice("rejected")}
            >
              {`未通过的职位 ${rejected_count}`}
            </div>
          </div>
          <div>
            <Search
              className={"searchwidth"}
              placeholder="请输入职位"
              enterButton="搜索"
              size="large"
              maxLength={60}
              onInput={(e) => this.setdatafunsval(e)}
              onSearch={(value) => this.setdatafuns(value)}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default TabheadSekinds;
