import React from 'react';
import { Icon, Form, Button, Input, message, InputNumber, DatePicker, Select, Checkbox, Cascader, Table, Radio } from 'antd';
import './techProduct.less';
import { getProvince, areaSelect } from '../../NewDicProvinceList';
import { industryList, scaleList, companyType } from '../../dataDic';
import { techFieldList } from '../../DicTechFieldList';
import moment from 'moment';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

const CompanyDetail = Form.create()(React.createClass({
    loadInfoData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/basic/info",
        }).done(function (data) {
            let thisdata = data.data;
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                };
                return;
            };
            this.setState({
                data: thisdata,
                id: thisdata.id,
                uid: thisdata.uid,
                hid: thisdata.hid,
                unitName: thisdata.unitName,
                postalAddress: thisdata.postalAddress,
                postcode: thisdata.postcode,
                firstMobile: thisdata.firstMobile,
                firstContacts: thisdata.firstContacts,
                contactsFixedTel: thisdata.contactsFixedTel,
                contactsFax: thisdata.contactsFax,
                legalPersonTel: thisdata.legalPersonTel,
                legalPersonFax: thisdata.legalPersonFax,
                legalPersonEmail: thisdata.legalPersonEmail,
                registeredCapital: thisdata.registeredCapital,
                registrationTime: thisdata.registrationTime,
                legalPerson: thisdata.legalPerson,
                legalPersonIdCard: thisdata.legalPersonIdCard,
                orgCode: thisdata.orgCode,
                ratepayCode: thisdata.ratepayCode,
                industry: thisdata.industry,
                enterpriseScale: thisdata.enterpriseScale,
                foreignInvestment: thisdata.foreignInvestment,
                taxAuthority: thisdata.taxAuthority,
                ratepayMethod: thisdata.ratepayMethod,
                listed: thisdata.listed,
                listedDate: thisdata.listedDate,
                listedType: thisdata.listedType,
                stockCode: thisdata.stockCode,
                highTechZone: thisdata.highTechZone,
                highTechName: thisdata.highTechName,
                riskInvestment: thisdata.riskInvestment,
                businessScope: thisdata.businessScope,
                firmTotal: thisdata.firmTotal,
                techTotal: thisdata.techTotal,
                listedDateFormattedDate: thisdata.listedDateFormattedDate,
                registrationTimeFormattedDate: thisdata.registrationTimeFormattedDate,
                address: [thisdata.licenceProvince, thisdata.licenceCity, thisdata.licenceArea],
                field: thisdata.field ? thisdata.field.split(',') : [],
                registerType: thisdata.registerType ? thisdata.registerType.split(',') : []
            });
        }.bind(this)).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadHumanData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/basic/listNature",
        }).done(function (data) {
            let theTableData = [];
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                };
                return;
            };
            data.data.map(function (item) {
                theTableData.push({
                    id: item.id,
                    uid: item.uid,
                    type: item.type,
                    name: item.name,
                    idNumber: item.idNumber,
                    investment: item.investment
                });
            });
            this.setState({
                humanTableData: theTableData
            });
        }.bind(this)).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadLegalData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/basic/listLegalPerson",
        }).done(function (data) {
            let theTableData = [];
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                };
                return;
            };
            data.data.map(function (item) {
                theTableData.push({
                    id: item.id,
                    uid: item.uid,
                    type: item.type,
                    name: item.name,
                    orgCode: item.orgCode,
                    investment: item.investment
                });
            });
            this.setState({
                legalTableData: theTableData
            });
        }.bind(this)).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            industryOption: [],
            scaleOption: [],
            humanTableData: [],
            legalTableData: [],
            humanColumns: [
                {
                    title: '公民类型',
                    dataIndex: 'type',
                    key: 'type',
                    width: '130px',
                    render: (text, record, index) => {
                        return <Select value={record.type} onChange={(e) => { record.type = e; this.setState({ humanTableData: this.state.humanTableData }); }}>
                            <Select.Option value="0">中国公民</Select.Option>
                            <Select.Option value="1">外籍公民</Select.Option>
                        </Select>
                    }
                }, {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                    render: (text, record, index) => {
                        return <Input value={record.name} onChange={(e) => { record.name = e.target.value; this.setState({ humanTableData: this.state.humanTableData }); }} />
                    }
                }, {
                    title: '身份证(护照)号',
                    dataIndex: 'idNumber',
                    key: 'idNumber',
                    render: (text, record, index) => {
                        return <Input value={record.idNumber} onChange={(e) => { record.idNumber = e.target.value; this.setState({ humanTableData: this.state.humanTableData }); }} />
                    }
                }, {
                    title: '投资额（万元）',
                    dataIndex: 'investment',
                    key: 'investment',
                    render: (text, record, index) => {
                        return <InputNumber min={0} max={999999} step={0.01} value={record.investment} onChange={(e) => { record.investment = e; this.setState({ humanTableData: this.state.humanTableData }); }} />
                    }
                }
            ],
            legalColumns: [
                {
                    title: '法人类型',
                    dataIndex: 'type',
                    key: 'type',
                    width: '130px',
                    render: (text, record, index) => {
                        return <Select value={record.type} onChange={(e) => { record.type = e; this.setState({ legalTableData: this.state.legalTableData }); }}>
                            <Select.Option value="0">中国企业法人</Select.Option>
                            <Select.Option value="1">外籍企业法人</Select.Option>
                        </Select>
                    }
                }, {
                    title: '名称',
                    dataIndex: 'name',
                    key: 'name',
                    render: (text, record, index) => {
                        return <Input value={record.name} onChange={(e) => { record.name = e.target.value; this.setState({ legalTableData: this.state.legalTableData }); }} />
                    }
                }, {
                    title: '组织机构代码或统一社会信用代码',
                    dataIndex: 'orgCode',
                    key: 'orgCode',
                    render: (text, record, index) => {
                        return <Input value={record.orgCode} onChange={(e) => { record.orgCode = e.target.value; this.setState({ legalTableData: this.state.legalTableData }); }} />
                    }
                }, {
                    title: '投资额（万元）',
                    dataIndex: 'investment',
                    key: 'investment',
                    render: (text, record, index) => {
                        return <InputNumber min={0} max={999999} step={0.01} value={record.investment} onChange={(e) => { record.investment = e; this.setState({ legalTableData: this.state.legalTableData }); }} />
                    }
                }
            ],
            humanSelectedRowKeys: [],
            humanSelectedRows: [],
            legalSelectedRowKeys: [],
            legalSelectedRows: []
        };
    },
    handleSubmit(e) {
        this.setState({
            loading: true
        });
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + "/api/user/basic/disposeInfo",
                    data: {
                        id: this.state.data.id,
                        uid: this.state.data.uid,
                        hid: this.state.data.hid,
                        unitName: values.unitName,
                        licenceProvince: values.address[0],
                        licenceCity: values.address[1],
                        licenceArea: values.address[2],
                        postalAddress: values.postalAddress,
                        postcode: values.postcode,
                        firstMobile: values.firstMobile,
                        firstContacts: values.firstContacts,
                        contactsFixedTel: values.contactsFixedTel,
                        contactsFax: values.contactsFax,
                        legalPersonTel: values.legalPersonTel,
                        legalPersonFax: values.legalPersonFax,
                        legalPersonEmail: values.legalPersonEmail,
                        registeredCapital: values.registeredCapital,
                        legalPerson: values.legalPerson,
                        legalPersonIdCard: values.legalPersonIdCard,
                        orgCode: values.orgCode,
                        ratepayCode: values.ratepayCode,
                        industry: values.industry,
                        enterpriseScale: values.enterpriseScale,
                        registerType: values.registerType ? values.registerType.join(',') : '',
                        foreignInvestment: values.foreignInvestment,
                        field: values.field ? values.field.join(',') : '',
                        taxAuthority: values.taxAuthority,
                        ratepayMethod: values.ratepayMethod,
                        listed: values.listed,
                        listedType: values.listedType ? Number(values.listedType) : null,
                        stockCode: values.stockCode,
                        highTechZone: values.highTechZone,
                        highTechName: values.highTechName,
                        riskInvestment: values.riskInvestment,
                        businessScope: values.businessScope,
                        firmTotal: values.firmTotal,
                        techTotal: values.techTotal,
                        listedDateFormattedDate: values.listedDate ? values.listedDate.format("YYYY-MM-DD") : '',
                        registrationTimeFormattedDate: values.registrationTime ? values.registrationTime.format("YYYY-MM-DD") : ''
                    }
                }).done(function (data) {
                    if (!data.error.length) {
                        message.success('保存成功！');
                        this.setState({
                            loading: false
                        });
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this));
            }
        });
    },
    componentWillMount() {
        let _me = this;
        industryList.map(function (item) {
            _me.state.industryOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
        scaleList.map(function (item) {
            _me.state.scaleOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
        this.loadHumanData();
        this.loadLegalData();
        this.loadInfoData();
    },
    humanRemove() {
        let deletedIds = [];
        for (let idx = 0; idx < this.state.humanSelectedRows.length; idx++) {
            let rowItem = this.state.humanSelectedRows[idx];
            if (rowItem.id) {
                deletedIds.push(rowItem.id)
            }
        };
        this.setState({
            loading: deletedIds.length > 0
        });
        if (deletedIds.length) {
            $.ajax({
                url: globalConfig.context + '/api/user/basic/deleteNature',
                method: 'post',
                data: {
                    ids: deletedIds
                }
            }).done((res) => {
                if (!res.error.length) {
                    message.success("删除成功");
                    this.state.humanSelectedRowKeys.sort((a, b) => { return b - a });
                    for (let idx = 0; idx < this.state.humanSelectedRowKeys.length; idx++) {
                        let dataIndex = this.state.humanSelectedRowKeys[idx];
                        this.state.humanTableData.splice(dataIndex, 1);
                    };
                    this.setState({
                        humanTableData: this.state.humanTableData,
                        humanSelectedRowKeys: []
                    });
                } else {
                    message.error(res.error[0].message);
                }
            }).always(() => {
                this.setState({
                    loading: false
                });
            })
        }
    },
    humanAdd() {
        this.state.humanTableData.push({
            id: null,
            type: null,
            uid: this.state.uid,
            name: '',
            idNumber: '',
            investment: 0
        });
        this.setState({
            humanTableData: this.state.humanTableData
        })
    },
    humanSave() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/user/basic/nature',
            method: 'post',
            data: {
                data: JSON.stringify(this.state.humanTableData)
            }
        }).done((res) => {
            if (!res.error.length) {
                message.success("保存成功");
            } else {
                message.error(res.error[0].message);
            }
        }).always(() => {
            this.setState({
                loading: false
            });
        })
    },
    legalRemove() {
        let deletedIds = [];
        for (let idx = 0; idx < this.state.legalSelectedRows.length; idx++) {
            let rowItem = this.state.legalSelectedRows[idx];
            if (rowItem.id) {
                deletedIds.push(rowItem.id)
            }
        };
        this.setState({
            loading: deletedIds.length > 0
        });
        if (deletedIds.length) {
            $.ajax({
                url: globalConfig.context + '/api/user/basic/deleteLegalPerson',
                method: 'post',
                data: {
                    ids: deletedIds
                }
            }).done((res) => {
                if (!res.error.length) {
                    message.success("删除成功");
                    this.state.legalSelectedRowKeys.sort((a, b) => { return b - a });
                    for (let idx = 0; idx < this.state.legalSelectedRowKeys.length; idx++) {
                        let dataIndex = this.state.legalSelectedRowKeys[idx];
                        this.state.legalTableData.splice(dataIndex, 1);
                    };
                    this.setState({
                        legalTableData: this.state.legalTableData,
                        legalSelectedRowKeys: []
                    });
                } else {
                    message.error(res.error[0].message);
                }
            }).always(() => {
                this.setState({
                    loading: false
                });
            })
        }
    },
    legalAdd() {
        this.state.legalTableData.push({
            id: null,
            type: null,
            uid: this.state.uid,
            name: '',
            idNumber: '',
            investment: 0
        });
        this.setState({
            legalTableData: this.state.legalTableData
        })
    },
    legalSave() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/user/basic/legalPerson',
            method: 'post',
            data: {
                data: JSON.stringify(this.state.legalTableData)
            }
        }).done((res) => {
            if (!res.error.length) {
                message.success("保存成功");
            } else {
                message.error(res.error[0].message);
            }
        }).always(() => {
            this.setState({
                loading: false
            });
        })
    },
    render() {
        const FormItem = Form.Item;
        const { getFieldDecorator } = this.props.form;
        const theData = this.state;
        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
        };
        const humanRowSelection = {
            type: 'checkbox',
            selectedRowKeys: this.state.humanSelectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    humanSelectedRows: selectedRows,
                    humanSelectedRowKeys: selectedRowKeys
                });
            }
        };
        const humanHasSelected = this.state.humanSelectedRowKeys.length > 0;
        const legalRowSelection = {
            type: 'checkbox',
            selectedRowKeys: this.state.legalSelectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    legalSelectedRows: selectedRows,
                    legalSelectedRowKeys: selectedRowKeys
                });
            }
        };
        const legalHasSelected = this.state.legalSelectedRowKeys.length > 0;
        if (this.state.data) {
            return (
                <Form onSubmit={this.handleSubmit} className="company-detail-form">
                    <div className="content-title">
                        <span>企业基本信息</span>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="企业名称"
                        >
                            {getFieldDecorator('unitName', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.unitName
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="行政区域"
                        >
                            {getFieldDecorator('address', {
                                rules: [{ type: 'array', required: true, message: '此项为必填项!' }],
                                initialValue: theData.address
                            })(
                                <Cascader options={areaSelect()} />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="通信地址"
                        >
                            {getFieldDecorator('postalAddress', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.postalAddress
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="邮编"
                        >
                            {getFieldDecorator('postcode', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.postcode
                            })(
                                <Input />
                                )}
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <p className="content-title">联系人信息</p>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="姓名"
                        >
                            {getFieldDecorator('contacts', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.firstContacts
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="手机"
                        >
                            {getFieldDecorator('contactMobile', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.firstMobile
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="电话"
                        >
                            {getFieldDecorator('contactsFixedTel', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.contactsFixedTel
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="传真"
                        >
                            {getFieldDecorator('contactsFax', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.contactsFax
                            })(
                                <Input />
                                )}
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <p className="content-title">企业法人信息</p>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="电话"
                        >
                            {getFieldDecorator('legalPersonTel', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.legalPersonTel
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="传真"
                        >
                            {getFieldDecorator('legalPersonFax', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.legalPersonFax
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="E-mail"
                        >
                            {getFieldDecorator('legalPersonEmail', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.legalPersonEmail
                            })(
                                <Input />
                                )}
                        </FormItem>
                    </div>
                    <div className="content-title">
                        <span>企业重要信息</span>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="注册资金"
                        >
                            {getFieldDecorator('registeredCapital', {
                                rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
                                initialValue: theData.registeredCapital
                            })(
                                <InputNumber min={0} max={999999} step={0.01} />
                                )}
                            <span>万元</span>
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="注册时间"
                        >
                            {getFieldDecorator('registrationTime', {
                                rules: [{ type: 'object', required: true, message: '此项为必填项!' }],
                                initialValue: theData.registrationTime ? moment(theData.registrationTime) : null
                            })(
                                <DatePicker />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="法人代表姓名"
                        >
                            {getFieldDecorator('legalPerson', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.legalPerson
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="身份证号"
                        >
                            {getFieldDecorator('legalPersonIdCard', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.legalPersonIdCard
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="组织机构代码/统一社会信用代码"
                        >
                            {getFieldDecorator('orgCode', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.orgCode
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="税务登记号/统一社会信用代码"
                        >
                            {getFieldDecorator('ratepayCode', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.ratepayCode
                            })(
                                <Input />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="所属行业"
                        >
                            {getFieldDecorator('industry', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.industry
                            })(
                                <Select>{this.state.industryOption}</Select>
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="企业规模（注册资金）"
                        >
                            {getFieldDecorator('enterpriseScale', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.enterpriseScale
                            })(
                                <Select>{this.state.scaleOption}</Select>
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="注册类型"
                        >
                            {getFieldDecorator('registerType', {
                                rules: [{ type: 'array', required: true, message: '此项为必填项!' }],
                                initialValue: theData.registerType
                            })(
                                <Cascader options={companyType} />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="外资来源地"
                        >
                            {getFieldDecorator('foreignInvestment', {
                                //rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.foreignInvestment
                            })(
                                <Input />
                                )}
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="领域"
                        >
                            {getFieldDecorator('field', {
                                rules: [{ type: 'array', required: true, message: '此项为必填项!' }],
                                initialValue: theData.field
                            })(
                                <Cascader options={techFieldList} />
                                )}
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="企业所得税主管税务机关"
                        >
                            {getFieldDecorator('taxAuthority', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.taxAuthority
                            })(
                                <Radio.Group>
                                    <Radio value="0">国税</Radio>
                                    <Radio value="1">地税</Radio>
                                </Radio.Group>
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="企业所得税征收方式"
                        >
                            {getFieldDecorator('ratepayMethod', {
                                rules: [{ required: true, message: '此项为必填项!' }],
                                initialValue: theData.ratepayMethod
                            })(
                                <Radio.Group>
                                    <Radio value="0">查账征收</Radio>
                                    <Radio value="1">核定征收</Radio>
                                </Radio.Group>
                                )}
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="是否上市"
                        >   {getFieldDecorator('listed', {
                            rules: [{ required: true, message: '此项为必填项!' }],
                            initialValue: theData.listed
                        })(
                            <Radio.Group>
                                <Radio value="0">否</Radio>
                                <Radio value="1">是</Radio>
                            </Radio.Group>
                            )}
                        </FormItem>
                    </div>
                    <div className="clearfix" style={{ display: this.props.form.getFieldValue('listed') == 1 ? 'block' : 'none' }}>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="上市时间"
                        >
                            {getFieldDecorator('listedDate', {
                                initialValue: theData.listedDate ? moment(theData.listedDate) : null
                            })(
                                <DatePicker />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="上市类型"
                        >   {getFieldDecorator('listedType', {
                            initialValue: theData.listedType
                        })(
                            <Select placeholder="请选择上市类型">
                                <Select.Option value='0'>股票型上市公司</Select.Option>
                                <Select.Option value='1'>债券型上市公司</Select.Option>
                            </Select>
                            )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="股票代码"
                        >   {getFieldDecorator('stockCode', {
                            initialValue: theData.stockCode
                        })(
                            <Input />
                            )}
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="是否属于国家级高新区内企业"
                        >   {getFieldDecorator('highTechZone', {
                            rules: [{ required: true, message: '此项为必填项!' }],
                            initialValue: theData.highTechZone
                        })(
                            <Radio.Group>
                                <Radio value="0">否</Radio>
                                <Radio value="1">是</Radio>
                            </Radio.Group>
                            )}
                        </FormItem>
                    </div>
                    <div className="clearfix" style={{ display: this.props.form.getFieldValue('highTechZone') == 1 ? 'block' : 'none' }}>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="国家级高新区名称"
                        >   {getFieldDecorator('highTechName', {
                            initialValue: theData.highTechName
                        })(
                            <Input />
                            )}
                        </FormItem>
                    </div>
                    <div className="content-title">
                        <span>股权结构</span>
                    </div>
                    <div className="clearfix">
                        <div className="half-item">
                            <div className="table-title">
                                <span>自然人股权</span>
                                <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
                                    onClick={this.humanAdd}>添加<Icon type="plus" /></Button>
                                <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
                                    disabled={!humanHasSelected}
                                    onClick={this.humanRemove}>删除<Icon type="minus" /></Button>
                                <Button type="primary" onClick={this.humanSave}>保存修改</Button>
                            </div>
                            <Table className="company-table" style={{ padding: '10px 20px' }}
                                columns={this.state.humanColumns}
                                dataSource={this.state.humanTableData}
                                pagination={false}
                                rowSelection={humanRowSelection} />
                        </div>
                        <div className="half-item">
                            <div className="table-title">
                                <span>法人股权</span>
                                <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
                                    onClick={this.legalAdd}>添加<Icon type="plus" /></Button>
                                <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
                                    disabled={!legalHasSelected}
                                    onClick={this.legalRemove}>删除<Icon type="minus" /></Button>
                                <Button type="primary" onClick={this.legalSave}>保存修改</Button>
                            </div>
                            <Table className="company-table" style={{ padding: '10px 20px' }}
                                columns={this.state.legalColumns}
                                dataSource={this.state.legalTableData}
                                pagination={false}
                                rowSelection={legalRowSelection} />
                        </div>
                    </div>
                    <FormItem style={{ width: '50%' }}
                        {...formItemLayout}
                        label="是否引入风险投资"
                    >
                        {getFieldDecorator('riskInvestment', {
                            rules: [{ required: true, message: '此项为必填项!' }],
                            initialValue: theData.riskInvestment
                        })(
                            <Radio.Group>
                                <Radio value="0">否</Radio>
                                <Radio value="1">是</Radio>
                            </Radio.Group>
                            )}
                    </FormItem>
                    <FormItem style={{ width: '50%' }}
                        {...formItemLayout}
                        label="经营范围(限400字)"
                    >
                        {getFieldDecorator('businessScope', {
                            rules: [{ required: true, message: '此项为必填项!' }],
                            initialValue: theData.businessScope
                        })(
                            <Input type='textarea' rows={6} />
                            )}
                    </FormItem>
                    <div className="content-title">
                        <span>员工情况</span>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item" style={{ width: '25%' }}
                            {...formItemLayout}
                            label="企业职工"
                        >
                            {getFieldDecorator('firmTotal', {
                                initialValue: theData.firmTotal || 0
                            })(
                                <InputNumber min={0} max={999999} step={1} />
                                )}
                        </FormItem>
                        <FormItem className="half-item"
                            {...formItemLayout}
                            label="科技人员"
                        >
                            {getFieldDecorator('techTotal', {
                                initialValue: theData.techTotal || 0
                            })(
                                <InputNumber min={0} max={999999} step={1} />
                                )}
                            <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>
                    </div>
                    <FormItem style={{ marginTop: '20px' }}>
                        <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                    </FormItem>
                </Form >
            );
        } else {
            return (<div></div>)
        };
    }
}));

export default CompanyDetail;