import React from 'react';
import {
	Table, Select, Button, Input, Form, message, Icon, Row, Col, Card, Divider, Popconfirm, Modal
} from 'antd';
import { $http } from '../../containers/config/https';
import FindpatientsModal from '../../pages/patients/FindpatientsModal';
import 'moment/locale/zh-cn';
const { Option } = Select;

class RegistrationForm extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			Hospitaldata: [],
			Configdata: [],
			EndData: '',
			EndUomDr: '',
			HospID: JSON.parse(window.sessionStorage.userData).hosoID,
			visible: false,
			userInfo: {},
		}
		this.Hospitalcolumns = [
			{
				title: '医院名称',
				dataIndex: 'HospDrDesc',
				width: 200,
				align: 'center',
			}
		]
		this.Configcolumns = [
			{
				title: 'ID',
				dataIndex: 'configid',
				width: 100,
				align: 'center',
			},
			{
				title: '操作符1',
				dataIndex: 'stOperate',
				width: 200,
				align: 'center',
			},
			{
				title: '操作符2',
				dataIndex: 'endOperate',
				width: 200,
				align: 'center',
			},
			{
				title: '开始数值',
				dataIndex: 'stData',
				width: 200,
				align: 'center',
			},
			{
				title: '结束数值',
				dataIndex: 'endData',
				width: 200,
				align: 'center',
			},
			{
				title: '显示值',
				dataIndex: 'showUomDesc',
				width: 200,
				align: 'center',
			},
			{
				title: '开始单位',
				dataIndex: 'stUomDesc',
				width: 200,
				align: 'center',
			},
			{
				title: '结束单位',
				dataIndex: 'endUomDesc',
				width: 200,
				align: 'center',
			},
			{
				title: '操作',
				width: 200,
				align: 'center',
				fixed: 'right',
				render: (text, record) => (
					<span>
						<Icon type="edit" style={{ color: '#108EE9' }}></Icon>
						<span className='span' onClick={this.handleCompile.bind(this, record)}>编辑</span>
						<Divider type="vertical" />
						<Popconfirm
							title="删除数据后不可恢复，确定要删除吗?"
							onConfirm={this.handleDetele.bind(this, record)}
							okText="是"
							cancelText="否"
						>
							<Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
							<span className='span'>删除</span>
						</Popconfirm>
					</span>
				)
			},
		]
	}

	//初始化数据
	componentWillMount() {
		this.selectFindHospital()			//医院列表数据
		this.selectHospitalData()			//医院下拉框
		this.selectInitData()
	}

	//添加
	handleSubmit = (e) => {
		e.preventDefault()
		let { validateFields } = this.props.form;
		var Code = '05100056'
		validateFields({ force: true }, (err, params) => {
			if (err) {
				return;
			}
			let data = {}
			data = {
				params: [
					params
				],
			};
			$http.post('urlDeanlt', this, {
				code: Code,
				data: data,
				success: function (res) {
					if (res.errorCode === 0) {
						message.success('添加成功！')
						this.props.form.resetFields();
						this.selectMaxData()
						this.selectTableData()
						this.selectFindHospital()
					}
				}
			})
		})
	}

	// 删除
	handleDetele(record) {
		let data = {
			params: [{
				ID: record.id,
				userID: JSON.parse(window.sessionStorage.userData).userID,
			}]
		}
		$http.post('urlADS', this, {
			code: '05100055',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					message.success('删除成功');
					this.selectMaxData()
					this.selectTableData()
					this.selectFindHospital()
				}
			}
		})
	}

	// 编辑
	handleCompile(record) {
		// 初始化数据
		this.setState({ flag: 'compile', userInfo: record, title: '编辑' }, () => {
			// 打开弹框
			this.child.showModal();
		});
	}

	// 调用子组件的连接事件
	onRef = (ref) => {
		this.child = ref
	}

	//查询患者
	selectTableData = () => {
		let data = {}
		data = {
			params: [{
				hospID: this.state.record ? this.state.record.HospDr : ''
			}],
		};
		$http.post('urlS', this, {
			code: '05100054',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0 && res.result) {
					for (var i = 0; i < res.result.Data.length; i++) {
						res.result.Data[i].key = i
					}
					this.setState({ Configdata: res.result.Data, loading: false })
				} else {
					this.setState({ Configdata: [], loading: false })
				}
			}
		})
	}

	//查询医院
	selectFindHospital = () => {
		let data = {}
		data = {
			params: [{
			}],
		};
		$http.post('urlS', this, {
			code: '05100063',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0 && res.result) {
					for (var i = 0; i < res.result.length; i++) {
						res.result[i].key = i
					}
					this.setState({ Hospitaldata: res.result, loading: false })

				} else {
					this.setState({ Hospitaldata: [], loading: false })
				}
			}
		})
	}

	//医院
	selectHospitalData() {
		let data = {
			params: [{
				hospID:  "",
				logonGroupID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).groupID : "",
				logonHospID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID : "",
			}],
		}
		$http.post('urlS', this, {
			code: '01040001',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						hospArr: res.result
					})
				}
			}
		})
	}
	//单位/显示值
	selectInitData() {
		$http.post("urlS", this, {
			code: '05100058',
			data: { params: [] },
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						dataArr: res.dataArr
					})
				}
			}
		});
	}

	//医院选中
	onClickHosp(value) {
		this.setState({
			record: value
		}, () => {
			this.selectMaxData()
		})

	}

	//患者年龄开始数值/单位
	selectMaxData = () => {
		let data = {}
		data = {
			params: [{
				hospID: this.state.record
			}],
		};
		$http.post("urlS", this, {
			code: '05100059',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({ EndData: res.MaxArr[0].endData, EndUomDr: res.MaxArr[0].endUomID })
				}
			}
		});
	}

	//医院table单击事件
	onClickRow = (record) => {
		return {
			onClick: () => {
				this.setState({
					record: record
				}, () => {
					this.selectTableData()
				})
			}
		}
	}
	render() {
		const { getFieldDecorator } = this.props.form;
		//医院
		let hospArrOption = []
		this.state.hospArr && this.state.hospArr.map((item, index) => {
			hospArrOption.push(<Option key={index} value={item.id}>{item.descripts}</Option>)
		})
		//单位显示值
		let dataArrOption = []
		this.state.dataArr && this.state.dataArr.map((item, index) => {
			dataArrOption.push(<Option key={index} value={item.id}>{item.descripts}</Option>)
		})
		return (
			<div>
				<Row>
					<Col span={4}>
						<Table pagination={false} dataSource={this.state.Hospitaldata} columns={this.Hospitalcolumns} onRow={this.onClickRow} bordered />
					</Col>
					<Col span={20}>
						<Card>
							<Row>
								<Col>
									<Form layout='inline' onSubmit={this.handleSubmit}>
										<Form.Item label="医院名称">
											{getFieldDecorator("hospID", { initialValue: this.state.HospID, rules: [{ required: false }] })(
												<Select style={{ width: "200px" }} onChange={this.onClickHosp.bind(this)}>{hospArrOption}</Select>
											)}
										</Form.Item>
										<Form.Item label="操作符1">
											{getFieldDecorator("stOperate", { rules: [{ required: true, message: '请选择！' }] })(
												<Select style={{ width: "200px" }}>
													<Option value="<="><Icon type='left' />=</Option>
													<Option value=">="><Icon type='right' />=</Option>
												</Select>
											)}
										</Form.Item>
										<Form.Item label="开始数值">
											{getFieldDecorator("stData", { initialValue: this.state.EndData, rules: [{ required: true, message: '请填写！' }] })(
												<Input style={{ width: "200px" }} disabled />
											)}
										</Form.Item>
										<Form.Item label="开始单位">
											{getFieldDecorator("stUomID", { initialValue: this.state.EndUomDr, rules: [{ required: true, message: '请选择！' }] })(
												<Select style={{ width: "200px" }} disabled >{dataArrOption}</Select>
											)}
										</Form.Item>
										<Col>
										</Col>
										<Form.Item label="显示值">
											{getFieldDecorator("showUomID", { rules: [{ required: true, message: '请选择！' }] })(
												<Select style={{ width: "200px" }}>{dataArrOption}</Select>
											)}
										</Form.Item>
										<Form.Item label="操作符2">
											{getFieldDecorator("endOperate", { rules: [{ required: true, message: '请选择！' }] })(
												<Select style={{ width: "200px" }}>
													<Option value="<="><Icon type='left' />=</Option>
													<Option value=">="><Icon type='right' />=</Option>
												</Select>
											)}
										</Form.Item>
										<Form.Item label="结束数值">
											{getFieldDecorator("endData", { rules: [{ required: true, message: '请填写！' }] })(
												<Input style={{ width: "200px" }} />
											)}
										</Form.Item>
										<Form.Item label="结束单位">
											{getFieldDecorator("endUomID", { rules: [{ required: true, message: '请选择！' }] })(
												<Select style={{ width: "200px" }}>{dataArrOption}</Select>
											)}
										</Form.Item>
										<Form.Item>
											<Button type="primary" htmlType="submit">新增</Button>
										</Form.Item>
									</Form>
								</Col>
							</Row>
						</Card>
						<div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
						<Card>
							<Table style={{ height: '600px' }} className='TableA' dataSource={this.state.Configdata} columns={this.Configcolumns} bordered />
						</Card>
						<FindpatientsModal onRef={this.onRef} userInfo={this.state.userInfo}></FindpatientsModal>
					</Col>
				</Row>
			</div>
		)
	}
}
export default Form.create()(RegistrationForm);