import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";
import "../../recrulistcss/recrulistcss.scss";
import { Tabs } from "antd";
import axios from "axios";
import qs from "qs";
import Certifiedprofessional from "../../../modals/Certifiedprofessional";
const { TabPane } = Tabs;
class Tabrecru extends Component {
  constructor(props) {
    super(props);
    const { tab } = qs.parse(this.props.location.search.substr(1));
    this.state = {
      defaultActiveKeys: tab || 0,
      certifiedprofessionalModalVisible: false,
    };
  }
  componentDidMount() {
    this.fetchResumeDetail();
  }
  callback = (key) => {
    this.setState({
      defaultActiveKeys: key + "",
    });
    this.props.callbacks(key + "");
  };
  fetchResumeDetail = () => {
    const url = `/users/resume.json`;
    axios
      .get(url)
      .then((response) => {
        if (response.data.status !== -2 && response.data) {
          this.setState({ hasResume: true });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };
  handleCertifiedprofessionalModalVisible = (flag) => {
    this.setState({ certifiedprofessionalModalVisible: flag });
  };
  render() {
    let { defaultActiveKeys } = this.state;
    let tabs = defaultActiveKeys + "";
    //发布职位权限
    let authJobs = false;
    let user = {
      admin: false,
      business: false,
      is_teacher: false,
      professional_certification: false,
      identity: "", //专业人士 identity=professional
    };

    const {
      admin,
      business,
      is_teacher,
      professional_certification,
      identity,
    } = this.props.user || user;

    authJobs = admin || business || is_teacher || identity === "professional";

    const GoResumeButton = () => {
      return (
        <div className="sortinxdirection iconcolor lh45s xiaoshou">
          <i className="iconfont icon-xinjianjianliwodejianli font-16  mr7"></i>
          <p className="lh45s font-16">
            {this.state.hasResume ? (
              <a
                onClick={() => {
                  if (!this.props.checkIfLogin()) {
                    this.props.showLoginDialog();
                  } else if (
                    this.props.user &&
                    !this.props.user.profile_completed
                  ) {
                    this.props.showProfileCompleteDialog();
                  } else {
                    this.props.history.push(
                      "/recruitment/resumedetails?from=recruitment"
                    );
                  }
                }}
                style={{ color: "#4CADFF" }}
              >
                我的简历
              </a>
            ) : (
              <a
                onClick={() => {
                  if (!this.props.checkIfLogin()) {
                    this.props.showLoginDialog();
                  } else if (
                    this.props.user &&
                    !this.props.user.profile_completed
                  ) {
                    this.props.showProfileCompleteDialog();
                  } else {
                    this.props.history.push("/recruitment/addresume");
                  }
                }}
                style={{ color: "#4CADFF" }}
              >
                新建简历
              </a>
            )}
          </p>
        </div>
      );
    };
    const AddJobButton = () => {
      return (
        <div className="sortinxdirection iconcolor lh45s xiaoshou">
          <i className="iconfont icon-fabuzhiwei font-16  mr7"></i>
          <p className="lh45s font-16">
            <a
              style={{ color: "#4CADFF" }}
              onClick={() => {
                if (
                  (is_teacher && !professional_certification) ||
                  (identity === "professional" && !professional_certification)
                ) {
                  this.setState({
                    certifiedprofessionalModalVisible: true,
                  });
                } else {
                  this.props.history.push("/recruitment/addjob");
                }
              }}
            >
              发布职位
            </a>
          </p>
        </div>
      );
    };
    return (
      <div className="educontent  tabone mt22">
        {tabs === "0" ? (
          <style>
            {`
								.pdtab .ant-tabs-nav .ant-tabs-ink-bar{
								width: 37px !important;
								left: 14px;
								}
							`}
          </style>
        ) : (
          <style>
            {`
								.pdtab .ant-tabs-nav .ant-tabs-ink-bar{
							  width: 69px !important;
                	left: 14px;
								}
							`}
          </style>
        )}
        <div className="edu-back-white pdtab sortinxdirection">
          <Tabs activeKey={tabs} onChange={this.callback}>
            <TabPane tab="全部" key="0"></TabPane>
            {authJobs ? <TabPane tab="我发布的" key="1"></TabPane> : null}
            <TabPane tab="我投递的" key="2"></TabPane>
          </Tabs>
          <div className="w50s xaxisreverseorder">
            {tabs === "0" ? (
              authJobs ? (
                <Fragment>
                  <GoResumeButton />
                  <div style={{ marginRight: 50 }}>
                    <AddJobButton />
                  </div>
                </Fragment>
              ) : (
                <GoResumeButton />
              )
            ) : tabs === "1" ? (
              <AddJobButton />
            ) : (
              <GoResumeButton />
            )}
          </div>
        </div>
        <Certifiedprofessional
          {...this.props}
          mydisplay={this.state.certifiedprofessionalModalVisible}
          occupation={2}
          ModalCancelsy={() => {
            this.handleCertifiedprofessionalModalVisible(false);
          }}
        />
      </div>
    );
  }
}

export default Tabrecru;
