/** 
 * Creator:     JYW
 * CreatDate:   2019-04-24
 * descripts：  备忘录(护士交班)组件
*/
import React from 'react'
import { message, Row, Col, List, Icon, Pagination, Modal } from 'antd';
import AddMemorandum from './AddMemorandum'
import { $http } from '../../../containers/config/https';
import '../BedChart/CSS/bedchart.less'

const confirm = Modal.confirm;
let user;
class Memorandum extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			admID: "",
			locID: "",
			memorandumInfo: [],
			total: 0,
			page: 1,
			pageSize: 7,
			clickRecord: "",
		}
		user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
	}

	static getDerivedStateFromProps(nextProps, prevState) {
		if (nextProps.admID !== prevState.admID || nextProps.locID !== prevState.locID || nextProps.reloading !== prevState.reloading) {
			return {
				admID: nextProps.admID,
				locID: nextProps.locID,
				reloading: nextProps.reloading
			}
		}
		return null
	}

	componentDidMount() {
		this.getMemorandumInfo("", this.props.locID);
	}

	componentDidUpdate(nextProps, prevState) {
		if (prevState.admID !== this.state.admID || prevState.locID !== this.state.locID || prevState.reloading !== this.state.reloading) {
			this.getMemorandumInfo(this.state.admID, this.state.locID);
		}
	}

	// componentWillReceiveProps(nextProps) {
	// 	if ((this.props.admID !== nextProps.admID) || (this.props.locID !== nextProps.locID) || (nextProps.reloading)) {
	// 		this.setState({ admID: nextProps.admID, locID: nextProps.locID })
	// 		if ((nextProps.admID !== "") || (nextProps.locID != "")) {
	// 			this.getMemorandumInfo(nextProps.admID, nextProps.locID);
	// 		}
	// 		else {
	// 			//未点击患者
	// 			this.setState({ memorandumInfo: [] });
	// 		}
	// 	}
	// }

	componentWillUnmount() {
		this.setState = (state, callback) => {
			return
		}
	}

	/**
	 * 获取交班信息
	 */
	getMemorandumInfo = (admID, locID) => {
		let data = {
			params: [{
				admID: admID,
				locID: locID,
				userID: user.userID,
				active: "Y",
			}],
			pagination: [{
				pageSize: this.state.pageSize,
				currentPage: this.state.page
			}]
		}
		$http.post('urlDeault', this, {
			code: "04020016",
			data: data,
			success: (res) => {
				if (+res.errorCode === 0) {
					this.setState({
						memorandumInfo: res.result.data,
						total: res.result.total,
					});
				}
			}
		})
	}

	addMemorandum = (e) => {
		e.stopPropagation();
		this.AddMemorandum.showModal();
	}

	// 绑定子组件
	onRef = (ref) => {
		this.AddMemorandum = ref
	}

	//双击备忘
	onDoubleClick(record, e) {
		e.stopPropagation();
		this.setState({
			clickRecord: record,
		}, () => {
			this.AddMemorandum.editModal();
		})
	}

	//点击备忘
	onClick(record, e) {
		if (this.state.clickRecord.id === record.id) {
			record = "";
		}
		this.setState({
			clickRecord: record,
		})
	}

	//分页切换
	changePageSize(current, pageSize) {
		this.setState({ pageSize: pageSize, page: current }, () => {
			this.getMemorandumInfo(this.props.admID, this.props.locID);
		});
	}

	//分页切换
	onChange = (page, pageSize) => {
		this.setState({ page: page }, () => {
			this.getMemorandumInfo(this.props.admID, this.props.locID);
		});
	}

	//删除备忘
	handleDelete = (id, e) => {
		var that = this;
		confirm({
			title: '提示',
			content: "是否删除备忘?",
			onOk() {
				let data = {
					params: [{
						id: id,
						userID: user.userID,
					}]
				}
				$http.post('urlDeault', that, {
					code: "04020017",
					data: data,
					success: (res) => {
						if (+res.errorCode === 0) {
							message.success("删除成功");
							that.getMemorandumInfo(that.props.admID, that.props.locID);
						}
					}
				})
			}
		})
	}

	render() {
		return (
			<div className="memorandum" style={{ height: '100%' }}>
				<Row>
					<Col
						span={14}
						className="title" >
						<div className="memorandumimg" >
						</div>
						备忘录
					</Col>
					<Col
						className="title"
						style={{ margin: '0px !important', color: '#40A9FF' }}
						span={8}
						onClick={this.addMemorandum}
					>
						<Icon type="plus" /> 添加
					</Col>
				</Row>
				<Row style={{ height: 'calc(100% - 50px)' }}>
					<List
						className="memorandumInfo"
						style={{ height: 'calc(100% - 30px)' }}
						bordered={false}
						dataSource={this.state.memorandumInfo}
						renderItem={
							item => (
								<List.Item key={item.id}>
									<div className="itemInfo" style={{ background: this.state.clickRecord.id === item.id ? "#40A9FF" : "#FFFFFF" }}
										onClick={this.onClick.bind(this, item)}
										onDoubleClick={this.onDoubleClick.bind(this, item)}>
										<div className="ant-timeline-item-head  ant-timeline-item-head-green" ></div>
										<div>
											<div style={{ width: '80%', float: 'left' }}>{item.title}</div>
											<Icon type="delete" style={{ color: "red" }} onClick={this.handleDelete.bind(this, item.id)} />
											<div style={{ fontWeight: 'bold', color: '#F759AB' }}>{item.bedCode}&nbsp;&nbsp;&nbsp;{item.patName}</div>
										</div>
									</div>
								</List.Item>)
						}
					/>
					<Pagination
						size="small"
						showSizeChanger
						defaultCurrent={1}
						pageSizeOptions={['7', '15', '30', '40']}
						current={this.state.page}
						total={this.state.total}
						onShowSizeChange={this.changePageSize.bind(this)}
						onChange={this.onChange.bind(this)}
						style={{ marginTop: '6px' }}
					/>
					{/*<CommonPagination
							size='small'
							current={this.state.page}
							total={this.state.total}
                            search='search'
                            complete={false}
							onShowSizeChange={this.changePageSize.bind(this)}
							dataSource={this.state.memorandumInfo}
							onChange={this.onChange.bind(this)}
						/>*/}
				</Row>
				<AddMemorandum
					locID={this.props.locID}
					admID={this.props.admID}
					onRef={this.onRef}
					handelThis={this}
					record={this.state.clickRecord}
					componentType={this.props.componentType ? this.props.componentType : ""}       //默认使用为病区床位图，"Delivery":产房使用
				/>
			</div>
		)
	}
}
export default Memorandum;
