import React from 'react';
import {
	Icon,
	Button,
	AutoComplete,
	Input,
	Select,
	Spin,
	Table,
	Switch,
	message,
	DatePicker,
	Form,
	Modal,
	Tabs,
	Tooltip
} from 'antd';
import $ from 'jquery/src/ajax';
import moment from 'moment';

import { cityArr,patentTypeList} from '@/dataDic.js';
import {
  beforeUploadFile,
  splitUrl,
  getPatentType,
  getcityArr,
  ShowModal,
  getMessageReminderStart
} from "@/tools.js";
import './customer.less';
import ShowModalDiv from "@/showModal.jsx";
import ImgList from "../../../../common/imgList";
import {ChooseList} from "../../../order/orderNew/chooseList";
import ReminderLog from "./reminderLog";
const Option = AutoComplete.Option;
const { TabPane } = Tabs;
//图片组件
const PicturesWall = React.createClass({
    getInitialState() {
        return {
            previewVisible: false,
            previewImage: '',
            fileList: this.props.pictureUrl,
        }
    },
    getDefaultProps(){
    	return{
    		changeClick:this.modifyChange
    	}
    },
    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"}}>
				<ImgList
					domId={this.props.domId}
					uploadConfig={{
						action:globalConfig.context + "/api/admin/patentNew/uploadFile",
						data:{ 'sign': '' },
						multiple:true,
						listType:"picture-card",
						beforeUpload:(infor)=>{beforeUploadFile(infor)}
					}}
					onChange={(infor)=>{
						this.handleChange(infor)
					}}
					fileList={fileList}
				/>
            </div>
        );
    }
});
const PatentPayment = Form.create()(React.createClass({
	departmentList() {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/organization/selectSuperId",
			data: {},
			success: function(data) {
	            let thedata = data.data;
				let theArr=[];
				if(!thedata) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
				}else{
					thedata.map(function(item,index){
						theArr.push({
							key:index,
							name:item.name,
							id:item.id,
						})
					})
				}
				this.setState({
					departmentArr:theArr,
				})
			}.bind(this),
			}).always(function() {
				this.setState({
					loading: false
				});
			}.bind(this));
	},

	loadData(pageNo){
		this.setState({
			loading: true
		}),
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/patentNew/selectPatentNew',
			data: {
				pageNo: pageNo || 1,
				pageSize: this.state.pagination.pageSize,
				status:this.state.statusSearch,
				name:this.state.nameSearch,
				aname:this.state.anameSearch,
				patentNo:this.state.patentNoSearch,
				departmentId:this.state.departmentSearch,
				startDate:this.state.timesArr[0],
				endDate:this.state.timesArr[1],
				type:this.state.typeSearch,
				createStart:this.state.releaseDate[0],
				createEnd:this.state.releaseDate[1],
			},
			success:function (data) {
				ShowModal(this);
				let theArr = [];
				if(!data.data) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
				} else {
					for(let i = 0; i < data.data.list.length; i++) {
						let thisdata = data.data.list[i];
						theArr.push({
							id:thisdata.id,
							province:thisdata.province,
							status:thisdata.status,
							patentNo:thisdata.patentNo,
							name:thisdata.name,
							type:thisdata.type,
							applyDates:thisdata.applyDates,
							authorizationDates:thisdata.authorizationDates,
							patentAmount:thisdata.patentAmount,
							applicant:thisdata.applicant,
							contactMobile:thisdata.contactMobile,
							email:thisdata.email,
							certificateUrl:thisdata.certificateUrl,
							aname:thisdata.aname,
							depName:thisdata.depName,
							userName:thisdata.userName,
							uid:thisdata.uid,
							createTimes:thisdata.createTimes
						});
					};
					this.state.pagination.current = data.data.pageNo;
					this.state.pagination.total = data.data.totalCount;
				};
				if(!data.data.list.length) {
					this.state.pagination.current = 0
					this.state.pagination.total = 0
				}
				this.setState({
					pageNo: pageNo,
					dataSource: theArr,
					pagination: this.state.pagination,
				});
			}.bind(this)
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	getInitialState(){
		return {
			loading:false,
			visible:false,
			orgCodeUrl:[],
			fileList:[],
			departmentArr:[],
			timesArr:[],
			pagination: {
				defaultCurrent: 1,
				defaultPageSize: 10,
				showQuickJumper: true,
				pageSize: 10,
				onChange: function(page) {
					this.loadData(page);
				}.bind(this),
				showTotal: function(total) {
					return '共' + total + '条数据';
				}
			},
			releaseDate:[],
			dataSource:[],
			columns:[{
				title: '专利号',
				dataIndex: 'patentNo',
				key: 'patentNo'
			},{
				title: '专利名称',
				dataIndex: 'name',
				key: 'name'
			},{
				title: '专利类型',
				dataIndex: 'type',
				key: 'type',
				render:text=>{
					return getPatentType(text)
				}
			},{
				title: '申请日期',
				dataIndex: 'applyDates',
				key: 'applyDates'
			},{
				title: '授权日期',
				dataIndex: 'authorizationDates',
				key: 'authorizationDates'
			},{
				title: '费用',
				dataIndex: 'patentAmount',
				key: 'patentAmount'
			},{
				title: '客户名称',
				dataIndex: 'userName',
				key: 'userName',
				width:100,
				render: (text,record) => {
					return (
						<Tooltip title={record.uid ? text : record.applicant}>
							<div style={{
								maxWidth:'100px',
								overflow:'hidden',
								textOverflow: "ellipsis",
								whiteSpace:'nowrap',
							}}>{record.uid ? text : record.applicant}</div>
						</Tooltip>
					)
				}
			},{
				title: '录入人',
				dataIndex: 'aname',
				key: 'aname'
			},{
				title: '录入日期',
				dataIndex: 'createTimes',
				key: 'createTimes'
			},{
				title: '录入公司',
				dataIndex: 'depName',
				key: 'depName'
			},{
				title: '联系电话',
				dataIndex: 'contactMobile',
				key: 'contactMobile'
			},{
				title: '电子邮箱',
				dataIndex: 'email',
				key: 'email'
			},{
				title: '状态',
				dataIndex: 'status',
				key: 'status',
				//状态 0 未提醒 1 剩余90天 2剩余30天 3剩余20天 4剩余10天 5剩余3天 6剩余2天 7剩余1天
				render:text=>{
					return (getMessageReminderStart(text,true))
				}
			}, {
				title: '操作',
				dataIndex: 'id',
				key: 'id',
				render: (text) => (
					<Button
						type={"primary"}
						onClick={(e) => {
							e.stopPropagation();
							this.setState({
								reminderLogVisible:true,
								reminderLogId:text
							})
						}}
					>
						查看日志
					</Button>
				)
			}
			],
			customerServiceList:[]
		}
	},
	componentWillMount(){
		this.loadData()
		this.departmentList()
		let data=localStorage.getItem('newData');
		if(data!='{}'&&data){
			var newData = JSON.parse(data);
			this.tableRowClick(newData);
		};
	},
	new(){
		this.reset();
		this.setState({
			visible:true
		})
	},
	visitCancel(){
		this.state.fileList = [];
		this.setState({
			visible:false
		})
	},
	onSure(){
		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(",");
		};
		if (!this.state.patentNo) {
			message.warning('专利号不能为空')
			return
		}
		if (!this.state.patentName) {
			message.warning('专利名称不能为空')
			return
		}
		if (!this.state.appDate) {
			message.warning('申请日期不能为空')
			return
		}
		if(isNaN(parseInt(this.state.patentType))){
		    message.warning('专利类型不能为空');
		    return
		}
		if (!this.state.authDate) {
			message.warning('授权日期不能为空')
			return
		}
		if (!this.state.customerUid) {
			message.warning('客户名称不能为空')
			return
		}
		let mobile = /^1[0-9]{10}$/ , phone = /^([0-9]{3,4}-)?[0-9]{7,8}$/ , phone1 = /^\d{3,4}-\d{3,4}-\d{3,4}$/;
		if(this.state.contactPhone && !(mobile.test(this.state.contactPhone) || phone.test(this.state.contactPhone) || phone1.test(this.state.contactPhone))){
			message.warning('电话格式不正确');
			return
		}
		let emailReg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
		if(this.state.email === ''){
			message.warning('电子邮箱不能为空');
			return
		}
		if(!emailReg.test(this.state.email)){
			message.warning('电子邮箱格式不正确');
			return
		}
		this.setState({
			loading:true
		})
		$.ajax({
			method: "POST",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context +'/api/admin/patentNew/addPatentNew' ,
			data: {
				patentNo:this.state.patentNo,
				name:this.state.patentName,
				type:this.state.patentType,
				applyDates:this.state.appDate,
				authorizationDates:this.state.authDate,
				// applicant:this.state.proposer,
				province:this.state.province,
				contactMobile:this.state.contactPhone,
				email:this.state.email,
				certificateUrl:theorgCodeUrl.length?theorgCodeUrl:'',
				uid:this.state.customerUid,
			}
		}).done(function(data) {
			this.setState({
				loading: false
			});
			if(!data.error.length) {
				message.success('保存成功！');
				this.onCal()
				this.loadData()
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
	},
	tableRowClick(record,index){
		this.state.RowData = record
		this.setState({
			avisible:true,
			patentNo:record.patentNo,
			patentName:record.name,
			province:record.province,
			status:record.status,
			patentType:record.type,
			appDate:record.applyDates,
			authDate:record.authorizationDates,
			proposer:record.applicant,
			contactPhone:record.contactMobile,
			email:record.email,
			certificateUrl:record.certificateUrl,
			orgCodeUrl: record.certificateUrl ? splitUrl(record.certificateUrl, ',', globalConfig.avatarHost + '/upload') : [],
			customerUid:record.uid,
			customerName:record.userName
		})
		localStorage.setItem('newData','{}');
	},
	xiugai(record){
		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(",");
		};
		if (!this.state.patentNo) {
			message.warning('专利号不能为空')
			return
		}
		if (!this.state.patentName) {
			message.warning('专利名称不能为空')
			return
		}
		if (!this.state.appDate) {
			message.warning('申请时间不能为空')
			return
		}
		if(isNaN(parseInt(this.state.patentType))){
		    message.warning('专利类型不能为空');
		    return
		}
		if (!this.state.authDate) {
			message.warning('授权日期不能为空')
			return
		}
		if (!this.state.customerUid) {
			message.warning('客户名称不能为空')
			return
		}
		let mobile = /^1[0-9]{10}$/ , phone = /^([0-9]{3,4}-)?[0-9]{7,8}$/ , phone1 = /^\d{3,4}-\d{3,4}-\d{3,4}$/;
		if(this.state.contactPhone && !(mobile.test(this.state.contactPhone) || phone.test(this.state.contactPhone) || phone1.test(this.state.contactPhone))){
			message.warning('电话格式不正确');
			return
		}
		let emailReg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
		if(this.state.email === ''){
			message.warning('电子邮箱不能为空');
			return
		}
		if(!emailReg.test(this.state.email)){
			message.warning('电子邮箱格式不正确');
			return
		}
		this.setState({
			loading: true
		})
		$.ajax({
			method: "POST",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context +'/api/admin/patentNew/updatePatentNew' ,
			data: {
				id:record.id,
				patentNo:this.state.patentNo,
				name:this.state.patentName,
				type:this.state.patentType,
				applyDates:this.state.appDate,
				authorizationDates:this.state.authDate,
				// applicant:this.state.proposer,
				province:this.state.province,
				contactMobile:this.state.contactPhone,
				email:this.state.email,
				status:this.state.status,
				certificateUrl:theorgCodeUrl.length?theorgCodeUrl:'',
				uid:this.state.customerUid,
			},
			success: function (data) {
			}.bind(this),
		}).done(function(data) {
			this.setState({
				loading: false
			});
			if(!data.error.length) {
				message.success('修改成功！');
				this.avisitCancel()
				this.loadData(this.state.pageNo)
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
	},

	baocunxiugai(){
		this.xiugai(this.state.RowData)
	},

	avisitCancel(){
		this.setState({
			avisible:false,
			customerServiceList:[]
		})
	},
	reset(){
		this.setState({
			patentNo:'',
			patentName:'',
			patentType:undefined,
			appDate:undefined,
			authDate:undefined,
			orgCodeUrl:[],
			proposer:'',
			province:undefined,
			contactPhone:'',
			email:'',
			customerUid:undefined,
			customerName:undefined,
			customerServiceList:[],
		})
	},

	searchReset(){
		this.setState({
			statusSearch:undefined,
			nameSearch:undefined,
			anameSearch:undefined,
			patentNoSearch:undefined,
			departmentSearch:undefined,
			typeSearch:undefined,
			timesArr:[],
			releaseDate:[]
		},()=>{
			this.loadData()
		})
	},

	search(){
		this.loadData()
	},

	onCal(){
		this.setState({
			visible:false
		})
	},
	getOrgCodeUrl(e) {
	    this.setState({ orgCodeUrl: e });
	},
	changeList(arr) {
		const newArr = [];
		this.state.columns.forEach(item => {
			arr.forEach(val => {
				if (val === item.title) {
					newArr.push(item);
				}
			});
		});
		this.setState({
			changeList: newArr
		});
	},
	//获取渠道专员列表
	getAdminList(value = '') {
		if(value.length < 4){return}
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/customer/getUserByName",
			data: {
				name: value,
			},
			success: function (data) {
				let theArr = [];
				if (data.error && data.error.length) {
					message.warning(data.error[0].message);
				}else{
					if(data.data){
						data.data.map(function (item, _) {
							theArr.push({
								value: item.id,
								label: item.name,
							});
						});
					}
				}
				this.setState({
					customerServiceList: theArr,
				});
			}.bind(this),
		}).always(
			function () {

			}.bind(this)
		);
	},

	render(){
		const theData = this.state.RowData || {};
		const FormItem = Form.Item;
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 14 },
		};
		const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

		return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} />
        <div className="content-title">
          <span style={{ fontSize: "16px" }}>客户专利提醒</span>
			<Tabs
				defaultActiveKey="1"
				className="test">
				<TabPane tab="搜索" key="1">
					<div className="user-search">
						<Select
							value={this.state.typeSearch}
							placeholder="请选择专利类型"
							onChange={e => {
								this.setState({
									typeSearch: e
								});
							}}
							style={{ width: "140px" }}
						>
							<Option value={1}>实用新型</Option>
							<Option value={2}>外观设计</Option>
							<Option value={3}>发明</Option>
						</Select>
						<Input
							value={this.state.nameSearch}
							placeholder="请输入授权公司"
							onChange={e => {
								this.setState({
									nameSearch: e.target.value
								});
							}}
						/>
						<Select
							value={this.state.departmentSearch}
							placeholder="请选择录入公司"
							onChange={e => {
								this.setState({
									departmentSearch: e
								});
							}}
							style={{ width: "140px" }}
						>
							{this.state.departmentArr.map(e => {
								return <Option value={e.id}>{e.name}</Option>;
							})}
						</Select>
						<Input
							value={this.state.anameSearch}
							placeholder="请输入录入人"
							onChange={e => {
								this.setState({
									anameSearch: e.target.value
								});
							}}
						/>
						<Select
							value={this.state.statusSearch}
							placeholder="请选择状态"
							onChange={e => {
								this.setState({
									statusSearch: e
								});
							}}
							style={{ width: "140px" }}
						>
							<Option value={0}>正常</Option>
							<Option value={1}>提醒中</Option>
						</Select>
						<Input
							value={this.state.patentNoSearch}
							placeholder="请输入专利号"
							onChange={e => {
								this.setState({
									patentNoSearch: e.target.value
								});
							}}
						/>
						<Button
							type="primary"
							onClick={this.search}
							style={{ marginLeft: "10px" }}
						>
							搜索
						</Button>
						<Button
							type="primary"
							onClick={this.searchReset}
							style={{ marginLeft: "10px" }}
						>
							重置
						</Button>
						<span>
              更多搜索
              <Switch
				  onChange={mark => {
					  this.setState({ mark: mark });
				  }}
			  />
            </span>
						{!this.props.isOnlyRead ? <Button
							type="primary"
							onClick={this.new}
							style={{ marginRight: "10px", float: "right" }}
						>
							新建
						</Button> : <div/>}
						{/*<Button onClick={this.reset}>导出</Button>*/}
					</div>
				</TabPane>
				<TabPane tab="更改表格显示数据" key="2">
					<div style={{ marginLeft: 10 }}>
						<ChooseList
							columns={this.state.columns}
							changeFn={this.changeList}
							changeList={this.state.changeList}
							top={55}
							margin={11}
						/>
					</div>
				</TabPane>
			</Tabs>
          {this.state.mark ? (
            <div className="user-search" style={{ paddingTop: "10px" }}>
              <span style={{ fontSize: "14px" }}>请选择申请时间:</span>
              <RangePicker
                value={[
                  this.state.timesArr[0]
                    ? moment(this.state.timesArr[0])
                    : null,
                  this.state.timesArr[1] ? moment(this.state.timesArr[1]) : null
                ]}
                onChange={(e, f) => {
                  this.setState({
                    timesArr: f
                  });
                }}
                style={{ marginTop: "0", marginLeft: "10px" }}
              />
				<span style={{ fontSize: "14px",marginLeft:"15px" }}>请选择录入日期:</span>
				<RangePicker
					style={{ marginTop: "0", marginLeft: "10px" }}
					value={[
						this.state.releaseDate[0]
							? moment(this.state.releaseDate[0])
							: null,
						this.state.releaseDate[1]
							? moment(this.state.releaseDate[1])
							: null
					]}
					onChange={(data, dataString) => {
						this.setState({ releaseDate: dataString });
					}}
				/>
            </div>
          ) : (
            ""
          )}

          <div className="patent-table">
            <Spin spinning={this.state.loading}>
              <Table
				  columns={
					  this.state.changeList
						  ? this.state.changeList
						  : this.state.columns
				  }
                dataSource={this.state.dataSource}
                pagination={this.state.pagination}
                onRowClick={this.tableRowClick}
				size="middle"
                bordered
              />
            </Spin>
          </div>
			{this.state.avisible ? <Modal
            maskClosable={false}
            visible={this.state.avisible}
            onCancel={this.avisitCancel}
            width="800px"
            title={!this.props.isOnlyRead ? "修改详情" : "查看详情"}
            footer=""
            className="admin-desc-content"
          >
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>专利号
                  </span>
                }
              >
                {!this.props.isOnlyRead ?
                  <Input
                    placeholder="请输入专利号"
                    value={this.state.patentNo}
                    onChange={e => {
                      this.setState({ patentNo: e.target.value });
                    }}
                    style={{ width: "240px" }}
                  /> : <span>{this.state.patentNo}</span>
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>专利名称
                  </span>
                }
              >
                {!this.props.isOnlyRead ?
                  <Input
                    placeholder="请输入专利名称"
                    value={this.state.patentName}
                    onChange={e => {
                      this.setState({ patentName: e.target.value });
                    }}
                    style={{ width: "240px" }}
                  /> : <div>{this.state.patentName}</div>
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="专利类型"
              >
                {!this.props.isOnlyRead ?
                  <Select
                    placeholder="请选择专利类型"
                    style={{ width: "240px" }}
                    value={getPatentType(this.state.patentType)}
                    onChange={e => {
                      this.setState({ patentType: e });
                    }}
                  >
                    {patentTypeList.map(function(item) {
                      return (
                        <Select.Option key={item.value}>
                          {item.key}
                        </Select.Option>
                      );
                    })}
                  </Select> : <div>{getPatentType(this.state.patentType)}</div>
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
				label={
					<span>
					 <strong style={{ color: "#f00" }}>*</strong>申请日期
				    </span>
				}
              >
				  {
					  !this.props.isOnlyRead ?
						  <DatePicker
							  style={{ marginTop: "2px", width: "240px", height: "32px" }}
							  showTime
							  format="YYYY-MM-DD"
							  onOk={e => {}}
							  value={this.state.appDate ? moment(this.state.appDate) : null}
							  onChange={(data, dataString) => {
								  this.setState({ appDate: dataString });
							  }}
						  /> : <div>{this.state.appDate ? moment(this.state.appDate).format('YYYY-MM-DD') : ''}</div>
				  }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
				label={
					<span>
					 <strong style={{ color: "#f00" }}>*</strong>授权日期
				    </span>
				}
              >
				  {
					  !this.props.isOnlyRead ?
                <DatePicker
                  style={{ marginTop: "2px", width: "240px", height: "32px" }}
                  showTime
                  format="YYYY-MM-DD"
                  onOk={e => {}}
                  value={
                    this.state.authDate ? moment(this.state.authDate) : null
                  }
                  onChange={(data, dataString) => {
                    this.setState({ authDate: dataString });
                  }}
                /> : <div>{this.state.authDate ? moment(this.state.authDate).format('YYYY-MM-DD') : ''}</div> }
              </FormItem>
              <FormItem className="half-item" {...formItemLayout} label="费用">
                <span>{theData.patentAmount}</span>
              </FormItem>
              <div className="clearfix">
                <FormItem
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 18 }}
                  label="合同扫描件"
                >
				 {!this.props.isOnlyRead ? <PicturesWall
					domId={'patentPayment1'}
                    fileList={this.getOrgCodeUrl}
                    pictureUrl={this.state.orgCodeUrl}
                  /> :
				  <div style={{paddingTop:'10px',paddingBottom:'10px'}}>
					<ImgList domId={'patentPayment3'} fileList={this.state.orgCodeUrl}/>
				  </div>
				 }
					{!this.props.isOnlyRead ? <p>图片建议：要清晰。</p> : null}
                </FormItem>
              </div>
			  <div className="clearfix">
				  <FormItem
					  className="half-item"
					  {...formItemLayout}
					  label={
						  <span>
							<strong style={{ color: "#f00" }}>*</strong>客户名称
						  </span>
					  }
				  >
					  {
						  !this.props.isOnlyRead ?
							  <Select
								  showSearch
								  value={
								  	this.state.customerServiceList.length === 0 ?
										(this.state.customerName || undefined) :
										(
											this.state.customerServiceList.filter(v=>v.value === this.state.customerUid).length === 0 ?
												this.state.customerName : this.state.customerUid
										)
								  }
								  style={{ width: 150,marginLeft:'10px' }}
								  onSearch={this.getAdminList}
								  onSelect={(v)=>{
									  this.setState({
										  customerUid:v
									  })
								  }}
								  filterOption={false}
								  placeholder="请输入客户名称"
							  >
								  {this.state.customerServiceList.map((v,k)=>(
									  <Option title={v.label} key={k} value={v.value}>{v.label}</Option>
								  ))}
							  </Select> : <div>{this.state.customerName}</div>
					  }
				  </FormItem>
			  </div>
              {this.state.proposer ? <FormItem
                className="half-item"
                {...formItemLayout}
                label="申请人"
              >
				  <div>{this.state.proposer}</div>
              </FormItem> : null}
              <FormItem className="half-item" {...formItemLayout} label="省份">
				  {
					  !this.props.isOnlyRead ?
                <Select
                  placeholder="请选择省份"
                  style={{ width: "240px" }}
                  value={this.state.province ? String(this.state.province) : ''}
                  onChange={e => {
                    this.setState({ province: e });
                  }}
                >
                  {cityArr.map(function(item) {
                    return (
                      <Select.Option key={item.value}>{item.key}</Select.Option>
                    );
                  })}
                </Select> : <div>{getcityArr(this.state.province)}</div> }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="联系电话"
              >
				  {
					  !this.props.isOnlyRead ?
                  <Input
                    placeholder="请输入联系手机"
                    value={this.state.contactPhone}
                    onChange={e => {
                      this.setState({ contactPhone: e.target.value });
                    }}
                    style={{ width: "240px" }}
                  /> : <div>{this.state.contactPhone}</div>
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>电子邮箱
                  </span>
                }
              >
				  {
					  !this.props.isOnlyRead ?
                  <Input
                    placeholder="请输入电子邮箱"
                    value={this.state.email}
                    onChange={e => {
                      this.setState({ email: e.target.value });
                    }}
                    style={{ width: "240px" }}
                  /> : <div>{this.state.email}</div>
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="状态"
              >
                <span>
					{/*状态 0 未提醒 1 剩余90天 2剩余30天 3剩余20天 4剩余10天 5剩余3天 6剩余2天 7剩余1天*/}
					{
						getMessageReminderStart(this.state.status,true)
					}
                </span>
              </FormItem>
            </div>
			  {!this.props.isOnlyRead ? <div style={{ overflow: "hidden" }}>
              <Button style={{ float: "right" }} onClick={this.avisitCancel}>
                取消
              </Button>
              <Button
                type="primary"
                style={{ float: "right", marginRight: "10px" }}
				loading={this.state.loading}
                onClick={this.baocunxiugai}
              >
                保存
              </Button>
            </div> : <div/>}
          </Modal> : <div/>}

			{this.state.visible ?<Modal
            maskClosable={false}
            visible={this.state.visible}
            onOk={this.visitOk}
            onCancel={this.visitCancel}
            width="1000px"
            title="专利资料"
            footer=""
            className="admin-desc-content"
          >
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>专利号
                  </span>
                }
              >
                {
                  <Input
                    placeholder="请输入专利号"
                    value={this.state.patentNo}
                    onChange={e => {
                      this.setState({ patentNo: e.target.value });
                    }}
                    style={{ width: "240px" }}
                  />
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>专利名称
                  </span>
                }
              >
                {
                  <Input
                    placeholder="请输入专利名称"
                    value={this.state.patentName}
                    onChange={e => {
                      this.setState({ patentName: e.target.value });
                    }}
                    style={{ width: "240px" }}
                  />
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
				label={
					<span>
					 <strong style={{ color: "#f00" }}>*</strong>申请日期
				    </span>
				}
              >
                <DatePicker
                  style={{ marginTop: "2px", width: "240px", height: "32px" }}
                  showTime
                  format="YYYY-MM-DD"
                  onOk={e => {}}
                  value={this.state.appDate ? moment(this.state.appDate) : null}
                  onChange={(data, dataString) => {
                    this.setState({ appDate: dataString });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>专利类型
                  </span>
                }
              >
                {
                  <Select
                    placeholder="请选择专利类型"
                    style={{ width: "240px" }}
                    value={this.state.patentType}
                    onChange={e => {
                      this.setState({ patentType: e });
                    }}
                  >
                    {patentTypeList.map(function(item) {
                      return (
                        <Select.Option key={item.value}>
                          {item.key}
                        </Select.Option>
                      );
                    })}
                  </Select>
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
				label={
					<span>
					 <strong style={{ color: "#f00" }}>*</strong>授权日期
				    </span>
				}
              >
                <DatePicker
                  style={{ marginTop: "2px", width: "240px", height: "32px" }}
                  showTime
                  format="YYYY-MM-DD"
                  onOk={e => {}}
                  value={
                    this.state.authDate ? moment(this.state.authDate) : null
                  }
                  onChange={(data, dataString) => {
                    this.setState({ authDate: dataString });
                  }}
                />
              </FormItem>
              <div className="clearfix">
                <FormItem
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 18 }}
                  label="合同扫描件"
                >
                  <PicturesWall
					domId={'patentPayment2'}
                    fileList={this.getOrgCodeUrl}
                    pictureUrl={this.state.orgCodeUrl}
                  />
                  <p>图片建议：要清晰。</p>
                </FormItem>
              </div>
				<div className="clearfix">
					<FormItem
						className="half-item"
						{...formItemLayout}
						label={
							<span>
								<strong style={{ color: "#f00" }}>*</strong>客户名称
							  </span>
						}
					>
						<Select
							showSearch
							value={this.state.customerServiceList.filter(v=>v.value === this.state.customerUid).length === 0 ?
								this.state.customerName : this.state.customerUid}
							style={{ width: 150,marginLeft:'10px' }}
							onSearch={this.getAdminList}
							onSelect={(v)=>{
								let arr = this.state.customerServiceList.filter(d=>d.value === v)
								this.setState({
									customerUid:v,
									customerName:arr[0].label
								})
							}}
							filterOption={false}
							placeholder="请输入客户名称"
						>
							{this.state.customerServiceList.map((v,k)=>(
								<Option key={k} value={v.value}>{v.label}</Option>
							))}
						</Select>
					</FormItem>
				</div>
              <div>
                <span style={{ marginLeft: "50px", fontSize: "20px" }}>
                  申请人资料
                </span>
              </div>
              {/*<FormItem*/}
              {/*  className="half-item"*/}
              {/*  {...formItemLayout}*/}
              {/*  label="申请人/公司"*/}
              {/*>*/}
              {/*  {*/}
              {/*    <Input*/}
              {/*      placeholder="请输入申请人/公司"*/}
              {/*      value={this.state.proposer}*/}
              {/*      onChange={e => {*/}
              {/*        this.setState({ proposer: e.target.value });*/}
              {/*      }}*/}
              {/*      style={{ width: "240px" }}*/}
              {/*    />*/}
              {/*  }*/}
              {/*</FormItem>*/}
              <FormItem className="half-item" {...formItemLayout} label="省份">
                <Select
                  placeholder="请选择省份"
                  style={{ width: "240px" }}
                  value={this.state.province}
                  onChange={e => {
                    this.setState({ province: e });
                  }}
                >
                  {cityArr.map(function(item) {
                    return (
                      <Select.Option key={item.value}>{item.key}</Select.Option>
                    );
                  })}
                </Select>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="联系手机"
              >
                {
                  <Input
                    placeholder="请输入联系手机"
                    value={this.state.contactPhone}
                    onChange={e => {
                      this.setState({ contactPhone: e.target.value });
                    }}
                    style={{ width: "240px" }}
                  />
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>电子邮箱
                  </span>
                }
              >
                {
                  <Input
                    placeholder="请输入电子邮箱"
                    value={this.state.email}
                    onChange={e => {
                      this.setState({ email: e.target.value });
                    }}
                    style={{ width: "240px" }}
                  />
                }
              </FormItem>
            </div>
            <div style={{ overflow: "hidden" }}>
              <Button style={{ float: "right" }} onClick={this.onCal}>
                取消
              </Button>
              <Button
                type="primary"
                style={{ float: "right", marginRight: "10px" }}
				loading={this.state.loading}
                onClick={this.onSure}
              >
                保存
              </Button>
            </div>
          </Modal> : <div/>}
        </div>
		  {this.state.reminderLogVisible ? <ReminderLog
			  id={this.state.reminderLogId}
			  visible={this.state.reminderLogVisible}
			  cancel={()=>{
			  	this.setState({
					reminderLogVisible:false,
					reminderLogId:''
				})
			  }}
		  /> : null}
      </div>
    );
	}
}))
export default PatentPayment;

