/*
 * Creator:     TQ
 * CreatDate:   2020-05-06
 * descripts：  字典类型数据对照
 * */
import React from 'react';
import { Table, Button, Col, Row, Input, Select, message, Card, Tabs, Modal, Icon, Form, Popconfirm, Divider } from 'antd';
import { $http } from '../../containers/config/https';
import CommonPagination from 'components/pagination/index';
import store from '../../store';
import './style/index.less';
const { TabPane } = Tabs;
const { Option } = Select;


class DictionaryTypeDataComparison extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			data: [],
			dictionaryTypedata: [],
			DictionaryDataDropArr: [],
			tableDataCodeArr: [],
			HospArr: [],
			wdnmddata: [],
			modal1Visible: false,
			modal2Visible: false,
			modal3Visible: false,
			onChangeTypeCode: "",
			onChangeTypeDesc: "",
			tableDataID: "",
			userInfo: {},
			dictionaryTypeID: "",
			compOrgDictionaryDataID: "",
			hospID: JSON.parse(window.sessionStorage.userData).hospID,
			compOrgID: "",
			topic: "",
			total: 0,
			page: 1,
			pageSize: 50,
			total1: 0,
			page1: 1,
			pageSize1: 10,
			total2: 0,
			page2: 1,
			pageSize2: 10,
			dicID: ""
		}
		this.columns = [
			{
				title: '代码',
				dataIndex: 'code',
				key: '1',
				align: "center",
			}, {
				title: '名称',
				dataIndex: 'descripts',
				key: '2',
				align: "center",
			}, {
				title: '基础数据表',
				dataIndex: 'tableDataDesc',
				key: '3',
				align: "center",
			}, {
				title: '操作',
				key: '4',
				align: "center",
				render: (text, record) => (
					<span>
						<Icon type="edit" style={{ color: '#108EE9' }}></Icon>
						<span className='span' onClick={() => this.handleCompileType(record)}>编辑</span>
						<Divider type="vertical" />
						<Popconfirm title="删除不可恢复，确定要删除吗？" onConfirm={this.handleDeleteType.bind(this, record)}>
							<span className="span" style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
						</Popconfirm>
					</span>
				)
			}
		]
		this.datacolumns = [
			{
				title: '代码',
				dataIndex: 'code',
				key: '1',
				align: "center",
				width: 200,
			}, {
				title: '名称',
				dataIndex: 'descripts',
				key: '2',
				align: "center",
				width: 200,
			}, {
				title: '机构代码',
				dataIndex: 'compCode',
				key: '3',
				align: "center",
				width: 200,
			}, {
				title: '机构描述',
				dataIndex: 'compDesc',
				key: '4',
				align: "center",
				width: 200,
			}, {
				title: '操作',
				key: '5',
				align: "center",
				width: 200,
				render: (text, record) => (
					<span>
						<Icon type="edit" style={{ color: '#108EE9' }}></Icon>
						<span className='span' onClick={() => this.handleCompile(record)}>编辑</span>
						<Divider type="vertical" />
						<Popconfirm title="删除不可恢复，确定要删除吗？" onConfirm={this.handleDeleteData.bind(this, record)} >
							<span className="span" style={{ color: 'rgba(240,65,52,1)' }} >删除</span>
						</Popconfirm>
					</span>
				)
			}
		]
		this.wdnmdcolumns = [
			{
				title: '类型对照代码',
				dataIndex: 'dictionaryTypeCode',
				key: '1',
				align: "center",
				width: 200,
			}, {
				title: '类型对照描述',
				dataIndex: 'dictionaryTypeDesc',
				key: '2',
				align: "center",
				width: 200,
			}, {
				title: '机构字典代码',
				dataIndex: 'compOrgCode',
				key: '3',
				align: "center",
				width: 200,
			}, {
				title: '机构字典描述',
				dataIndex: 'compOrgDescripts',
				key: '4',
				align: "center",
				width: 200,
			}, {
				title: '医院名称',
				dataIndex: 'hospID',
				key: '5',
				align: "center",
				width: 200,
			},  {
				title: '医院数据代码',
				dataIndex: 'hospCode',
				key: '6',
				align: "center",
				width: 200,
			}, {
				title: '医院数据描述',
				dataIndex: 'hospDescripts',
				key: '7',
				align: "center",
				width: 200,
			}, {
				title: '操作',
				key: '8',
				align: "center",
				width: 200,
				render: (text, record) => (
					<span>
						{/* <Icon type="edit" style={{ color: '#108EE9' }}></Icon>
						<span className='span' onClick={() => this.handleCompileData(record)}>编辑</span>
						<Divider type="vertical" /> */}
						<Popconfirm title="删除不可恢复，确定要删除吗？" onConfirm={this.handleDelete.bind(this, record)}>
							<span className="span" style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
						</Popconfirm>
					</span>
				)
			}
		]
	}
	//初始化数据
	componentDidMount() {
		this.handleQuery()				//类型列表
		this.GetTableDataDrop()			//基础数据
		this.GetHospDrop()				//医院
	}

	// 删除对照
	handleDelete = (record) => {
		let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
		let data = {
			"params": [{
				userID: user.userID,
				id: record.id,
			}]
		};
		$http.post('urlADS', this, {
			code: "05100318",
			data: data,
			success: function (res) {
				let errorCode = res.errorCode;
				if (errorCode === '0') {
					message.success("删除成功!");
					this.ContrastDictionaryQuery();
				}
			}
		});
	}

	// 删除对照类型
	handleDeleteType = (record) => {
		let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
		let data = {
			"params": [{
				userID: user.userID,
				id: record.id,
			}]
		};
		$http.post('urlADS', this, {
			code: "05100330",
			data: data,
			success: function (res) {
				let errorCode = res.errorCode;
				if (errorCode === '0') {
					message.success("删除成功!");
					this.handleQuery();
				}
			}
		});
	}

	// 删除字典数据
	handleDeleteData = (record) => {
		let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
		let data = {
			"params": [{
				userID: user.userID,
				id: record.id,
			}]
		};
		$http.post('urlADS', this, {
			code: "05100331",
			data: data,
			success: function (res) {
				let errorCode = res.errorCode;
				if (errorCode === '0') {
					message.success("删除成功!");
					this.dictionaryTypeQuery();
				}
			}
		});
	}

	//事件列表增加
	dictionaryTypeAdd = () => {
		let data = {
			params: [{
				"id": this.state.dicID || '',
				"dictionaryTypeCode": this.state.dictionaryTypeCode,
				"dictionaryTypeDesc": this.state.dictionaryTypeDesc,
				"tableDataID": this.state.tableDataID,
				"userID": JSON.parse(window.sessionStorage.userData).userID
			}],
		};
		$http.post('urlADS', this, {
			code: "05100311",
			data: data,
			success: function (res) {
				let errorCode = res.errorCode;
				if (errorCode === '0') {
					message.success("保存成功!");
					this.handleCancel()
					this.handleQuery()
				}
			}
		});
	}

	//更新保存机构字典数据
	handleSubmit(e) {
		e.preventDefault();
		let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
		this.props.form.validateFields((err, values) => {
			if (!err) {  //!err
				let data = {
					"params": [{
						dictionaryTypeID: this.state.record.id || '',
						id: this.state.userInfo.id,
						userID: user.userID,
						compOrgID: values.compOrgID || '',
						code: values.code || '',
						descripts: values.descripts || '',
					}]
				};
				$http.post('urlADS', this, {
					code: '05100313',
					data: data,
					success: function (res) {
						let errorCode = res.errorCode;
						if (errorCode === '0') {
							message.success("保存成功!");
							this.handleCancelOrg()
							this.dictionaryTypeQuery(this.state.record.id)
						}
					}
				})
			}
		});
	}

	//对照按钮
	onClickContrast = () => {
		let { tableDataCodeArr } = this.state
		let that = this
		let filterArr = tableDataCodeArr.filter(function (item) { return item.id === that.state.dictionaryTypeID });
		console.log(filterArr);
		let data = {
			params: [{
				"dictionaryTypeID": this.state.record.id,
				"hospDataCode": filterArr[0].code,
				"hospDataDescripts": filterArr[0].descripts,
				"compOrgDictionaryDataID": this.state.compOrgDictionaryDataID,
				"hospID": this.state.hospID,
				"userID": JSON.parse(window.sessionStorage.userData).userID,
			}],
		};
		$http.post('urlADS', this, {
			code: "05100317",
			data: data,
			success: function (res) {
				let errorCode = res.errorCode;
				if (errorCode === '0') {
					message.success("对照成功!");
					this.ContrastDictionaryQuery()
					this.setState({
						dictionaryTypeID: '',
						compOrgDictionaryDataID: '',
					})
				}
			}
		});
	}

	//单击类型事件
	onClickRow = (record) => {
		return {
			onClick: () => {
				this.setState({
					record: record,
					rowId: record.id
				}, () => {
					this.onColo()
					this.basicDatadrop()
					this.dictionaryTypeQuery()
					this.GetDataCompOrgDrop()		//机构下拉框
					this.ContrastDictionaryQuery()	//对照表数据
				})
			}
		}
	}

	setRowClassName = (record) => {
		return record.id === this.state.rowId ? 'clickRowStyle' : '';
	}

	onColo = () => {
		this.setState({
			compOrgID: "",
			compOrgDictionaryDataID: "",
			hospID: JSON.parse(window.sessionStorage.userData).hospID,
			dictionaryTypeID: "",
		})

	}

	///医院数据
	basicDatadrop = () => {
		let data = {
			params: [{
				"tableDataCode": this.state.record.tableDataCode,
				"hospID": this.state.hospID
			}],
		};
		$http.post('urlS', this, {
			code: "05100324",
			data: data,
			success: function (res) {
				if (res.errorCode === '0') {
					this.setState({ tableDataCodeArr: res.result })
				} else {
					this.setState({ tableDataCodeArr: [] })
				}
			}
		});
	}

	//对照字典类型表
	handleQuery = () => {
		let { page, pageSize } = this.state;
		let data = {
			params: [{}],
			pagination: [{
				pageSize: pageSize,
				currentPage: page,
				sortColumn: 'code',
				sortOrder: 'asc'
			}]
		};
		$http.post('urlS', this, {
			code: "05100308",
			data: data,
			success: function (res) {
				if (res.errorCode === '0') {
					this.setState({ data: res.result, total: res.total })
				} else {
					this.setState({ data: [], total: 0 })
				}
			}
		});
	}

	//机构字典数据
	dictionaryTypeQuery = () => {
		let { page1, pageSize1 } = this.state;
		let data = {
			params: [{
				"dictionaryTypeID": this.state.record ? this.state.record.id : '',
			}],
			pagination: [{
				pageSize: pageSize1,
				currentPage: page1,
				sortColumn: 'code',
				sortOrder: 'asc'
			}]
		};
		$http.post('urlS', this, {
			code: "05100309",
			data: data,
			success: function (res) {
				if (res.errorCode === '0') {
					this.setState({ dictionaryTypedata: res.result, total1: res.total })
				} else {
					this.setState({ dictionaryTypedata: [], total1: 0 })
				}
			}
		});
	}

	//字典对照
	ContrastDictionaryQuery = () => {
		let { page2, pageSize2 } = this.state;
		let data = {
			params: [{
				"dictionaryTypeID": this.state.record ? this.state.record.id : '',
			}],
			pagination: [{
				pageSize: pageSize2,
				currentPage: page2,
				sortColumn: 'code',
				sortOrder: 'asc'
			}]
		};
		$http.post('urlS', this, {
			code: "05100316",
			data: data,
			success: function (res) {
				if (res.errorCode === '0') {
					this.setState({ wdnmddata: res.result, total2: res.total })
				} else {
					this.setState({ wdnmddata: [], total2: 0 })
				}
			}
		});
	}

	//获取基础数据表数据下拉框
	GetTableDataDrop() {
		var params = {
			params: [{}]
		}
		$http.post('urlDeault', this, {
			code: "05100310",
			data: params,
			success: function (res) {
				if (res.errorCode == '0') {
					this.setState({
						TableDataDropArr: res.result,
					})
				}
			}
		});
	}

	//获取机构下拉框
	GetDataCompOrgDrop() {
		var params = {
			params: [{}]
		}
		$http.post('urlDeault', this, {
			code: "05100312",
			data: params,
			success: function (res) {
				if (res.errorCode == '0') {
					this.setState({
						DataCompOrgDropArr: res.result,
					})
				}
			}
		});
	}

	//获取机构字典下拉框
	GetDictionaryDataDrop() {
		var params = {
			params: [{
				"dictionaryTypeID": this.state.record ? this.state.record.id : '',
				"compOrgID": this.state.compOrgID
			}]
		}
		$http.post('urlDeault', this, {
			code: "05100323",
			data: params,
			success: function (res) {
				if (res.errorCode == '0') {
					this.setState({
						DictionaryDataDropArr: res.result,
					})
				}
			}
		});
	}

	//获取医院下拉框
	GetHospDrop() {
		var params = {
			params: [{}]
		}
		$http.post('urlDeault', this, {
			code: "01040078",
			data: params,
			success: function (res) {
				if (res.errorCode == '0') {
					this.setState({
						HospArr: res.data,
					})
				}
			}
		});
	}



	// 重置信息
	resetConfigInfo() {
		this.setState({ userInfo: {} })
	}

	// 重置表单
	resetFields() {
		this.props.form.resetFields();
	}

	//打开弹窗(主表)
	showModal = () => {
		this.setState({
			modal1Visible: true, topic: "添加"
		});
	};

	// 取消(主表)
	handleCancel = () => {
		this.setState({
			modal1Visible: false,
		})
	}

	//打开弹窗（子表）
	showModalOrg = () => {
		this.setState({
			modal2Visible: true, topic: "添加"
		});
	};

	//取消
	handleCancelOrg = () => {
		this.setState({
			modal2Visible: false,
		}, () => {
			this.resetConfigInfo();
			this.resetFields()
		})
	}

	// 编辑类型信息
	handleCompileType = (record) => {
		// 初始化数据
		this.setState({
			userInfoType: record,
			modal1Visible: true,
			topic: "编辑",
			dictionaryTypeCode: record.code,
			dictionaryTypeDesc: record.descripts,
			tableDataID: record.tableDataID,
			dicID: record.id
		})
	}

	// 编辑字典信息
	handleCompile = (record) => {
		// 初始化数据
		this.setState({ userInfo: record, modal2Visible: true, topic: "编辑" })
	}


	// // 编辑对照信息
	// handleCompileData = (record) => {
	// 	// 初始化数据
	// 	this.setState({ userInfo: record, modal3Visible: true, topic: "编辑" })
	// }




	//类型代码
	onChangeTypeCode = (e) => {
		this.setState({ dictionaryTypeCode: e.target.value })
	}

	//类型名称
	onChangeTypeDesc = (e) => {
		this.setState({ dictionaryTypeDesc: e.target.value })
	}

	//基础数据表
	onChangeTypeTaID = (e) => {
		this.setState({ tableDataID: e })
	}

	onChangeAB = (e) => {
		this.setState({ dictionaryTypeID: e })
	}

	onChangeAC = (e) => {
		this.setState({ compOrgDictionaryDataID: e })
	}

	onChangeAD = (e) => {
		this.setState({ hospID: e }, () => {
			this.basicDatadrop()
		})
	}

	onChangeAE = (e) => {
		this.setState({ compOrgID: e }, () => {
			this.GetDictionaryDataDrop()
		})
	}




	//类型列表
	// 页码改变的回调，参数是改变后的页码及每页条数
	appPageChange = (page, pageSize) => {
		this.setState({
			page: page,
			pageSize: pageSize,
		}, () => {
			// 重新调用查询方法
			this.handleQuery();
		});
	}

	// 条数改变的回调
	apponShowSizeChange = (current, size) => {
		this.setState({
			page: current,
			pageSize1: size,
		}, () => {
			// 重新调用查询方法
			this.handleQuery();
		});
	}

	//数据
	// 页码改变的回调，参数是改变后的页码及每页条数
	appPageChange1 = (page, pageSize) => {
		this.setState({
			page1: page,
			pageSize1: pageSize,
		}, () => {
			// 重新调用查询方法
			this.dictionaryTypeQuery();
		});
	}

	// 条数改变的回调
	apponShowSizeChange1 = (current, size) => {
		this.setState({
			page1: current,
			pageSize1: size,
		}, () => {
			// 重新调用查询方法
			this.dictionaryTypeQuery();
		});
	}

	//对照
	// 页码改变的回调，参数是改变后的页码及每页条数
	appPageChange2 = (page, pageSize) => {
		this.setState({
			page2: page,
			pageSize2: pageSize,
		}, () => {
			// 重新调用查询方法
			this.ContrastDictionaryQuery();
		});
	}

	// 条数改变的回调
	apponShowSizeChange2 = (current, size) => {
		this.setState({
			page2: current,
			pageSize2: size,
		}, () => {
			// 重新调用查询方法
			this.ContrastDictionaryQuery();
		});
	}


	render() {

		const { getFieldDecorator } = this.props.form;
		let userInfo = this.state.userInfo ? this.state.userInfo : {}

		let DataCompOrgDropOption = []
		this.state.DataCompOrgDropArr && this.state.DataCompOrgDropArr.map(item => {
			DataCompOrgDropOption.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
		})

		let TableDataDropOption = []
		this.state.TableDataDropArr && this.state.TableDataDropArr.map(item => {
			TableDataDropOption.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
		})

		let tableDataCodeOption = []
		this.state.tableDataCodeArr && this.state.tableDataCodeArr.map(item => {
			tableDataCodeOption.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
		})

		let DictionaryDataDropOption = []
		this.state.DictionaryDataDropArr && this.state.DictionaryDataDropArr.map(item => {
			DictionaryDataDropOption.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
		})

		let HospOption = []
		this.state.HospArr && this.state.HospArr.map(item => {
			HospOption.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
		})

		return (
			<div>
				<Card style={{ height: '100%', width: '30%', float: 'left', minHeight: '820px', position: "relative" }} title='类型列表' >
					<div style={{ position: "absolute", top: "13px", right: "36px" }}>
						<Button style={{ width: "100px" }} onClick={this.showModal}>添加</Button>
					</div>
					<Table
						style={{ width: '100%', "padding": "5px", height: store.getState().tableHeight.y + 70 + 'px', border: '7px soild #eeeeee' }}
						scroll={{ y: store.getState().tableHeight.y }}
						dataSource={this.state.data}
						columns={this.columns}
						className="outpatient-body"
						bordered={true}
						pagination={false}
						onRow={this.onClickRow}
						rowClassName={this.setRowClassName}
					/>
					<CommonPagination size="large" current={this.state.page} total={this.state.total} search='search'
						onShowSizeChange={this.apponShowSizeChange} complete={true} dataSource={this.state.data}
						onChange={this.appPageChange} />
				</Card>
				<Card style={{ height: '100%', width: '69.8%', float: 'right', minHeight: '820px' }} title='数据对照'>
					<Tabs defaultActiveKey="1">
						<TabPane tab="数据" key="1">
							<Row><Button style={{ width: '150px', float: 'right' }} onClick={this.showModalOrg}>添加</Button></Row>
							<Row>
								<Table
									className="outpatient-body"
									style={{ width: '1100px', "padding": "30px", height: "610px", border: '7px soild #eeeeee' }}
									dataSource={this.state.dictionaryTypedata}
									columns={this.datacolumns}
									bordered
									pagination={false}
								/>
								<CommonPagination size="small" current={this.state.page1} total={this.state.total1} search='search'
									onShowSizeChange={this.apponShowSizeChange1} complete={true} dataSource={this.state.dictionaryTypedata}
									onChange={this.appPageChange1} />
							</Row>
						</TabPane>
						<TabPane tab="对照" key="2">
							<Row>
								<Col span={5}>机构：<Select allowClear style={{ width: "150px", "margin": "15px" }} value={this.state.compOrgID} onChange={this.onChangeAE}>{DataCompOrgDropOption}</Select></Col>
								<Col span={6}>
									机构字典：<Select
										optionFilterProp="children"
										showSearch
										style={{ width: "150px", "margin": "15px" }}
										value={this.state.compOrgDictionaryDataID}
										onChange={this.onChangeAC}
										allowClear
									>{DictionaryDataDropOption}</Select>
								</Col>
								<Col span={5}>医院：<Select style={{ width: "150px", "margin": "15px" }} value={this.state.hospID} onChange={this.onChangeAD}>{HospOption}</Select></Col>
								<Col span={5}>
									数据：<Select
										optionFilterProp="children"
										showSearch
										style={{ width: "150px", "margin": "15px" }}
										value={this.state.dictionaryTypeID}
										onChange={this.onChangeAB}
										allowClear
									>{tableDataCodeOption}</Select></Col>
								<Col span={3}><Button style={{ "margin": "15px" }} onClick={this.onClickContrast}>对照</Button></Col>
							</Row>
							<Row>
								<Table
									className="outpatient-body"
									style={{ width: '1100px', "padding": "30px", height: "500px", border: '7px soild #eeeeee' }}
									dataSource={this.state.wdnmddata}
									columns={this.wdnmdcolumns}
									bordered
									pagination={false}
								/>
								<CommonPagination size="small" current={this.state.page2} total={this.state.total2} search='search'
									onShowSizeChange={this.apponShowSizeChange2} complete={true} dataSource={this.state.wdnmddata}
									onChange={this.appPageChange2} />
							</Row>
						</TabPane>
					</Tabs>
				</Card>
				<Modal
					visible={this.state.modal1Visible}
					onCancel={this.handleCancel}
					onOk={this.dictionaryTypeAdd}
					cancelText="取消"
					okText="保存"
					width='800px'
					title={this.state.topic + "类型"}
				>
					<Row span={16}>
						<Col span={8}>代码：<Input style={{ width: "150px", "margin": "10px" }} value={this.state.dictionaryTypeCode} onChange={this.onChangeTypeCode} /></Col>
						<Col span={8}>名称：<Input style={{ width: "150px", "margin": "10px" }} value={this.state.dictionaryTypeDesc} onChange={this.onChangeTypeDesc} /></Col>
						<Col span={8}>
							基础数据：
							<Select
								style={{ width: "150px", "margin": "10px" }}
								optionFilterProp="children"
								value={this.state.tableDataID}
								onChange={this.onChangeTypeTaID}
								showSearch
							>{TableDataDropOption}</Select></Col>
					</Row>
				</Modal>
				<Modal
					visible={this.state.modal2Visible}
					width='700px'
					title={this.state.topic + "字典数据"}
					footer={false}
				>
					<Form layout="inline">
						<Row>
							<Col>
								<Form.Item label="机构">
									{getFieldDecorator('compOrgID', {
										initialValue: userInfo.compOrgID
									})(
										<Select style={{ width: '150px' }}>{DataCompOrgDropOption}</Select>
									)}
								</Form.Item>
								<Form.Item label="代码">
									{getFieldDecorator('code', {
										initialValue: userInfo.code
									})(
										<Input style={{ width: '150px' }} />
									)}
								</Form.Item>
								<Form.Item label="名称">
									{getFieldDecorator('descripts', {
										initialValue: userInfo.descripts
									})(
										<Input style={{ width: '150px' }} />
									)}
								</Form.Item>
							</Col>
							<Col>
								<Button onClick={this.handleSubmit.bind(this)} style={{ margin: '10px', float: 'right' }}>保存</Button>
								<Button onClick={this.handleCancelOrg} style={{ margin: '10px', float: 'right' }}>取消</Button>
							</Col>
						</Row>
					</Form>
				</Modal>
			</div>
		)
	}
}
export default Form.create()(DictionaryTypeDataComparison);