/* 
	@author:李霆
	@update:2018/05/29
	@descript:复制粘贴,拿起来就是干!!
*/

import React from 'react';
import {
	Radio,
	Icon,
	Button,
	Input,
	Select,
	Spin,
	message,
	DatePicker,
	Modal,
	Upload,
	Form,
	Row,
	Col,
	InputNumber
} from 'antd';
import $ from 'jquery/src/ajax';
import './unit.less';
import {
	socialAttribute,
	industry,
} from '@/dataDic.js';
import {
	splitUrl,
} from '@/tools.js';
const FormItem = Form.Item;
//图片组件
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 style={{ display: 'inline-block' }}>
				<Upload
					action={globalConfig.context + '/api/user/uploadPicture'}
					data={{ sign: 'user_picture' }}
					listType="picture-card"
					fileList={fileList}
					onPreview={this.handlePreview}
					onChange={this.handleChange}
				>
					{fileList.length >= 1 ? null : uploadButton}
				</Upload>
				<Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
					<img alt="example" style={{ width: '100%' }} src={previewImage} />
				</Modal>
			</div>
		);
	}
});
const PicturesWallMore = 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 style={{ display: 'inline-block' }}>
				<Upload
					action={globalConfig.context + '/api/user/uploadHonerPicture'}
					data={{ sign: 'honor_picture' }}
					listType="picture-card"
					fileList={fileList}
					onPreview={this.handlePreview}
					onChange={this.handleChange}
				>
					{fileList.length >= 8 ? null : uploadButton}
				</Upload>
				<Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
					<img alt="example" style={{ width: '100%' }} src={previewImage} />
				</Modal>
			</div>
		);
	}
});
const Unit = React.createClass({
	getInitialState() {
		return {
			loading: false,
			orgCodeUrl: [],
			companyLogoUrl: [],
			ProvinceCity:[],
			qualiUrl:[]
		};
	},
	loadInformation(record) {
		this.setState({
			loading:true
		})
		$.ajax({
			method: 'get',
			dataType: 'json',
			url: globalConfig.context + '/api/user/getOrganizationDetail',
			success: function(data) {
				let thisData = data.data;
				if (!thisData) {
					if (data.error && data.error.length) {
						message.warning(data.error[0].message);
					}
					thisData = {};
				}
				// let ProvinceCityArr = [];
				// let ProvinceS = thisData.locationProvince; //getprovince
				// let citys = thisData.locationCity;
				// let Areas = thisData.locationArea;
				// ProvinceCityArr.push(ProvinceS, citys, Areas);
				this.setState({
					InformationId: thisData.id,
					InformationUid: thisData.uid,
					identifyName: thisData.identifyName,
					listed: thisData.listed,
					highTechZone: thisData.highTechZone,
					orgCodeUrl: thisData.orgCodeUrl
						? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					companyLogoUrl: thisData.companyLogoUrl
						? splitUrl(thisData.companyLogoUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					qualiUrl: thisData.honorPicture
					? splitUrl(thisData.honorPicture, ',', globalConfig.avatarHost + '/upload')
					: [],
					dataInformation: thisData,
					//ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
					industry: String(thisData.industry) == 'null' ? undefined : String(thisData.industry),
					societyTag: thisData.societyTag || undefined,
					introduction: thisData.introduction,
					postalAddress: thisData.postalAddress,
					fixedTel: thisData.fixedTel,
					registeredCapital: thisData.registeredCapital,
					enterpriseScale: thisData.enterpriseScale,
					legalPerson: thisData.legalPerson,
					legalPersonIdCard: thisData.legalPersonIdCard,
					legalPersonTel: thisData.legalPersonTel,
					legalPersonEmail: thisData.legalPersonEmail,
					businessScope: thisData.businessScope,
					orgCode: thisData.orgCode,
					type:thisData.type,
					authentication:thisData.authentication
				});
			}.bind(this)
		}).always(
			function() {
				this.setState({
					loading: false
				});
			}.bind(this)
		);
	},
	//图片
	getOrgCodeUrl(e) {
		this.setState({
			orgCodeUrl: e
		});
	},
	getCompanyLogoUrl(e) {
		this.setState({
			companyLogoUrl: e
		});
	},
	getQualiUrl(e) {
		this.setState({
			qualiUrl: e
		});
	},
	//基本信息提交
	newSubmit(e) {
		
		this.setState({
			selectedRowKeys: []
		});
		
		let theorgCodeUrl = [];
		if (this.state.orgCodeUrl.length) {
			let picArr = [];
			this.state.orgCodeUrl.map(function(item) {
				if (item.response && item.response.data && item.response.data.length) {
					picArr.push(item.response.data);
				}
			});
			theorgCodeUrl = picArr.join(',');
		}
		let thecompanyLogoUrl = [];
		if (this.state.companyLogoUrl.length) {
			let picArr = [];
			this.state.companyLogoUrl.map(function(item) {
				if (item.response && item.response.data && item.response.data.length) {
					picArr.push(item.response.data);
				}
			});
			thecompanyLogoUrl = picArr.join(',');
		}
		let thequaliUrl = [];
		if (this.state.qualiUrl.length) {
			let picArr = [];
			this.state.qualiUrl.map(function(item) {
				if (item.response && item.response.data && item.response.data.length) {
					picArr.push(item.response.data);
				}
			});
			thequaliUrl = picArr.join(',');
		}
		this.setState({
			loading: true
		});
		$.ajax({
			method: 'post',
			dataType: 'json',
			url: globalConfig.context + '/api/user/updateOrganizationDetail',
			data: {
				id: this.state.InformationId,
				uid: this.state.InformationUid,
				societyTag: this.state.societyTag,
				identifyName: this.state.identifyName, //单位名称
				introduction: this.state.introduction,
				unitName: this.state.unitName,
				industry: this.state.industry,
				postalAddress: this.state.postalAddress,
				fixedTel: this.state.fixedTel,
				contactsFax: this.state.contactsFax,
				registeredCapital: this.state.registeredCapital ? this.state.registeredCapital : 0,
				enterpriseScale: this.state.enterpriseScale,
				legalPerson: this.state.legalPerson,
				legalPersonIdCard: this.state.legalPersonIdCard,
				legalPersonTel: this.state.legalPersonTel,
				legalPersonEmail: this.state.legalPersonEmail,
				highTechZone: this.state.highTechZone,
				listed: this.state.listed,
				contacts: this.state.contacts,
				orgCode: this.state.orgCode,
				businessScope: this.state.businessScope,
				introduction: this.state.introduction,
				companyLogoUrl: thecompanyLogoUrl != 0 ? thecompanyLogoUrl : '',
				honorPicture: thequaliUrl != 0 ? thequaliUrl : '',
				orgCodeUrl: theorgCodeUrl != 0 ? theorgCodeUrl : '',
				auditStatus: this.state.auditStatus,
				authentication:this.state.authentication,
				type:this.state.type
			}
		}).done(
			function(data) {
				this.setState({
					loading: false
				});
				if (!data.error.length) {
					if(this.state.type!='1'){
						message.success('企业认证成功,1s后回到首页.')
						setTimeout(()=>{
							window.location.href = globalConfig.context + "/user/account/index.html";
						},1000)  
					}else{
						message.success('保存成功');
						this.loadInformation();
					}
				} else {
					message.warning(data.error[0].message);
				}
			}.bind(this)
		);
	},
	subFun(){
		if(this.state.type=='0'||this.state.type=='1'){
			if(!this.state.identifyName){
				message.warning("请填写单位名称")
				return;
			}
			if (!this.state.industry) {
				message.warning('请选择行业!');
				return false;
			}
			if (!this.state.societyTag) {
				message.warning('请选择社会性质!');
				return false;
			}
			if (isNaN(this.state.registeredCapital)) {
				message.warning('注册资本只能输入数字!');
				return false;
			}
			this.newSubmit()
		}else{
			if(!this.state.identifyName){
				message.warning("请填写单位名称")
				return;
			}
			if (!this.state.industry) {
				message.warning('请选择行业!');
				return false;
			}
			if (!this.state.societyTag) {
				message.warning('请选择社会性质!');
				return false;
			}
			if (isNaN(this.state.registeredCapital)) {
				message.warning('注册资本只能输入数字!');
				return false;
			}
			this.setState({
				visible:true
			})
		}
	},
	handleOk(){
		this.newSubmit();
		this.setState({
			visible:false
		})
	},
	handleCancel(){
		this.setState({
			visible:false
		})
	},
	componentWillMount() {
		this.loadInformation();
	},
	componentWillReceiveProps(nextProps) {
		
	},
	render() {
		return (
			<div className="unit-wrap">
				<Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form" style={{width:'80%'}}>
					<Spin spinning={this.state.loading}>
						<Row style={{ marginBottom: 20 }}>
							<Col offset={2} span={4}>
								<h4 style={{fontSize:20}}>企业资料</h4>
							</Col>
						</Row>
						<div className="clearfix" style={{ paddingLeft: '60px' }}>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label={<span><span className="color-red"> * </span>企业名称</span>}
							>
								<Input
									maxLength={128}
									value={this.state.identifyName}
									onChange={(e) => {
										this.setState({ identifyName: e.target.value });
									}}
									placeholder="请输入企业名称"
								/>
								
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="企业规模"
							>
								<InputNumber
									placeholder="企业规模"
									value={this.state.enterpriseScale}
									InputNumber min={0} max={999999}
									style={{width:120,marginRight:10}}
									onChange={(e) => {
										this.setState({ enterpriseScale: e });
									}}
								/>
								<span>人</span>
							</FormItem>
						</div>
						<div className="clearfix" style={{ paddingLeft: '60px' }}>
							<FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>行业</span>}>
								<Select
									placeholder="选择行业"
									value={this.state.industry}
									onChange={(e) => {
										this.setState({ industry: e });
									}}
								>
									{industry.map(function(item) {
										return <Select.Option key={item.value}>{item.key}</Select.Option>;
									})}
								</Select>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label={<span><span className="color-red"> * </span>社会属性</span>}
							>
								<Select
									placeholder="客户社会属性"
									value={this.state.societyTag}
									
									onChange={(e) => {
										this.setState({ societyTag: e });
									}}
								>
									{socialAttribute.map(function(item) {
										return <Select.Option key={item.value}>{item.key}</Select.Option>;
									})}
								</Select>
								
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="通信地址"
							>
								<Input
									maxLength={255}
									placeholder="客户通信地址"
									value={this.state.postalAddress}
									onChange={(e) => {
										this.setState({ postalAddress: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="固定电话"
							>
								<Input
									maxLength={13}
									placeholder="客户固定电话"
									value={this.state.fixedTel}
									onChange={(e) => {
										this.setState({ fixedTel: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="注册资本"
							>
								<Input
									placeholder="注册资本"
									value={this.state.registeredCapital}
									maxLength="6"
									onChange={(e) => {
										this.setState({ registeredCapital: e.target.value });
									}}
								/>
							</FormItem>
							
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="法人名称"
							>
								<Input
									placeholder="法人名称"
									value={this.state.legalPerson}
									onChange={(e) => {
										this.setState({ legalPerson: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="法人身份证号码"
							>
								<Input
									placeholder="法人身份证号码"
									value={this.state.legalPersonIdCard}
									onChange={(e) => {
										this.setState({ legalPersonIdCard: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="法人电话"
							>
								<Input
									placeholder="法人电话"
									value={this.state.legalPersonTel}
									onChange={(e) => {
										this.setState({ legalPersonTel: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="法人电子邮箱"
							>
								<Input
									placeholder="法人电子邮箱"
									value={this.state.legalPersonEmail}
									onChange={(e) => {
										this.setState({ legalPersonEmail: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="机构代码"
							>
								<Input
									placeholder="社会同意机构代码"
									value={this.state.orgCode}
									onChange={(e) => {
										this.setState({ orgCode: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="高新">
								<Radio.Group
									value={this.state.highTechZone}
									onChange={(e) => {
										this.setState({ highTechZone: e.target.value });
									}}
								>
									<Radio value={0}>是</Radio>
									<Radio value={1}>否 </Radio>
								</Radio.Group>
							</FormItem>
							<FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="上市">
								<Radio.Group
									value={this.state.listed}
									onChange={(e) => {
										this.setState({ listed: e.target.value });
									}}
								>
									<Radio value={0}>是</Radio>
									<Radio value={1}>否 </Radio>
								</Radio.Group>
							</FormItem>

							<div className="clearfix pictures">
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									style={{ marginTop: 15 }}
									label="机构证(PIC)"
								>
									<PicturesWall
										pictureSign="PIC"
										fileList={this.getOrgCodeUrl}
										pictureUrl={this.state.orgCodeUrl}
									/>
									<p>图片建议:图片要清晰。</p>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									label="企业logo"
								>
									<PicturesWall
										pictureSign="logo"
										fileList={this.getCompanyLogoUrl}
										pictureUrl={this.state.companyLogoUrl}
									/>
									<p>图片建议:图片要清晰。</p>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									label="业务范围"
								>
									<Input
										type="textarea"
										rows={4}
										value={this.state.businessScope}
										placeholder="请输入业务范围"
										onChange={(e) => {
											this.setState({ businessScope: e.target.value });
										}}
									/>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									label="企业简介"
								>
									<Input
										type="textarea"
										rows={4}
										value={this.state.introduction}
										placeholder="请输入企业简介"
										onChange={(e) => {
											this.setState({ introduction: e.target.value });
										}}
									/>
								</FormItem>
							</div>
							<div className="clearfix">
							<FormItem
									labelCol={{ span: 2 }}
									wrapperCol={{ span: 18 }}
									style={{ marginTop: 15 }}
									label="荣誉资质"
								>
									<PicturesWallMore
										pictureSign="PIC"
										fileList={this.getQualiUrl}
										pictureUrl={this.state.qualiUrl}
									/>
									<p>图片建议:图片要清晰。</p>
								</FormItem>
							</div>
							<Row style={{ marginBottom: 20 ,marginTop:10}}>
								<Col offset={2} span={4}>
									<Button size="large" className="set-submit" type="primary" onClick={this.subFun} >
										保存
									</Button>
								</Col>
                       		 </Row>
							
						</div>
					</Spin>
				</Form>
				<Modal
					visible={this.state.visible}
					onOk={this.handleOk}
					onCancel={this.handleCancel}
					>
						<p>是否申请企业用户认证?</p>
				</Modal>
			</div>
		);
	}
});
export default Unit;