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

import React from 'react';
import {
	Radio,
	Icon,
	Button,
	Cascader,
	Input,
	Select,
	Spin,
	message,
	DatePicker,
	Modal,
	Upload,
	Form,
	Row,
	Col
} from 'antd';
import $ from 'jquery/src/ajax';
import moment from 'moment';
import './unit.less';
import { areaSelect } from '@/NewDicProvinceList';
import { socialAttribute, industry } from '@/dataDic.js';
import { splitUrl } from '@/tools.js';
const FormItem = Form.Item;
const monthFormat = 'YYYY/MM';
//图片组件
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 Expert = 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/user/getUserDetail',
			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.province; //getprovince
				let citys = thisData.city;
				let Areas = thisData.area;
				ProvinceCityArr.push(ProvinceS, citys, Areas);
				let month = thisData.dateOfBirthYear
					? thisData.dateOfBirthYear + '/' + thisData.dateOfBirthMonth
					: undefined;
				this.setState({
					InformationId: thisData.id,
                    InformationUid: thisData.uid,
                    expertAudit:thisData.expertAudit,
                    type:thisData.type,
                    authentication:thisData.authentication,
					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')
						: [],
					data: thisData,
					ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
					yearMonth: month,
					
				});
			}.bind(this)
		}).always(
			function() {
				this.setState({
					loading: false
				});
			}.bind(this)
		);
	},
	//图片
	getOrgCodeUrl(e) {
		this.setState({
			orgCodeUrl: e
		});
	},
	getCompanyLogoUrl(e) {
		this.setState({
			companyLogoUrl: e
		});
	},
	//基本信息提交
	newSubmit(values={}){
			this.state.data = [];
			let theorgCodeUrl = [];
			if (this.state.headPortraitUrl.length) {
				let picArr = [];
				this.state.headPortraitUrl.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.positiveIdUrl.length) {
				let picArr = [];
				this.state.positiveIdUrl.map(function(item) {
					if (item.response && item.response.data && item.response.data.length) {
						picArr.push(item.response.data);
					}
				});
				thecompanyLogoUrl = picArr.join(',');
			}
			let thecompanyLogoUrls = [];
			if (this.state.oppositeIdUrl.length) {
				let picArr = [];
				this.state.oppositeIdUrl.map(function(item) {
					if (item.response && item.response.data && item.response.data.length) {
						picArr.push(item.response.data);
					}
				});
				thecompanyLogoUrls = picArr.join(',');
			}

			let years = [];
			let yearMonth =
				this.state.yearMonth != undefined ? new Date(this.state.yearMonth).toLocaleDateString() : '';
            years = yearMonth.split('/');
        this.setState({
            loading: true
        });
        $.ajax({
            method: 'post',
            dataType: 'json',
            url: globalConfig.context + '/api/user/updateExpertDetail',
            data: {
                id: this.state.InformationId,
                uid: this.state.InformationUid,
                type:this.state.type,
                authentication:this.state.authentication,
                societyTag: values.societyTag,
                identifyName: values.identifyName,
                industry: values.industry,
                dateOfBirthYear: years[0], //出生年
                dateOfBirthMonth: years[1], //出生月
                province: (values.ProvinceCity)[0], //省-
                city:(values.ProvinceCity)[1], //市
                area:(values.ProvinceCity)[2], //区
                sex: values.sex,
                mobile: values.mobile,
                fixedTel: values.fixedTel,
                qq: values.qq,
                idNumber: values.idNumber,
                email: values.email,
                postalAddress: values.postalAddress,
                introduction: values.introduction,
                positiveIdUrl: thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '',
                oppositeIdUrl: thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : '',
                headPortraitUrl: theorgCodeUrl.length != 0 ? theorgCodeUrl : '',
                graduateSchool:values.graduateSchool,
                majorCategory:values.majorCategory,
                qualification:values.qualification,
                workUnit:values.workUnit,
                professionalTitle:values.professionalTitle
            }
        }).done(
            function(data) {
                this.setState({
                    loading: false
                });
                if (!data.error.length) {
                    message.success(this.state.expertAudit<1?'认证专家成功！':'保存成功');
                    this.loadInformation();
                } else {
                    message.warning(data.error[0].message);
                }
            }.bind(this)
        );
	},
	subFun(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                if(this.state.expertAudit!='0'){
                    this.newSubmit(values)
                }else{
                    this.setState({
                        visible: true,
                        values :values
                    });
                }
            }
        })
	},
	handleOk() {
		this.newSubmit(this.state.values);
		this.setState({
			visible: false
		});
	},
	handleCancel() {
		this.setState({
			visible: false
		});
	},
	getHeadPortraitUrl(e) {
		this.setState({ headPortraitUrl: e });
	},
	getPositiveIdUrl(e) {
		this.setState({ positiveIdUrl: e });
	},
	getOppositeIdUrl(e) {
		this.setState({ oppositeIdUrl: e });
	},
	componentWillMount() {
		this.loadInformation();
	},
	componentWillReceiveProps(nextProps) {},
	render() {
		const { getFieldDecorator } = this.props.form;
		const { MonthPicker } = DatePicker;
		const formItemLayout = {
			labelCol: {
				span: 6
			},
			wrapperCol: {
				span: 14
			}
		};
		const theData = this.state.data || [];
		return (
			<div className="unit-wrap">
				<Form layout="horizontal" onSubmit={this.subFun} 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">
							<FormItem className="half-item" {...formItemLayout} label="姓名">
								{getFieldDecorator('identifyName', {
									rules: [ { required: true, message: '此项为必填项!' } ],
									initialValue: theData.identifyName
								})(<Input placeholder="输入姓名" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="行业">
								{getFieldDecorator('industry', {
									rules: [ { required: true, message: '此项为必填项!' } ],
									initialValue: theData.industry?theData.industry.toString():undefined
								})(
									<Select placeholder="选择行业">
										{industry.map(function(item) {
											return <Select.Option key={item.value}>{item.key}</Select.Option>;
										})}
									</Select>
								)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="社会属性">
								{getFieldDecorator('societyTag', {
									rules: [ { required: true, message: '此项为必填项!' } ],
									initialValue: theData.societyTag
								})(
									<Select placeholder="客户社会属性">
										{socialAttribute.map(function(item) {
											return <Select.Option key={item.value}>{item.key}</Select.Option>;
										})}
									</Select>
								)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="性别">
								{getFieldDecorator('sex', {
									initialValue: theData.sex
								})(
									<Radio.Group>
										<Radio value={'男'}>男</Radio>
										<Radio value={'女'}>女</Radio>
									</Radio.Group>
								)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="出生日期">
                                <MonthPicker
                                    value={this.state.yearMonth?moment(this.state.yearMonth, monthFormat):undefined}
                                    format={monthFormat}
                                    onChange={(time) => {
                                        this.setState({ yearMonth: time });
                                    }}
                                />
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="身份证号码">
								{getFieldDecorator('idNumber', {
									initialValue: theData.idNumber
								})(<Input placeholder="身份证号码" />)}
							</FormItem>
						</div>
						<div className="clearfix">
							<FormItem className="half-item" {...formItemLayout} label="省-市-区">
								{getFieldDecorator('ProvinceCity', {
									rules: [ { required: true, message: '此项为必填项!' } ],
									initialValue: this.state.ProvinceCity
								})(<Cascader options={areaSelect()} placeholder="选择城市" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="通信地址">
								{getFieldDecorator('postalAddress', {
									initialValue: theData.postalAddress
								})(<Input placeholder="输入通信地址" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="手机号码">
								{getFieldDecorator('mobile', {
									rules: [ { required: true, message: '此项为必填项!' } ],
									initialValue: theData.mobile
								})(<Input placeholder="输入手机号码" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="固定电话">
								{getFieldDecorator('fixedTel', {
									initialValue: theData.fixedTel
								})(<Input placeholder="输入固定电话" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="QQ">
								{getFieldDecorator('qq', {
									initialValue: theData.qq
								})(<Input placeholder="输入qq" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="电子邮箱">
								{getFieldDecorator('email', {
									initialValue: theData.email
								})(<Input placeholder="输入电子邮箱" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="毕业院校">
								{getFieldDecorator('graduateSchool', {
									initialValue: theData.graduateSchool
								})(<Input placeholder="输入毕业院校全称" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="专业类别">
								{getFieldDecorator('majorCategory', {
									initialValue: theData.majorCategory
								})(<Input placeholder="输入专业" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="职业资格">
								{getFieldDecorator('qualification', {
									initialValue: theData.qualification
								})(<Input placeholder="输入职业资格" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="就职单位">
								{getFieldDecorator('workUnit', {
									initialValue: theData.workUnit
								})(<Input placeholder="输入就职单位全称" />)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="职称">
								{getFieldDecorator('professionalTitle', {
									initialValue: theData.professionalTitle
								})(<Input placeholder="输入职称" />)}
							</FormItem>
						</div>
						<div className="clearfix">
							<FormItem
								labelCol={{ span: 3 }}
								wrapperCol={{ span: 18 }}
								label="专家简介"
							>
								{getFieldDecorator('introduction', {
									initialValue: theData.introduction
								})(<Input type="textarea" rows={4} />)}
							</FormItem>
						</div>
						<div className="clearfix pictures">
							<FormItem
								className="picWidth"
								labelCol={{ span: 10 }}
								wrapperCol={{ span: 10 }}
								label="身份证正面"
							>
								<PicturesWall fileList={this.getPositiveIdUrl} pictureUrl={this.state.positiveIdUrl} />
								<p>建议：图片要清晰。</p>
							</FormItem>
							<FormItem
								className="picWidth"
								labelCol={{ span: 10 }}
								wrapperCol={{ span: 10 }}
								label="身份证反面"
							>
								<PicturesWall fileList={this.getOppositeIdUrl} pictureUrl={this.state.oppositeIdUrl} />
								<p>建议：图片要清晰。</p>
							</FormItem>
							<FormItem
								className="picWidth"
								labelCol={{ span: 10 }}
								wrapperCol={{ span: 10 }}
								label="专家照片"
							>
								<PicturesWall
									fileList={this.getHeadPortraitUrl}
									pictureUrl={this.state.headPortraitUrl}
								/>
								<p>建议：图片要清晰。</p>
							</FormItem>
						</div>
						<Row style={{ marginBottom: 20 }}>
							<Col offset={3} span={4}>
								<Button size="large" className="set-submit" type="primary" htmlType="submit">
									保存
								</Button>
							</Col>
						</Row>
					</Spin>
				</Form>
				<Modal visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
					<p>是否申请专家认证？</p>
				</Modal>
			</div>
		);
	}
});
export default Form.create()(Expert);
