import React from 'react';
import { Icon, Modal, Button, Form, message, Input, Spin, Select, DatePicker, Upload } from 'antd';
import './patent.less';
import { intellectualGetList, catagoryList } from '../../dataDic.js';
import { beforeUploadFile, downloadFile } from '../../tools.js';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import moment from 'moment';

const IntellectualDescFrom = Form.create()(React.createClass({
    getInitialState() {
        return {
            loading: false,
            intellectualGetOption: [],
            catagoryOption: []
        };
    },
    componentWillMount() {
        let _me = this;
        intellectualGetList.map(function (item) {
            _me.state.intellectualGetOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
        catagoryList.map(function (item) {
            _me.state.catagoryOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
    },
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.spinState(true);
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + "/techservice/cognizance/intellectual",
                    data: {
                        id: this.props.data.id,
                        intellectualPropertyNumber: values.intellectualPropertyNumber,
                        intellectualPropertyName: values.intellectualPropertyName,
                        catagory: values.catagory,
                        obtainWay: values.obtainWay,
                        sortNumber: values.sortNumber,
                        authorizationNumber: values.authorizationNumber,
                        authorizationDateFormattedDate: values.authorizationDate._i || this.state.authorizationDateFormattedDate,
                        propertyRightUrl: this.state.propertyRightUrl
                    }
                }).done(function (data) {
                    if (!data.error.length) {
                        message.success('保存成功!');
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this)).always(function () {
                    this.props.spinState(false);
                    this.props.clickOk();
                    this.props.form.resetFields();
                }.bind(this));
            }
        });
    },
    checkIdcardnum(rule, value, callback) {
        if (!/(^\d{15}$)|(^\d{17}(\d|X)$)/.test(value)) {
            callback('请输入正确的身份证号!');
        } else {
            callback();
        }
    },
    componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
            this.props.form.resetFields();
        };
    },
    render() {
        const FormItem = Form.Item;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
        };
        const _me = this;
        const theData = this.props.data;
        return (
            <Form horizontal onSubmit={this.handleSubmit}>
                <FormItem
                    {...formItemLayout}
                    label="知识产权编号"
                >
                    {getFieldDecorator('intellectualPropertyNumber', {
                        rules: [{ required: true, message: '请输入,知识产权编号不能为空!' }],
                        initialValue: this.props.data.intellectualPropertyNumber
                    })(
                        <Input placeholder="请输入知识产权编号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="知识产权名称"
                >
                    {getFieldDecorator('intellectualPropertyName', {
                        rules: [{ required: true, message: '请输入,知识产权名称不能为空!' }],
                        initialValue: this.props.data.intellectualPropertyName
                    })(
                        <Input placeholder="请输入知识产权名称" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="排序号"
                >
                    {getFieldDecorator('sortNumber', {
                        rules: [{ required: true, message: '请输入,排序号不能为空!' }],
                        initialValue: this.props.data.sortNumber
                    })(
                        <Input placeholder="请输入排序号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="知识产权类型"
                >
                    {getFieldDecorator('catagory', {
                        rules: [{ required: true, message: '请选择,知识产权类型不能为空!' }],
                        initialValue: this.props.data.catagory
                    })(
                        <Select placeholder="请选择知识产权类型" style={{ width: 200 }}
                            onChange={(e) => { this.state.catagory = e; }}>
                            {this.state.catagoryOption}
                        </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="获得方式"
                >
                    {getFieldDecorator('obtainWay', {
                        rules: [{ required: true, message: '请选择,获得方式不能为空!' }],
                        initialValue: this.props.data.obtainWay
                    })(
                        <Select placeholder="请选择获得方式" style={{ width: 200 }}
                            onChange={(e) => { this.state.obtainWay = e; }}>
                            {this.state.intellectualGetOption}
                        </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="授权号"
                >
                    {getFieldDecorator('authorizationNumber', {
                        rules: [{ required: true, message: '请输入,授权号不能为空!' }],
                        initialValue: this.props.data.authorizationNumber
                    })(
                        <Input placeholder="请输入授权号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="授权日期"
                >
                    {getFieldDecorator('authorizationDate', {
                        rules: [{ type: 'object', required: true, message: '请选择,授权日期不能为空!' }],
                        initialValue: !this.props.data.authorizationDateFormattedDate ? null : moment(this.props.data.authorizationDateFormattedDate, 'YYYY/MM/DD')
                    })(
                        <DatePicker style={{ width: 200 }}
                            onChange={(data, dataString) => { this.state.authorizationDateFormattedDate = dataString }} />
                        )}
                </FormItem>
                <div>
                    <Upload
                        name="ratepay"
                        action={globalConfig.context + "/techservice/cognizance/upload"}
                        data={{ 'sign': 'property_ritht' }}
                        beforeUpload={beforeUploadFile}
                        showUploadList={false}
                        onChange={(info) => {
                            if (info.file.status !== 'uploading') {
                                console.log(info.file, info.fileList);
                            }
                            if (info.file.status === 'done') {
                                if (!info.file.response.error.length) {
                                    message.success(`${info.file.name} 文件上传成功!`);
                                } else {
                                    message.warning(info.file.response.error[0].message);
                                    return;
                                };
                                this.state.propertyRightUrl = info.file.response.data;
                            } else if (info.file.status === 'error') {
                                message.error(`${info.file.name} 文件上传失败。`);
                            }
                        }}
                    >
                        <Button><Icon type="upload" /> 上传知识产权证书 </Button>
                    </Upload>
                    <p style={{ margin: '10px 0' }}>{theData.propertyRightUrl ? <a onClick={downloadFile.bind(null, theData.propertyRightUrl, theData.propertyRightDownloadFileName)}>{theData.propertyRightDownloadFileName}</a> : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}</p>
                </div>
                <FormItem>
                    <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                    <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
                </FormItem>
            </Form >
        );
    },
}));


const intellectualDesc = 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, true);
    },
    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='600px'
                        footer=''
                    >
                        <IntellectualDescFrom
                            visible={this.state.visible}
                            data={this.props.data}
                            spinState={this.spinChange}
                            closeModal={this.handleCancel}
                            clickOk={this.handleOk} />
                    </Modal>
                </Spin>
            </div>
        );
    },
});
export default intellectualDesc;