import React from 'react';
import { Input, InputNumber, Button, Form, Icon, Spin, message } from 'antd';
import './person.less';
import './hrSituation.less'
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

const PersonFrom = Form.create()(React.createClass({
    getData() {
        this.props.spinState(true);
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/api/user/member",
            success: function (data) {
                if (data.data) {

                }
            }.bind(this),
        }).always(function () {
            this.props.spinState(false);
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
        };
    },
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.spinState(true);
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + "/api/user/userInfo",
                    data: {
                        "nickname": values.nickname,
                        "residenceProvince": cmbP,
                        "residenceCity": cmbC,
                        "residenceArea": cmbA,
                        "personPortraitUrl": this.state.avatarUrlData,
                        "lifePhotoUrl": lifePhotoUrl,
                        "personalProfile": values.intro,
                        "email": values.email,
                        "fixedTelArea": this.state.fixTelArea,
                        "fixedTel": this.state.fixTel,
                        "fixedTelExtension": this.state.fixTelExtension,
                        "qq": values.qq,
                        "postalAddress": values.address,
                        "postcode": values.postcode
                    }
                }).done(function (data) {
                    if (!data.error.length) {
                        message.success('保存成功！');
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this)).always(function () {
                    this.props.spinState(false);
                }.bind(this));
            }
        });
    },
    componentWillMount() {
        this.getData();
    },
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
        };
        const FormItem = Form.Item;
        return (
            <Form onSubmit={this.handleSubmit} className="hrSituation-form clearfix">
                <p className="hrSituation-title">总体情况</p>
                <span className="hrSituation-span">总数（人）</span>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="企业职工"
                >
                    {getFieldDecorator('firmTotal', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <FormItem className="half-item"
                style={{marginRight:"50%"}}
                    {...formItemLayout}
                    label="科技人员"
                >
                    {getFieldDecorator('techTotal', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <span className="hrSituation-span">在职人员（人）</span>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="企业职工"
                >
                    {getFieldDecorator('firmInService', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="科技人员"
                >
                    {getFieldDecorator('techInService', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <span className="hrSituation-span">兼职人员（人）</span>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="企业职工"
                >
                    {getFieldDecorator('firmPartTime', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="科技人员"
                >
                    {getFieldDecorator('techPartTime', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <span className="hrSituation-span">临时聘用人员（人）</span>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="企业职工"
                >
                    {getFieldDecorator('firmPartTime', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="科技人员"
                >
                    {getFieldDecorator('techPartTime', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <span className="hrSituation-span">外籍人员（人）</span>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="企业职工"
                >
                    {getFieldDecorator('firmForeign', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <FormItem className="half-item"
                    {...formItemLayout}
                    label="科技人员"
                >
                    {getFieldDecorator('techForeign', {
                        initialValue: this.state.nickname || null
                    })(
                        <InputNumber />
                        )}
                </FormItem>
                <div className="clearfix" style={{ paddingLeft: '3.3%' }}>
                    <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                </div>
            </Form >
        );
    },
}));

const Person = React.createClass({
    getInitialState() {
        return {
            loading: false
        };
    },
    spinChange(e) {
        this.setState({
            loading: e
        });
    },
    render() {
        return (
            <Spin spinning={this.state.loading} className='spin-box'>
                <div className="set-person">
                    <div className="acc-detail">
                        <p className="acc-title">人力状况</p>
                        <PersonFrom spinState={this.spinChange} />
                    </div>
                </div>
            </Spin>
        )
    }
});

export default Person;