import React from "react";
import GroupCard from "../../../components/groupCard";
import { Col, Row, Tooltip } from "antd";
import { inject, observer } from "mobx-react";
import "./index.less";

@inject("archivesStore")
@observer
export default class BaseForm extends React.Component {

  componentWillMount() {
    const { archivesStore: { getBaseForm } } = this.props;
    getBaseForm(this.props.employeeId);
  }

  render() {
    const { archivesStore: { baseFormData } ,record} = this.props;
    return (
      <div className="socialFormWrapper">
        <GroupCard title="基本信息">
          <Row>
            <Col span={4} className="formItem borderR-none borderB-none">姓名:</Col>
            <Col span={4} className="formItem borderR-none borderB-none">
              <Tooltip title={baseFormData.username}>
                <span>{baseFormData.username}</span>
              </Tooltip>
            </Col>
            <Col span={4} className="formItem borderR-none borderB-none">部门:</Col>
            <Col span={4} className="formItem borderR-none borderB-none">
              <Tooltip title={baseFormData.department}>
                <span>{baseFormData.department}</span>
              </Tooltip>
            </Col>
            <Col span={4} className="formItem borderR-none borderB-none">岗位:</Col>
            <Col span={4} className="formItem borderB-none">
              <Tooltip title={baseFormData.position}>
                <span>{baseFormData.position}</span>
              </Tooltip>
            </Col>
          </Row>

          <Row>
            <Col span={4} className="formItem borderR-none">入职日期:</Col>
            <Col span={4} className="formItem borderR-none">{baseFormData.hiredate}</Col>
            <Col span={4} className="formItem borderR-none">手机号:</Col>
            <Col span={4} className="formItem borderR-none">
              <Tooltip title={baseFormData.telephone}>
                <span>{baseFormData.telephone}</span>
              </Tooltip>
            </Col>
            <Col span={4} className="formItem borderR-none">合同到期日期:</Col>
            <Col span={4} className="formItem">{baseFormData.dimissionDate}</Col>
          </Row>
        </GroupCard>
        <GroupCard title="个税扣缴义务人">
          <Row>
            <Col span={6} className="formItem borderR-none">个税扣缴义务人：</Col>
            <Col span={6} className="formItem">{record.paymentOrganizationName}</Col>
          </Row>
        </GroupCard>
      </div>
    );
  }
}