import React from 'react';
import { Tabs, Table, Icon, Tooltip, Modal, message, AutoComplete, Spin, DatePicker,Upload, Input, InputNumber, Select,TimePicker, Button, Radio, Form, Cascader, Tag, Switch } from 'antd';
import './myClient.less';
import ajax from 'jquery/src/ajax/xhr.js';
import moment from 'moment';
import $ from 'jquery/src/ajax';
import { areaSelect } from '../../../NewDicProvinceList';
import { maturityList, innovationList, transferModeList,cityArr ,newFollow,customerStatus,intentionalService,tag} from '../../../dataDic';
import { IndustryObject, getIndustryCategory } from '../../../DicIndustryList.js';
import { beforeUploadFile, splitUrl, companySearch, getTransferMode, getAchievementCategory, getTechAuditStatus, getDemandType, getMaturity, getInnovation,beforeUpload, getBase64,getsex,getCompanyIntention,getcityArr,getfllowSituation,getcustomerStatue} from '../../../tools.js';
import throttle from '../../../throttle.js';

const PicturesWall = React.createClass({
    getInitialState() {
        return {
            previewVisible: false,
            previewImage: '',
            fileList: [],
        }
    },
    handleCancel() {
        this.setState({ previewVisible: false })
    },
    handlePreview(file) {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    },
    handleChange(info) {
        let fileList = info.fileList;
        this.setState({ fileList });
        this.props.fileList(fileList);
    },
    componentWillReceiveProps(nextProps) {
        this.state.fileList = nextProps.pictureUrl;
    },
    render() {
        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">点击上传</div>
            </div>
        );
        return (
            <div className="clearfix">
                <Upload
                    action={globalConfig.context + "/api/admin/achievement/uploadPicture"}
                    data={{ 'sign': this.props.pictureSign }}
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange} >
                    {fileList.length >= 5 ? null : uploadButton}
                </Upload>
                <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </div>
        );
    }
});

const AchievementDetailForm = Form.create()(React.createClass({
    getInitialState() {
        return {
            loading: false,
            data: {},
            tags: [],
            technicalPictureUrl:[],
            technicalPictureUrls:[],
        };
    },

    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {                                 
            if (!err) {
                this.setState({
                    loading: true
                });
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + '/api/admin/customer/addCustomer',
                    data: {
                        name: this.state.companyNamet, 
                        contacts:this.state.content  ,
                        contactMobile: this.state.telnum,
                        type:'1'
                    }
                }).done(function (data) { 
                    this.setState({
                        loading: false
                    });
                    if (!data.error.length) {
                        message.success('保存成功！');
                        this.props.handleOk();
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this));
            }
        });
    },

	//去完善
    addContent(){
    	let telnum=this.state.telnum;
    	let companyName=this.state.companyNamet;
    	let content=this.state.content;
    	if(!telnum||!companyName||!content){
    		message.warning('此3项都要填');
    	}else{
    		this.props.newmodal(true);
    		this.props.closeDesc(false);
    	}	
    },
    componentWillMount() {
        this.state.therottleSearch = throttle(this.handleSearch, 1000, { leading: false }).bind(this);
        if (this.props.data && this.props.data.id) {
            this.loadData(this.props.data.id, this.props.detailApiUrl);
        };  
    },
    componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
            if (nextProps.data && nextProps.data.id) {
                this.loadData(nextProps.data.id, nextProps.detailApiUrl);
            };
            this.state.data = {};
            this.state.tags = [];
            this.state.switchValue = false;
            this.state.radios = false;
            this.state.technicalPictureUrl = [];
            this.state.coverImg = [];
            this.state.textFileList = [];
            this.state.techPlanFileList = [];
            this.state.businessPlanFileList = [];
            this.props.form.resetFields();
            this.state.technicalPictureUrl = [];  
            this.state.technicalPictureUrls = [];
        };
    },
    
    render() {
        const theData = this.state.data || {};
        const { getFieldDecorator } = this.props.form;
        const FormItem = Form.Item
        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 14 },
        };  

        return (
        <div>
            <Form horizontal onSubmit={this.handleSubmit} id="demand-form">
                <Spin spinning={this.state.loading}>
                    <div className="clearfix">
                    	<FormItem className="half-item"
	                            {...formItemLayout}
	                            label="公司名称" >
	                         <Input value={this.state.companyNamet}  onChange={(e) => { this.setState({ companyNamet: e.target.value }); }} required="required"/>        
	                    </FormItem>
                    </div>
                    <div className="clearfix">
                    	<FormItem className="half-item"
	                            {...formItemLayout}
	                            label="联系人" >
	                              <Input value={this.state.content}  onChange={(e) => { this.setState({ content: e.target.value }); }} required="required"/>  
	                    </FormItem>
                    </div>
                    <div className="clearfix">
                    	<FormItem className="half-item"
	                            {...formItemLayout}
	                            label="联系电话" >
	                              <Input value={this.state.telnum}  onChange={(e) => { this.setState({ telnum: e.target.value }); }} required="required"/>
	                    </FormItem>
                    </div>
                    <FormItem wrapperCol={{ span: 12, offset: 4 }}>
                        <Button className="set-submit" type="primary" htmlType="submit">保存</Button>  
                        <Button className="set-submit" type="primary"  onClick={(e)=>{this.addContent();this.props.closeDesc}}>去完善</Button>
                        <Button className="set-submit" type="ghost" onClick={this.props.closeDesc}>取消</Button>
                    </FormItem> 
                </Spin>
            </Form >
    	</div>
        )
    }
}));

const CustomerDetail = React.createClass({
    getInitialState() {
        return {
            visible: false,
            tabsKey: 1,
            loading: false,           
            dataSource: [],
        };
    },    
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    handleOk(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false, true);
    },
    
    componentWillReceiveProps(nextProps) {
        if (!this.state.visible && nextProps.showDesc) {
            this.state.tabsKey = "1";
        };
        this.state.visible = nextProps.showDesc; 
    },
    render() {
        
            return (
                <div className="patent-desc">
                    <Modal maskClosable={false} visible={this.state.visible}
                        onOk={this.checkPatentProcess} onCancel={this.handleCancel}
                        width='800px'
                        title='新建客户'                       
                        footer=''
                        className="admin-desc-content">
                        <Spin spinning={this.state.loading}>               
                            <AchievementDetailForm
                                data={this.props.data} 
                                newmodal={this.props.newmodal}
                                closeDesc={this.handleCancel}
                                visible={this.state.visible}
                                handleOk={this.handleOk} />
                        </Spin>
                    </Modal>
                </div>
            );        
    },
});


export default CustomerDetail;