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

import { techFieldList } from '../../DicTechFieldList';

const TechFrom = Form.create()(React.createClass({
    getInitialState() {
        return {
            loading: false,
            techzoneArr: [],
            havetechzone: [],
            skillArr: [],
            haveskill: []
        };
    },
    getData() {
        this.props.spinState(true);
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/api/user/job",
            success: function (data) {
                if (data.data) {
                    this.setState({
                        id: data.data.id,
                        techpeople: data.data.technicalPeopleNum,
                        techField: data.data.searchAreaCategory ? data.data.searchAreaCategory.split(",") : [],
                        haveskill: data.data.specialty ? data.data.specialty.split(",") : []
                    });
                };
            }.bind(this),
        }).always(function () {
            this.props.spinState(false);
        }.bind(this));
    },
    componentWillMount() {
        this.getData();
    },
    handleSubmit(e) {
        e.preventDefault();
        let specialty = this.state.haveskill.join(",");
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.spinState(true);
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + "/api/user/orgTech",
                    data: {
                        "id": this.state.id,
                        "technicalPeopleNum": values.techpeople,
                        "searchAreaCategory": values.techField ? values.techField.join(',') : '',
                        "specialty": specialty
                    }
                }).done(function (data) {
                    if (!data.error.length) {
                        message.success('保存成功！');
                        this.getData();
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this)).always(function () {
                    this.props.spinState(false);
                }.bind(this));
            }
        });
    },
    addskill(e) {
        let _me = this;
        let theSkillArr = _me.state.haveskill;
        let theskill = _me.props.form.getFieldValue('skill');
        if (theskill !== undefined) {
            if (_me.state.haveskill.length > 0) {
                let thebool = true;
                _me.state.haveskill.map(function (item, i) {
                    if (item === theskill) {
                        thebool = false
                    };
                });
                if (thebool) {
                    theSkillArr = _me.state.haveskill.concat(theskill);
                }
            } else if (_me.state.haveskill.length === 0) {
                theSkillArr = _me.state.haveskill.concat(theskill);
            };
            this.setState({
                haveskill: theSkillArr
            });
        };
    },
    deleteskill(e) {
        let _me = this.state;
        _me.haveskill.map(function (item, i) {
            if (item === e) {
                _me.haveskill.splice(i, 1);
            }
        });
    },
    render() {
        const FormItem = Form.Item;
        const Option = Select.Option;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 12 },
        };
        const _me = this;
        return (
            <Form horizontal onSubmit={this.handleSubmit} className="tech-form">
                <FormItem
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 6 }}
                    label="技术人员数量"
                >
                    {getFieldDecorator('techpeople', {
                        initialValue: this.state.techpeople
                    })(
                        <InputNumber />
                        )}
                    <span>人</span>
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="专业领域"
                >
                    {getFieldDecorator('techField', {
                        initialValue: this.state.techField
                    })(
                        <Cascader placeholder="请选择专业领域" options={techFieldList} style={{ width: 380 }} />
                        )}
                </FormItem>
                <FormItem
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    label="擅长能力"
                >
                    {getFieldDecorator('skill')(
                        <div>
                            擅长 <Input />的研究
                            <Button type="primary" onClick={this.addskill}>添加</Button>
                        </div>
                    )}
                </FormItem>
                <div className="set-explain">
                    {
                        this.state.haveskill.map(function (item, i) {
                            return <Tag key={item} closable onClose={_me.deleteskill.bind(this, item)}>{item}</Tag>
                        }.bind(this))
                    }
                </div>
                <FormItem wrapperCol={{ span: 12, offset: 3 }}>
                    <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                </FormItem>
            </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-tech">
                    <div className="acc-title">
                        <p><span>完善研究领域与擅长能力可加入平台专家，承接技术难题！</span></p>
                    </div>
                    <TechFrom spinState={this.spinChange} />
                </div>
            </Spin>
        )
    }
});

export default Person;