import React from 'react';
import { Input, InputNumber, Button, Form, Icon, Spin, message, Tabs, Upload } from 'antd';
import { beforeUpload } from '../../../../tools.js';
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/humanResource",
            data: {
                uid:this.props.uid,
                year: this.props.year
            },
            success: function (data) {
                if (data.data) {
                    this.setState({
                        aboveFifty: data.data.aboveFifty,
                        belowThirty: data.data.belowThirty,
                        college: data.data.college,
                        doctor: data.data.doctor,
                        firmAbroad: data.data.firmAbroad,
                        firmCore: data.data.firmCore,
                        firmForeign: data.data.firmForeign,
                        firmInService: data.data.firmInService,
                        firmPartTime: data.data.firmPartTime,
                        firmTemporary: data.data.firmTemporary,
                        firmTotal: data.data.firmTotal,
                        fortyoneToFifty: data.data.fortyoneToFifty,
                        intermediateTitle: data.data.intermediateTitle,
                        juniorTitle: data.data.juniorTitle,
                        master: data.data.master,
                        seniorMechanic: data.data.seniorMechanic,
                        seniorTitle: data.data.seniorTitle,
                        techAbroad: data.data.techAbroad,
                        techCore: data.data.techCore,
                        techForeign: data.data.techForeign,
                        techInService: data.data.techInService,
                        techPartTime: data.data.techPartTime,
                        techTemporary: data.data.techTemporary,
                        techTotal: data.data.techTotal,
                        thirtyoneToThirtyfour: data.data.thirtyoneToThirtyfour,
                        undergraduate: data.data.undergraduate
                    });
                }
            }.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 (values.firmTotal < values.firmInService + values.firmPartTime + values.firmTemporary) {
                message.warning("总体情况的在职人员数、兼职人员数、临时聘用人员数相加小于等于企业职工总数!");
                return;
            };
            if (values.firmTotal < values.techTotal) {
                message.warning("科技人员数小于等于企业职工总数!");
                return;
            };
            if (values.firmInService < values.techInService || values.firmPartTime < values.techPartTime || values.firmTemporary < values.techTemporary ||
                values.firmForeign < values.techForeign || values.firmAbroad < values.techAbroad || values.firmCore < values.techCore) {
                message.warning("科技人员各项人数小于等于企业职工各项人数!");
                return;
            };
            if (values.firmTotal < values.doctor + values.master + values.undergraduate + values.college) {
                message.warning("全体人员结构中学历一栏人数总和小于等于职工人数!");
                return;
            };
            if (values.firmTotal < values.belowThirty + values.thirtyoneToThirtyfour + values.fortyoneToFifty + values.aboveFifty) {
                message.warning("全体人员结构中年龄一栏人数总和小于等于职工人数!");
                return;
            };
            if (!err) {
                this.props.spinState(true);
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + "/api/user/SaveHumanResource",
                    data: {
                        year: this.props.year,
                        aboveFifty: values.aboveFifty,
                        belowThirty: values.belowThirty,
                        college: values.college,
                        doctor: values.doctor,
                        firmAbroad: values.firmAbroad,
                        firmCore: values.firmCore,
                        firmForeign: values.firmForeign,
                        firmInService: values.firmInService,
                        firmPartTime: values.firmPartTime,
                        firmTemporary: values.firmTemporary,
                        firmTotal: values.firmTotal,
                        fortyoneToFifty: values.fortyoneToFifty,
                        intermediateTitle: values.intermediateTitle,
                        juniorTitle: values.juniorTitle,
                        master: values.master,
                        seniorMechanic: values.seniorMechanic,
                        seniorTitle: values.seniorTitle,
                        techAbroad: values.techAbroad,
                        techCore: values.techCore,
                        techForeign: values.techForeign,
                        techInService: values.techInService,
                        techPartTime: values.techPartTime,
                        techTemporary: values.techTemporary,
                        techTotal: values.techTotal,
                        thirtyoneToThirtyfour: values.thirtyoneToThirtyfour,
                        undergraduate: values.undergraduate,
                        rosterUrl: this.state.rosterUrl,
                        socialSecurityUrl: this.state.socialSecurityUrl
                    }
                }).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">
                <p className="hrSituation-title">总体情况</p>
                <div className="clearfix">
                    <span className="hrSituation-span">总数（人）</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="企业职工"
                    >
                        {getFieldDecorator('firmTotal', {
                            initialValue: this.state.firmTotal || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="科技人员"
                    >
                        {getFieldDecorator('techTotal', {
                            initialValue: this.state.techTotal || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item" style={{ width: '50%' }}>
                        <span>其中科技人员占比
                        {(() => {
                                if (!this.props.form.getFieldValue('techTotal') || !this.props.form.getFieldValue('firmTotal')) {
                                    return 0
                                }
                                return (this.props.form.getFieldValue('techTotal') / this.props.form.getFieldValue('firmTotal') * 100).toFixed(2)
                            })()}
                            %</span>
                    </FormItem>
                    <span className="hrSituation-span">在职人员（人）</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="企业职工"
                    >
                        {getFieldDecorator('firmInService', {
                            initialValue: this.state.firmInService || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="科技人员"
                    >
                        {getFieldDecorator('techInService', {
                            initialValue: this.state.techInService || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <span className="hrSituation-span">兼职人员（人）</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="企业职工"
                    >
                        {getFieldDecorator('firmPartTime', {
                            initialValue: this.state.firmPartTime || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="科技人员"
                    >
                        {getFieldDecorator('techPartTime', {
                            initialValue: this.state.techPartTime || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <span className="hrSituation-span">临时聘用人员（人）</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="企业职工"
                    >
                        {getFieldDecorator('firmTemporary', {
                            initialValue: this.state.firmTemporary || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="科技人员"
                    >
                        {getFieldDecorator('techTemporary', {
                            initialValue: this.state.techTemporary || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <span className="hrSituation-span">外籍人员（人）</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="企业职工"
                    >
                        {getFieldDecorator('firmForeign', {
                            initialValue: this.state.firmForeign || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="科技人员"
                    >
                        {getFieldDecorator('techForeign', {
                            initialValue: this.state.techForeign || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <span className="hrSituation-span">留学归国人员（人）</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="企业职工"
                    >
                        {getFieldDecorator('firmAbroad', {
                            initialValue: this.state.firmAbroad || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="科技人员"
                    >
                        {getFieldDecorator('techAbroad', {
                            initialValue: this.state.techAbroad || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <span className="hrSituation-span">干人计划人员（人）</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="企业职工"
                    >
                        {getFieldDecorator('firmCore', {
                            initialValue: this.state.firmCore || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="科技人员"
                    >
                        {getFieldDecorator('techCore', {
                            initialValue: this.state.techCore || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                </div>
                <p className="hrSituation-title">全体人员结构</p>
                <div className="clearfix">
                    <span className="hrSituation-span">学历人数</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="博士"
                    >
                        {getFieldDecorator('doctor', {
                            initialValue: this.state.doctor || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="硕士"
                    >
                        {getFieldDecorator('master', {
                            initialValue: this.state.master || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="本科"
                    >
                        {getFieldDecorator('undergraduate', {
                            initialValue: this.state.undergraduate || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="大专及以下"
                    >
                        {getFieldDecorator('college', {
                            initialValue: this.state.college || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                </div>
                <div className="clearfix">
                    <span className="hrSituation-span">职称人数</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="高级职称"
                    >
                        {getFieldDecorator('seniorTitle', {
                            initialValue: this.state.seniorTitle || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="中级职称"
                    >
                        {getFieldDecorator('intermediateTitle', {
                            initialValue: this.state.intermediateTitle || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="初级职称"
                    >
                        {getFieldDecorator('juniorTitle', {
                            initialValue: this.state.juniorTitle || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="高级技工"
                    >
                        {getFieldDecorator('seniorMechanic', {
                            initialValue: this.state.seniorMechanic || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                </div>
                <div className="clearfix">
                    <span className="hrSituation-span">年龄人数</span>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="30及以下"
                    >
                        {getFieldDecorator('belowThirty', {
                            initialValue: this.state.belowThirty || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="31-34"
                    >
                        {getFieldDecorator('thirtyoneToThirtyfour', {
                            initialValue: this.state.thirtyoneToThirtyfour || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="41-50"
                    >
                        {getFieldDecorator('fortyoneToFifty', {
                            initialValue: this.state.fortyoneToFifty || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                    <FormItem className="half-item"
                        {...formItemLayout}
                        label="50以上"
                    >
                        {getFieldDecorator('aboveFifty', {
                            initialValue: this.state.aboveFifty || null
                        })(
                            <InputNumber />
                            )}
                    </FormItem>
                </div>
                <div className="hrSituation-roster">
                    <Upload
                        name="socialSecurity"
                        action={globalConfig.context + "/techservice/cognizance/upload"}
                        data={{ 'sign': this.props.year + 'socialSecurity' }}
                        beforeUpload={beforeUpload}
                        onChange={(info) => {
                            if (info.file.status !== 'uploading') {
                                console.log(info.file, info.fileList);
                            }
                            if (info.file.status === 'done') {
                                message.success(`${info.file.name} 文件上传成功！`);
                                this.state.socialSecurityUrl = info.file.response.data;
                            } else if (info.file.status === 'error') {
                                message.error(`${info.file.name} 文件上传失败。`);
                            }
                        }}
                    >
                        <Button><Icon type="upload" /> 上传社保文件 </Button>
                    </Upload>
                </div>
                <div className="hrSituation-roster">
                    <Upload
                        name="roster"
                        action={globalConfig.context + "/techservice/cognizance/upload"}
                        data={{ 'sign': this.props.year + 'roster' }}
                        beforeUpload={beforeUpload}
                        onChange={(info) => {
                            if (info.file.status !== 'uploading') {
                                console.log(info.file, info.fileList);
                            }
                            if (info.file.status === 'done') {
                                message.success(`${info.file.name} 文件上传成功！`);
                                this.state.rosterUrl = info.file.response.data;
                            } else if (info.file.status === 'error') {
                                message.error(`${info.file.name} 文件上传失败。`);
                            }
                        }}
                    >
                        <Button><Icon type="upload" /> 上传花名册文件 </Button>
                    </Upload>
                </div>
                <div>
                    <span style={{ color: "red" }}>提示</span>
                    <p>1、总体情况的在职人员数、兼职人员数、临时聘用人员数相加小于等于企业职工总数。</p>
                    <p>2、科技人员数小于等于企业职工总数。</p>
                    <p>3、科技人员各项人数小于等于企业职工各项人数。</p>
                    <p>4、全体人员结构中学历一栏人数总和小于等于职工人数。</p>
                    <p>5、全体人员结构中年龄一栏人数总和小于等于职工人数。</p>
                    <Button style={{ marginTop: "20px" }} 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() {
        const theYear = (new Date()).getFullYear() - 1;
        return (
            <Spin spinning={this.state.loading} className='spin-box'>
                <div className="set-person">
                    <div className="acc-detail">
                        <Tabs defaultActiveKey={String(theYear)} >
                            <Tabs.TabPane tab={theYear} key={theYear}>
                                <PersonFrom year={theYear} spinState={this.spinChange} urlData={this.urlData} />
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={theYear - 1} key={theYear - 1}>
                                <PersonFrom year={theYear - 1} spinState={this.spinChange} urlData={this.urlData} />
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={theYear - 2} key={theYear - 2}>
                                <PersonFrom year={theYear - 2} spinState={this.spinChange} urlData={this.urlData} />
                            </Tabs.TabPane>
                        </Tabs>
                    </div>
                </div>
            </Spin>
        )
    }
});

export default Person;