import React from 'react';
import { Radio, Icon, Button, AutoComplete, Cascader, layout, Input, Select, Tabs, Spin, Popconfirm, Popover, Table, Switch, message, DatePicker, Modal, Upload, Form, Row, Col, TimePicker } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import moment from 'moment';
import { citySelect, provinceList, areaSelect,getProvince } from '@/NewDicProvinceList';
import { socialAttribute, industry, newFollow, auditStatusL, lvl, currentMember, cityArr, statuslist, customerStatus, intentionalService, sex } from '@/dataDic.js';
import { getCompanyIntention, splitUrl, getIndustry, getStatuslist, getAuditStatus, getContactType, getSocialAttribute, getfllowSituation, beforeUploadFile, getWhether, getcityArr, getcustomerStatue, getfllowSituationOn, getCertification, getcustomerTyp, getLvl, getCurrentMember, getprovince } from '@/tools.js';
const FormItem = Form.Item;
const monthFormat = 'YYYY/MM';
//图片组件
const Basic = React.createClass({
	getInitialState() {
		return {
			loading: false,
			orgCodeUrl: [],
			companyLogoUrl: [],
			headPortraitUrl: [],
			positiveIdUrl: [],
			oppositeIdUrl: []
		}
	},
	loadInformation(record) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/customer/findPersonalCustomerDetail',
			data: {
				uid: record
			},
			success: function(data) {
				let thisData = data.data;
				if(!thisData) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
					thisData = {};
				};
				let ProvinceS = thisData.province, //getprovince
				    citys = thisData.city,
				    Areas = thisData.area,
				    ProvinceCity = getProvince(ProvinceS, citys, Areas),
					month = thisData.dateOfBirthYear ? thisData.dateOfBirthYear + '/' + thisData.dateOfBirthMonth : '';
				this.setState({
					headPortraitUrl: thisData.headPortraitUrl ? splitUrl(thisData.headPortraitUrl, ',', globalConfig.avatarHost + '/upload') : [],
					positiveIdUrl: thisData.positiveIdUrl ? splitUrl(thisData.positiveIdUrl, ',', globalConfig.avatarHost + '/upload') : [],
					oppositeIdUrl: thisData.oppositeIdUrl ? splitUrl(thisData.oppositeIdUrl, ',', globalConfig.avatarHost + '/upload') : [],
					ProvinceCity: ProvinceCity,
					month:month,
					basicData:thisData
				});
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	//图片
	getOrgCodeUrl(e) {
		this.setState({
			orgCodeUrl: e
		});
	},
	getCompanyLogoUrl(e) {
		this.setState({
			companyLogoUrl: e
		});
	},
	//取消
	detailsModal() {
		this.props.closeDetail(false, false)
	},
	getHeadPortraitUrl(e) {
		this.setState({ headPortraitUrl: e });
	},
	getPositiveIdUrl(e) {
		this.setState({ positiveIdUrl: e });
	},
	getOppositeIdUrl(e) {
		this.setState({ oppositeIdUrl: e });
	},
	componentWillMount() {
		this.loadInformation(this.props.data.id)
	},
	componentWillReceiveProps(nextProps) {
		if(nextProps.data && nextProps.basicState) {
			this.loadInformation(nextProps.data.id)
		}
	},
	render() {
		const formItemLayout = {
			labelCol: {
				span: 8
			},
			wrapperCol: {
				span: 14
			},
		};
		const basicData = this.state.basicData ||[];
		return(
			<div>
				 <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form">
	                <Spin spinning={this.state.loading}>
		               	<div className="clearfix" >
	                    	<FormItem className="half-item"
			                     {...formItemLayout}
			                    label="客户姓名"
		                        >
	                    	 <span>{basicData.identifyName}</span>
		                    </FormItem>
	                    </div>
	                    <div className="clearfix" >
	                    	<FormItem className="half-item" 
	                          {...formItemLayout}
	                         label="行业">
                                <span>{getIndustry(basicData.industry)}</span>
	                   		 </FormItem>
	                   		 <FormItem className="half-item" 
	                            {...formItemLayout}
	                           label="社会属性"
	                           > 
                                <span>{getSocialAttribute(basicData.societyTag)}</span>
	                   		 </FormItem>
	                   		 <FormItem className="half-item" 
	                            {...formItemLayout}
	                           label="省-市-区"
	                          > 
								<span>{this.state.ProvinceCity}</span>
		                    </FormItem>
	                   		 <FormItem className="half-item" 
		                           {...formItemLayout}
		                           label="出生日期"
	                          > 
								<span>{this.state.month}</span>
		                    </FormItem>
		                     <FormItem className="half-item" 
			                    	 {...formItemLayout}
			                        label="身份证号码"
	                           	 >
								<span>{basicData.idNumber}</span>
		                     </FormItem>
							<FormItem className="half-item" 
			                    	 {...formItemLayout}
			                        label="主要联系人"
	                           	 >
								<span>{basicData.contacts}</span>
		                    </FormItem>
		                    <FormItem className="half-item" 
			                    	 {...formItemLayout}
			                        label="主要联系人号码"
	                           	 >
								<span>{basicData.contactMobile}</span>
		                    </FormItem>
		                    <div className="clearfix">
			                    <FormItem className="half-item" 
				                    	 {...formItemLayout}
				                        label="职称名字"
		                           	 >
									<span>{basicData.professionalTitle}</span>
			                    </FormItem>
			                    <FormItem className="half-item" 
				                    	 {...formItemLayout}
				                        label="就业单位"
		                           	 >
									<span>{basicData.workUnit}</span>
			                    </FormItem>
			                    <FormItem className="half-item" 
				                    	 {...formItemLayout}
				                        label="学历"
		                           	 >
									<span>{basicData.education}</span>
			                    </FormItem>
			                    <FormItem className="half-item" 
				                    	 {...formItemLayout}
				                        label="毕业院校"
		                           	 >
									<span>{basicData.graduateSchool}</span>
			                    </FormItem>
			                    <FormItem className="half-item" 
				                    	 {...formItemLayout}
				                        label="专业类别"
		                           	 >
									<span>{basicData.majorCategory}</span>
			                    </FormItem>
			                    <FormItem className="half-item" 
				                    	 {...formItemLayout}
				                        label="职业资格"
		                           	 >
									<span>{basicData.qualification}</span>
			                    </FormItem>
			                    <FormItem className="half-item"
				                    	 {...formItemLayout}
				                         label="通信地址"
			                            >
									<span>{basicData.postalAddress}</span>
			                    </FormItem>
			                    <FormItem className="half-item"
				                    	 {...formItemLayout}
				                         label="固定电话"
			                            >
									<span>{basicData.fixedTel}</span>
			                    </FormItem>
			                    <FormItem className="half-item"
				                    	 {...formItemLayout}
				                         label="客户QQ"
			                            >
									<span>{basicData.qq}</span>
			                    </FormItem>
			                    <FormItem className="half-item"
				                    	 {...formItemLayout}
				                         label="电子邮箱"
			                            >
									<span>{basicData.email}</span>
			                    </FormItem>
			                    <FormItem className="half-item"
				                    	 {...formItemLayout}
				                         label="咨询费用"
			                            >
									<span>{basicData.consultationPrice}</span>
			                    </FormItem>
			                </div>
		                    <div className="clearfix">
		                   		 <FormItem className="half-item" 
			                            {...formItemLayout}
			                           label="性别"
			                         > 
									<span>{basicData.sex}</span>
		                   		 </FormItem>
	                   		 </div>
		                    <div className='clearfix'>
			                    <FormItem
			                        labelCol={{ span:4 }}
			                        wrapperCol={{ span: 18 }}
			                        label="客户简介" >
									<span>{basicData.introduction}</span>
			                    </FormItem>
		                    </div>
		                    <div className="clearfix pictures">
		                        <FormItem style={{display:'inline-block',width:'350px',marginTop:'20px',marginLeft:'95px'}}
			                        labelCol={{ span: 8 }}
			                        wrapperCol={{ span: 10 }}
			                        label="身份证正面" >
			                        <div className="clearfix">
			                            <Upload className="demandDetailShow-upload"
			                                listType="picture-card"
			                                fileList={this.state.positiveIdUrl}                               
			                                onPreview={(file) => {
			                                    this.setState({
			                                        previewImage: file.url || file.thumbUrl,
			                                        previewVisible: true,
			                                    });
			                                }} >
			                            </Upload>
			                            <Modal maskClosable={false} footer={null}
			                                visible={this.state.previewVisible}
			                                onCancel={() => { this.setState({ previewVisible: false }) }}>
			                                <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
			                            </Modal>
			                        </div>       
		                        </FormItem>
		                        <FormItem style={{display:'inline-block',width:'350px',marginTop:'20px'}}
			                        labelCol={{ span: 8 }}
			                        wrapperCol={{ span: 10 }}
			                        label="身份证反面" > 
			                        <div className="clearfix">
			                            <Upload className="demandDetailShow-upload"
			                                listType="picture-card"
			                                fileList={this.state.oppositeIdUrl}                               
			                                onPreview={(file) => {
			                                    this.setState({
			                                        previewImage: file.url || file.thumbUrl,
			                                        previewVisible: true,
			                                    });
			                                }} >
			                            </Upload>
			                            <Modal maskClosable={false} footer={null}
			                                visible={this.state.previewVisible}
			                                onCancel={() => { this.setState({ previewVisible: false }) }}>
			                                <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
			                            </Modal>
			                        </div>   
			                    </FormItem>
			                    <FormItem style={{display:'inline-block' ,width:'350px',marginTop:'20px'}}
			                        labelCol={{ span: 8 }}
			                        wrapperCol={{ span: 10 }}
			                        label="客户照片" > 
			                        <div className="clearfix">
			                            <Upload className="demandDetailShow-upload"
			                                listType="picture-card"
			                                fileList={this.state.headPortraitUrl}                               
			                                onPreview={(file) => {
			                                    this.setState({
			                                        previewImage: file.url || file.thumbUrl,
			                                        previewVisible: true,
			                                    });
			                                }} >
			                            </Upload>
			                            <Modal maskClosable={false} footer={null}
			                                visible={this.state.previewVisible}
			                                onCancel={() => { this.setState({ previewVisible: false }) }}>
			                                <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
			                            </Modal>
			                        </div>       
			                    </FormItem>
			                </div> 
	                    </div>		                	
				    </Spin>
				</Form>		
			</div>
		)
	}
})
export default Basic;