import React from 'react';
import { Input, Button, Form, Select, Icon, Spin, InputNumber, Tag } from 'antd';
import './tech.less';

import TechSelect from './techSelect.jsx';

const FormItem = Form.Item;
const Option = Select.Option;

const edulvlArr = ["高中", "大专", "本科", "硕士研究生", "博士研究生"];

const TechFrom = Form.create()(React.createClass({
    getInitialState() {
        return {
            loading: false,
            techzoneArr: [],
            havetechzone: [],
            skillArr: [],
            haveskill: []
        };
    },
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    },
    techzone(x, y, z) {
        this.state.selecttech = x + '/' + y + '/' + z;
    },
    addtechzone(e) {
        let _me = this;
        let newArr = _me.state.techzoneArr;
        if (this.state.selecttech !== undefined) {
            if (_me.state.techzoneArr.length > 0) {
                let thebool = true;
                _me.state.techzoneArr.map(function (item, i) {
                    if (item === _me.state.selecttech) {
                        thebool = false
                    };
                });
                if (thebool) {
                    newArr = _me.state.techzoneArr.concat(_me.state.selecttech);
                }
            } else if (_me.state.techzoneArr.length === 0) {
                newArr = _me.state.techzoneArr.concat(_me.state.selecttech);
            }
            this.setState({
                techzoneArr: newArr
            });
        };
    },
    deletetechzone(e) {
        let _me = this.state;
        let newArr = [];
        _me.techzoneArr.map(function (item, i) {
            if (item !== e) {
                newArr.push(item);
            }
        });
        this.setState({
            techzoneArr:newArr
        })
    },
    addskill(e) {
        let _me = this;
        let theskill = _me.props.form.getFieldValue('skill')
        if (theskill !== undefined) {
            if (_me.state.skillArr.length > 0) {
                let thebool = true;
                _me.state.skillArr.map(function (item, i) {
                    if (item === theskill) {
                        thebool = false
                    };
                });
                if (thebool) {
                    _me.state.skillArr.push(theskill);
                }
            } else if (_me.state.skillArr.length === 0) {
                _me.state.skillArr.push(theskill);
            }
            this.setState({
                haveskill: _me.state.skillArr
            });
        };
        console.log(_me.state.skillArr);
    },
    deleteskill(e) {
        let _me = this.state;
        _me.skillArr.map(function (item, i) {
            if (item === e) {
                _me.skillArr.splice(i, 1);
            }
        });
        console.log(_me.skillArr);
    },
    render() {
        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')(
                        <div>
                            <InputNumber /><span>人</span>
                        </div>
                    )}
                </FormItem>
                <FormItem
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    label="重点研究领域"
                    >
                    {getFieldDecorator('techzone')(
                        <div>
                            <TechSelect techzone={this.techzone} />
                            <Button type="primary" onClick={this.addtechzone}>添加</Button>
                        </div>
                    )}
                </FormItem>
                <div className="set-explain">
                    {
                        this.state.techzoneArr.map(function (item, i) {
                            return <Tag key={i} closable afterClose={_me.deletetechzone.bind(this, item)}>{item}</Tag>
                        }.bind(this))
                    }
                </div>
                <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
        };
    },
    render() {
        return (
            <Spin spinning={this.state.loading} className='spin-box'>
                <div className="set-tech">
                    <div className="acc-title">
                        <p><span>完善研究领域与擅长能力可加入平台专家，承接技术难题！</span></p>
                    </div>
                    <TechFrom />
                </div>
            </Spin>
        )
    }
});

export default Person;