import React from 'react';
import $ from 'jquery/src/ajax';
import {
	Icon,
	Tooltip,
	Modal,
	message,
	Spin,
	Upload,
	Input,
	Select,
	Button,
	Radio,
	Form,
	Cascader,
	Tag,
	InputNumber
} from 'antd';
import { citySelect } from '@/NewDicProvinceListAll';
import { splitUrl ,getReleaseStateList} from '@/tools.js';

//tag组件

const KeyWordTagGroup = React.createClass({
    getInitialState() {
        return {
            tags: [],
            inputVisible: false,
            inputValue: ''
        };
    },
    handleClose(removedTag) {
        const tags = this.state.tags.filter(tag => tag !== removedTag);
        this.props.tagsArr(tags);
        this.setState({ tags });
    },
    showInput() {
        this.setState({ inputVisible: true }, () => this.input.focus());
    },
    handleInputChange(e) {
        this.setState({ inputValue: e.target.value });
    },
    handleInputConfirm() {
        const state = this.state;
        const inputValue = state.inputValue;
        let tags = state.tags;
        if (inputValue && tags.indexOf(inputValue) === -1 && inputValue.replace(/(^\s*)|(\s*$)/g, "").length != 0) {
            tags = [...tags, inputValue.replace(/(^\s*)|(\s*$)/g, "")];
        }
        this.props.tagsArr(tags);
        this.setState({
            tags,
            inputVisible: false,
            inputValue: '',
        });
    },
    componentWillMount() {
        this.state.tags = this.props.keyWordArr;
    },
    componentWillReceiveProps(nextProps) {
        if (this.props.keyWordArr != nextProps.keyWordArr) {
            this.state.tags = nextProps.keyWordArr;
        };
    },
    render() {
        const { tags, inputVisible, inputValue } = this.state;
        return (
            <div className="keyWord-tips">
                {tags.map((tag, index) => {
                    const isLongTag = tag.length > 10;
                    const tagElem = (
                        <Tag key={tag} closable={index !== -1} afterClose={() => this.handleClose(tag)}>
                            {isLongTag ? `${tag.slice(0, 10)}...` : tag}
                        </Tag>
                    );
                    return isLongTag ? <Tooltip title={tag}>{tagElem}</Tooltip> : tagElem;
                })}
                {inputVisible && (
                    <Input
                        ref={input => this.input = input}
                        type="text"
                        style={{ width: 78 }}
                        value={inputValue}
                        onChange={this.handleInputChange}
                        onBlur={this.handleInputConfirm}
                        onPressEnter={this.handleInputConfirm}
                    />
                )}
                {!inputVisible && <Button className="addtips" type="dashed" disabled={tags.length > 9 ? true : false} onClick={this.showInput}>+ 新标签</Button>}
            </div>
        );
    }
});


//图片组件
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/jtBusiness/project/uploadPicture'}
					data={{ sign: 'jt_project_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 DemandDetailForm = Form.create()(
	React.createClass({
		getInitialState() {
			return {
				visible: false,
				loading: false,
				auditStatus: 0,
				textFileList: [],
				videoFileList: [],
				pictureUrl: [],
				orgCodeUrl: [],
				companyLogoUrl: [],
				tags: []
			};
		},
		//左侧图片地址
		getOrgCodeUrl(e) {
			this.setState({ orgCodeUrl: e });
		},
		//右侧图片地址
		getCompanyLogoUrl(e) {
			this.setState({ companyLogoUrl: e });
		},
		//编辑部门，保存
		handleSubmit(e,index) {
			e.preventDefault();
			if (!this.state.name) {
				message.warning('请输入项目名称');
				return;
			}
			if ((this.state.name).length>16) {
				message.warning('项目名称在16个字以内');
				return false;
			};
			if (!this.state.categoryId||!this.state.categoryId[1]) {
				message.warning('请选择项目二级业务品类');
				return;
			}
			if (!this.state.ProvinceCity.length) {
				message.warning('请选择省份');
				return;
			}
			if (!this.state.price) {
				message.warning('请输入正确的市场价');
				return;
			}
			if(this.state.advertisement&&(this.state.advertisement).length>30){
				message.warning('项目营销说明字数不得超过30个字。');
				return;
			}
			this.setState({
				loading: true
			});
			let minPictureUrl = [];
			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);
					}
				});
				minPictureUrl = picArr.join(',');
			}
			let maxPictureUrl = [];
			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);
					}
				});
				maxPictureUrl = picArr.join(',');
			}
			$.ajax({
				method: 'post',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + '/api/user/jtBusiness/project/update',
				data: {
					auditStatus:index,
					id: this.state.id, //业务名称
					name: this.state.name, //业务名称
					categoryId: this.state.categoryId[1], //业务品类
					price: this.state.price, //市场价
					advertisement:this.state.advertisement,//项目营销说明
					activityPrice: this.state.activityPrice ? this.state.activityPrice : '0', //最低折扣
					memberPrice: this.state.memberPrice ? this.state.memberPrice : '0', //会员价
					offset: this.state.offset ? this.state.offset : '0',
					activityFlag: this.state.activityFlag, //活动生效标识
					province: this.state.ProvinceCity ? this.state.ProvinceCity[0] : '', //是否全国
					city: this.state.ProvinceCity ? this.state.ProvinceCity[1] : '',
					introduce: this.state.introduce,
					value: this.state.value,
					tag:this.state.tags?this.state.tags.join(','):'',
					isHot: this.state.isHot,
					minImgUrl: minPictureUrl.length ? minPictureUrl : '',
					maxImgUrl: maxPictureUrl.length ? maxPictureUrl : '',
					applyConditions: this.state.applyConditions
				}
			}).done(
				function(data) {
					if (!data.error.length) {
						message.success('保存成功！');
						this.setState({
							loading: false,
							editvisible: false
						});
					} else {
						message.warning(data.error[0].message);
					}
					this.props.handOk();
				}.bind(this)
			);
		},
		loadData(ids) {
			$.ajax({
				method: 'get',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + '/api/user/jtBusiness/project/detail',
				data: {
					id: ids
				},
				success: function(data) {
					if (!data.data) {
						if (data.error && data.error.length) {
							message.warning(data.error[0].message);
						}
					} else {
						let categoryIdArr=[];
						let thisdata = data.data;
						let ProvinceCityArr = [];
						ProvinceCityArr.push(thisdata.province, thisdata.city);
						(this.props.categoryList).map(item=>{
							if(item.children.length){
								(item.children).map(atem=>{
									if(atem.value==thisdata.categoryId){
										categoryIdArr.push(item.value,atem.value)
									}
								})
							}
						})

						this.setState({
							id: thisdata.id, //业务名称
							name: thisdata.name, //业务名称
							tags:thisdata.tag?thisdata.tag.split(','):[],
							categoryId: categoryIdArr, //业务品类
							number: thisdata.number,
							auditInfo:thisdata.auditInfo,
							price: thisdata.price, //市场价
							activityPrice: thisdata.activityPrice ? thisdata.activityPrice : '', //最低折扣
							memberPrice: thisdata.memberPrice ? thisdata.memberPrice : '', //会员价
							offset: thisdata.offset ? thisdata.offset : '',
							activityFlag: thisdata.activityFlag ? thisdata.activityFlag.toString() : '', //活动生效标识
							ProvinceCity: ProvinceCityArr,
							introduce: thisdata.introduce,
							createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : '',
							value: thisdata.value,
							isHot:thisdata.isHot,
							auditStatus:thisdata.auditStatus,
							applyConditions: thisdata.applyConditions,
							orgCodeUrl: thisdata.minImgUrl
								? splitUrl(thisdata.minImgUrl, ',', globalConfig.avatarHost + '/upload')
								: [],
							companyLogoUrl: thisdata.maxImgUrl
								? splitUrl(thisdata.maxImgUrl, ',', globalConfig.avatarHost + '/upload')
								: []
						});
					}
				}.bind(this)
			}).always(
				function() {
					this.setState({
						loading: false
					});
				}.bind(this)
			);
		},
		submission(e, index) {
			this.handleSubmit(e, index);
			$.ajax({
				method: 'get',
				dataType: 'json',
				crossDomain: false,
				async: true,
				url: globalConfig.context + '/api/user/jtBusiness/project/publish',
				data: {
					id: this.state.id,
					auditStatus:1
				}
			}).done(
				function(data) {
					if (!data.error.length) {
						this.setState({
							loading: false
						});
					} else {
						message.warning(data.error[0].message);
					}
				}.bind(this)
			);
		},
		cancelFun() {
			this.props.closeDesc();
		},
		componentWillMount() {
			if (this.props.data.id) {
				this.loadData(this.props.data.id);
			}
		},
		componentWillReceiveProps(nextProps) {
			if (!this.props.visible && nextProps.visible) {
				this.state.textFileList = [];
				this.state.videoFileList = [];
				if (nextProps.data.id) {
					this.loadData(nextProps.data.id);
				}
			}
			},
		render() {
			const FormItem = Form.Item;
			let categoryList = this.props.categoryList||[];
			return (
				<div className="patent-desc">
					<Form layout="horizontal" onSubmit={(e)=>{this.handleSubmit(e,0)}} id="demand-form">
						<Spin spinning={this.state.loading}>
							<div className="clearfix" style={{ paddingLeft: '86px' }}>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label={
										<span>
											<strong style={{ color: 'red' }}>*</strong>项目名称
										</span>
									}
								>
									<Input
										placeholder="项目名称"
										value={this.state.name}
										onChange={(e) => {
											this.setState({ name: e.target.value });
										}}
									/>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label={
										<span>
											<strong style={{ color: 'red' }}>*</strong>业务品类
										</span>
									}
								>
									<Cascader
										options={categoryList}
										value={this.state.categoryId}
										placeholder="业务品类"
										onChange={(e, pre) => {
											this.setState({ categoryId: e });
										}}
									/>
								</FormItem>
							</div>
							<div className="clearfix" style={{ paddingLeft: '86px' }}>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label={
										<span>
											<strong style={{ color: 'red' }}>*</strong>省-市
										</span>
									}
								>
									<Cascader
										options={citySelect()}
										value={this.state.ProvinceCity}
										placeholder="选择市"
										onChange={(e, pre) => {
											this.setState({ ProvinceCity: e });
										}}
									/>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label={
										<span>
											<strong style={{ color: 'red' }}>*</strong>热点
										</span>
									}
								>
									<Radio.Group
										onChange={(e) => {
											this.setState({ isHot: e.target.value });
										}}
										value={this.state.isHot}
									>
										<Radio value={0}>否</Radio>
										<Radio value={1}>是</Radio>
									</Radio.Group>
								</FormItem>
							</div>
							<div className="clearfix" style={{ paddingLeft: '86px' }}>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label={
										<span>
											<strong style={{ color: 'red' }}>*</strong>市场价
										</span>
									}
								>
									<InputNumber
										placeholder="市场价"
										value={this.state.price}
										style={{ width: 120 }}
										onChange={(e) => {
											this.setState({ price: e });
										}}
										required="required"
									/>
									<span style={{ marginLeft: 10 }}>万元</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label="活动价"
								>
									<InputNumber
										placeholder="活动价"
										value={this.state.activityPrice}
										style={{ width: 120 }}
										onChange={(e) => {
											this.setState({ activityPrice: e });
										}}
										min={0}
										max={999999}
										step={0.01}
									/>
									<span style={{ marginLeft: 10 }}>万元</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label="最低折扣"
								>
									<InputNumber
										placeholder="最低折扣(如:0.5)"
										value={this.state.offset}
										style={{ width: '50%' }}
										onChange={(e) => {
											this.setState({ offset: e });
										}}
										min={0}
										max={1}
										step={0.01}
									/>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label="会员价"
								>
									<InputNumber
										placeholder="会员价"
										value={this.state.memberPrice}
										style={{ width: '120px' }}
										onChange={(e) => {
											this.setState({ memberPrice: e });
										}}
										min={0}
										max={999999}
										step={0.01}
									/>
									<span style={{ marginLeft: 10 }}>万元</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label="活动生效"
								>
									<Select
										placeholder="活动生效"
										value={this.state.activityFlag}
										style={{ width: '94%' }}
										onChange={(e) => {
											this.setState({ activityFlag: e });
										}}
									>
										<Select.Option key="0">无效</Select.Option>
										<Select.Option key="1">有效</Select.Option>
									</Select>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label="创建时间"
								>
									<span style={{ width: '94%' }}>{this.state.createTime}</span>
								</FormItem>
							</div>	
							<div className="clearfix">
								<FormItem
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									label={<span><span></span>标签</span>} >
									<KeyWordTagGroup
										keyWordArr={this.state.tags}
										tagsArr={(e)=>{this.setState({tags:e})}}
										/>
								</FormItem>
							</div>	
							<div>
								<FormItem
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label="发布状态">
										<span>{getReleaseStateList(this.state.auditStatus)}</span>
								</FormItem>
							</div>
							<div className="clearfix">
								{this.state.auditInfo?<FormItem
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 12 }}
									label="拒绝原因">
										<span>{this.state.auditInfo}</span>
								</FormItem>:''}
							</div>
							
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目服务内容">
									<Input
										type="textarea"
										rows={4}
										placeholder="业务项目服务内容"
										value={this.state.introduce}
										onChange={(e) => {
											this.setState({ introduce: e.target.value });
										}}
									/>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="项目营销说明">
									<Input
										type="textarea"
										rows={4}
										placeholder="项目营销说明"
										value={this.state.advertisement}
										onChange={(e) => {
											this.setState({ advertisement: e.target.value });
										}}
									/>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目价值及作用">
									<Input
										type="textarea"
										rows={4}
										placeholder="业务项目价值及作用"
										value={this.state.value}
										onChange={(e) => {
											this.setState({ value: e.target.value });
										}}
									/>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目客户基本条件">
									<Input
										type="textarea"
										rows={4}
										placeholder="业务项目客户基本条件"
										value={this.state.applyConditions}
										onChange={(e) => {
											this.setState({ applyConditions: e.target.value });
										}}
									/>
								</FormItem>
							</div>
							<div className="clearfix pictures">
								<FormItem
									className="half-item"
									labelCol={{ span: 8 }}
									wrapperCol={{ span: 10 }}
									label="业务项目图标(小)"
								>
									<PicturesWall
										pictureSign="business_project_min_picture"
										fileList={this.getOrgCodeUrl}
										pictureUrl={this.state.orgCodeUrl}
									/>
									<p>图片建议：图片要清晰。(72*72)</p>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 8 }}
									wrapperCol={{ span: 12 }}
									label="业务项目图标(大)"
								>
									<PicturesWall
										pictureSign="business_project_max_picture"
										fileList={this.getCompanyLogoUrl}
										pictureUrl={this.state.companyLogoUrl}
									/>
									<p>图片建议：图片要清晰。(330*230)</p>
								</FormItem>
							</div>
							<Button
								className="set-submit"
								type="primary"
								htmlType="submit"
								style={{ marginLeft: '160px', marginBottom: '20px', marginTop: '20px' }}
							>
								保存
							</Button>
							<Button
								className="set-submit"
								type="ghost"
								onClick={(e) => {
									this.submission(e,1)
								}}
							>
								提交审核
							</Button>
							<Button
								className="set-submit"
								type="ghost"
								onClick={this.cancelFun}
							>
								取消
							</Button>
						</Spin>
					</Form>
				</div>
			);
		}
	})
);
export default DemandDetailForm;
