import React, { Component } from "react";
import CardWrapper from "@/component/CardWrapper";
import InfoHeader from "@/component/InfoHeader";
import LabelInput from "@/ui-component/LabelInput";
import { Row, Col, DatePicker, Input } from "antd";
import { onComponentChange } from "@/util";
import moment from "moment" 

// const RadioGroup = Radio.Group;

export default class WorkInfo extends Component {
    state = {
    };
    
    render() {
        return (
            <div className="work-info">
                <InfoHeader title="工作经历" tip="（填写最近工作经历,没有可留空）"/>

                <CardWrapper>
                    <Row>
                        <Col span={10}>
                            <LabelInput>起止日期</LabelInput>
                            <Col span={11}>
                                <DatePicker 
                                    placeholder="开始日期"
                                    value = {this.props.info.workExperience.startDate && moment(this.props.info.workExperience.startDate, 'YYYY-MM-DD')} 
                                    onChange={onComponentChange('workExperience','startDate',true).bind(this)}
                                />
                            </Col>

                            <Col
                                span={2}
                                style={{
                                    textAlign: "center",
                                    fontSize: "16px"
                                }}
                            >
                                -
                            </Col>

                            <Col span={11}>
                                <DatePicker 
                                    placeholder="结束日期" 
                                    value = {this.props.info.workExperience.endDate && moment(this.props.info.workExperience.endDate, 'YYYY-MM-DD')} 
                                    onChange={onComponentChange('workExperience','endDate',true).bind(this)}
                                />
                            </Col>
                        </Col>

                        <Col span={10} offset={4}>
                            <LabelInput>任职公司</LabelInput>
                            <Input
                                placeholder="请输入任职公司"
                                style={{ width: "100%" }}
                                value={this.props.info.workExperience && this.props.info.workExperience.company}
                                onChange={onComponentChange('workExperience','company',true).bind(this)}
                            />
                        </Col>
                    </Row>

                    <Row>
                        <Col span={10}>
                            <LabelInput>职位</LabelInput>
                            <Input
                                placeholder="请输入职位"
                                style={{ width: "100%" }}
                                value={this.props.info.workExperience && this.props.info.workExperience.position}
                                onChange={onComponentChange('workExperience','position',true).bind(this)}
                            />
                        </Col>

                        <Col span={10} offset={4}>
                            <LabelInput>税前月薪</LabelInput>
                            <Input
                                placeholder="请输入税前月薪"
                                style={{ width: "100%" }}
                                value={this.props.info.workExperience && this.props.info.workExperience.sally}
                                onChange={onComponentChange('workExperience','sally',true).bind(this)}
                            />
                        </Col>
                    </Row>

                    <Row>
                        <Col span={10}>
                            <LabelInput>离职原因</LabelInput>
                            <Input
                                placeholder="请输入离职原因"
                                style={{ width: "100%" }}
                                value={this.props.info.workExperience && this.props.info.workExperience.reason}
                                onChange={onComponentChange('workExperience','reason',true).bind(this)}
                            />
                        </Col>

                        <Col span={10} offset={4}>
                            <LabelInput>证明人及电话</LabelInput>

                            <Col span={8}>
                                <Input 
                                    placeholder="证明人" 
                                    value={this.props.info.workExperience && this.props.info.workExperience.witness}
                                    onChange={onComponentChange('workExperience','witness',true).bind(this)}
                                />
                            </Col>

                            <Col span={14} offset={2}>
                                <Input 
                                    placeholder="电话" 
                                    value={this.props.info.workExperience && this.props.info.workExperience.witnessPhone}
                                    onChange={onComponentChange('workExperience','witnessPhone',true).bind(this)}
                                />
                            </Col>
                        </Col>
                    </Row>
                </CardWrapper>
            </div>
        );
    }
}
