import React from 'react';
import { Icon, Form, Button, Input, Select, Spin, Table, DatePicker, message, Modal, Checkbox, Upload } from 'antd';
import { cognizanceStateList } from '../../../dataDic.js';
import { getCognizanceState, beforeUpload, getBase64 } from '../../../tools.js';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

class Avatar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            imageUrl: ''
        }
    }
    handleChange(info) {
        if (!this.props.oid || this.props.oid === "") {
            message.warning('请先选择公司！');
            return;
        };
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
            this.props.urlData(info.file.response.data);
        }
    }
    render() {
        const imageUrl = this.state.imageUrl;
        return (
            <Upload
                className="avatar-uploader"
                name="avatar"
                showUploadList={false}
                action={globalConfig.context + "/techservice/patent/patentFile"}
                data={{ 'sign': this.props.name, 'oid': this.props.oid }}
                beforeUpload={beforeUpload}
                onChange={this.handleChange.bind(this)}
            >
                {
                    imageUrl ?
                        <img src={imageUrl} role="presentation" className="avatar" /> :
                        <Icon type="plus" className="avatar-uploader-trigger" />
                }
            </Upload>
        );
    }
};


const WebsiteChangeFrom = Form.create()(React.createClass({
    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admintechproject/",
            data: {
                cid: this.props.data.cid,
                uid: this.props.data.uid,
                year: this.props.data.year
            },
            success: function (data) {
                if (data.error.length || !data.data) {
                    message.warning(data.error[0].message);
                    return;
                };
                this.state.data = data.data;
                this.state.cid = this.props.data.cid;
                this.state.moneyTable = [{
                    key: 1,
                    year: '第一年',
                    netAsset: data.data.netAsset1,
                    salesRevenue: data.data.salesRevenue1,
                    grossProfit: data.data.grossProfit1
                }, {
                    key: 2,
                    year: '第二年',
                    netAsset: data.data.netAsset2,
                    salesRevenue: data.data.salesRevenue2,
                    grossProfit: data.data.grossProfit2
                }, {
                    key: 3,
                    year: '第三年',
                    netAsset: data.data.netAsset3,
                    salesRevenue: data.data.salesRevenue3,
                    grossProfit: data.data.grossProfit3
                }];
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getStateData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/cognizanceLog",
            data: {
                cid: this.props.data
            },
            success: function (data) {
                if (data.error.length || !data.data) {
                    message.warning(data.error[0].message);
                    return;
                };
                this.state.stateTable = [];
                for (let i = 0; i < data.data.length; i++) {
                    this.state.stateTable.push({
                        key: i,
                        recordTimeFormattedDate: data.data[i].recordTimeFormattedDate,
                        state: data.data[i].state,
                        principal: data.data[i].principal,
                        comment: data.data[i].comment
                    });
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            stateOption: [],
            introduce:'',
            projectCheck: 0,
            subsidy: 0,
            stateColumns: [{
                title: '专利状态',
                dataIndex: 'state',
                key: 'state',
                render: (text) => { return getCognizanceState(text) }
            }, {
                title: '处理时间',
                dataIndex: 'recordTimeFormattedDate',
                key: 'recordTimeFormattedDate',
            }, {
                title: '负责人',
                dataIndex: 'principal',
                key: 'principal',
            }, {
                title: '备注',
                dataIndex: 'comment',
                key: 'comment',
            }],
            stateTable: []
        };
    },
    componentWillMount() {
        let _me = this;
        cognizanceStateList.map(function (item) {
            _me.state.stateOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
        this.loadData();
        this.getStateData();
    },
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.state || values.principal || values.recordTime || values.comment) {
                if (!values.state && !values.principal && !values.recordTime) {
                    message.warning("请填写完整的状态流转信息！");
                    return;
                };
            };
            if (!err) {
                this.props.spinState(true);
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + "/api/admin/disposeCognizanceDetail",
                    data: {
                        id: this.props.data.cid,
                        technicalField: values.technicalField,
                        basicResearchCost: values.basicResearchCost,
                        accident: values.accident,

                        recordTimeFormattedDate: values.recordTime ? values.recordTime.format("YYYY-MM-DD") : undefined,
                        state: values.state,
                        principal: values.principal,
                        comment: values.comment,
                    }
                }).done(function (data) {
                    if (!data.error.length) {
                        message.success('保存成功！');
                        this.props.closeModal();
                        this.props.form.resetFields();
                        this.state.targetKeys = [];
                        this.state.selectedKeys = [];
                        this.props.spinState(false);
                    } else {
                        message.warning(data.error[0].message);
                        this.props.spinState(false);
                    }
                }.bind(this));
            }
        });
    },
    componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
            this.getStateData();
            this.loadData();
        };
    },
    projectEstablishmentCheck(e) {
        if (e.target.checked == true) {
            this.state.projectCheck = 1;
        } else if (e.target.checked == false) {
            this.state.projectCheck = 0;
        };
    },
    subsidyCheck(e) {
        if (e.target.checked == true) {
            this.state.subsidy = 1;
        } else if (e.target.checked == false) {
            this.state.subsidy = 0;
        };
    },
    avatarUrl(e) {
        this.state.avatarUrl = e;
    },
    render() {
        const FormItem = Form.Item;
        const { getFieldDecorator } = this.props.form;
        const theData = this.state.data;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
        };
        const _me = this;
        if (this.state.data) {
            return (
                <Form onSubmit={this.handleSubmit} id="highTechApply-form">
                
                	<div className="clearfix">
                        <div className="half-item">
                            <span className="item-title">选择公司:  </span>
                            <Select
                                placeholder="请选择公司"
                                style={{ width: 200 }}
                                showSearch
                                onChange={(e)=>{ this.state.unitName = e;}}>
                                {this.props.companyOption}
                            </Select>
                        </div>
                    </div>
                    <div className="clearfix">
                    	<div className="half-item">
                            <span className="item-title">科技部门名称:  </span>
                            <Input value={this.state.department} onChange={(e) => { this.setState({ department: e.target.value }); }} style={{ width: 200 }} />
                        </div>
                    </div>

                    <div className="clearfix">
	                 	<div className="half-item">
	                   		<span className="item-title">网址:  </span>
	                     	<Input value={this.state.website} onChange={(e) => { this.setState({ website: e.target.value }); }} style={{ width: 200 }} />
	                	</div>
                    </div>
                    <div className="clearfix">
                    	<div className="half-item">
	                   		<span className="item-title">账号:  </span>
	                     	<Input value={this.state.accountNumber} onChange={(e) => { this.setState({ accountNumber: e.target.value }); }} style={{ width: 200 }} />
	                	</div>
	                </div>
	                <div className="clearfix">
                    	<div className="half-item">
	                   		<span className="item-title">密码:  </span>
	                     	<Input value={this.state.password} onChange={(e) => { this.setState({ password: e.target.value }); }} style={{ width: 200 }} />
	                	</div>
	                </div>
	                
	                
                    
                </Form >
            );
        } else {
            return (<div></div>)
        };
    },
}));

const WebsiteChange = React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false
        };
    },
    componentWillReceiveProps(nextProps) {
        this.state.visible = nextProps.showDesc
    },
    showModal() {
        this.setState({
            visible: true,
        });
    },
    handleOk() {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    spinChange(e) {
        this.setState({
            loading: e
        });
    },
    render() {
        return (
            <div className="patent-addNew">
                <Spin spinning={this.state.loading} className='spin-box'>
                    <Modal title="编辑科技部门网址" visible={this.state.visible}
                        onOk={this.handleOk} onCancel={this.handleCancel}
                        width='800px'
                        footer=''
                    >
                        <WebsiteChangeFrom
                            visible={this.state.visible}
                            authorOption={this.props.authorOption}
                            data={this.props.data}
                            spinState={this.spinChange} closeModal={this.handleCancel} />
                    </Modal>
                </Spin>
            </div>
        );
    }
});

export default WebsiteChange;