// 处方预览
import React from "react";
import store from 'store';
import {Row, Col, Card} from "antd";
import '../style/outpha.less';

/*
处方预览所需参数（可以参照处方审核界面传参 --- PrescriptionChecking ）

	1、setMessage：国际化方法
	2、mainInfoObj：主数据 --- 科室，病人ID……      ----- 对象
	3、basicHeight： 除去预览高度 --- 查询栏高度
	4、rowId：数据列表选中行ID
	5、detailData：PR明细数据 ---- 数组

*/

export default class PreviewOfPrescription extends React.Component {
	// 西药时需要处理关联医嘱
	processAssociatedData = (data) => {
		let tempArr = [];
		let afterData = [];
		if (!(data&&data.length > 0)) {
			return afterData;
		}
		for (let i = 0; i < data.length; i++) {
			if (tempArr.indexOf(data[i].ordMainID) === -1) {
				afterData.push({
					ordMainID: data[i].ordMainID,
					children: [data[i]]
				});
				tempArr.push(data[i].ordMainID);
			} else {
				for (let j = 0; j < afterData.length; j++) {
					if (afterData[j].ordMainID == data[i].ordMainID) {
						afterData[j].children.push(data[i]);
						break;
					}
				}
			}
		}
		// console.log(afterData);
		return afterData;
	}

	render() {
		let {mainInfoObj, basicHeight, rowId, detailData} = this.props

		let colTop = {
			xs: {span: 12},
			sm: {span: 12},
			md: {span: 10},
			lg: {span: 10},
			xl: {span: 10},
			xxl: {span: 8}
		};
		let colBottom = {
			xs: {span: 12},
			sm: {span: 12},
			md: {span: 14},
			lg: {span: 14},
			xl: {span: 14},
			xxl: {span: 16}
		}
		return (
			<Card
				size="small"
				title={this.props.setMessage("PrescriptionReviewprescriptionNotes", "descripts", "处方笺")}
				// extra={<a href="#">More</a>}
				className="catd-head-bg-img prescription"
			>
				<div style={{height: store.getState().tableHeight.y + 198 - basicHeight + 'px', overflow: 'hidden'}}>
					<p style={{textAlign: 'center', display: !rowId ? 'block' : 'none', textDecoration: 'underline'}}>{this.props.setMessage("PrescriptionReviewviewPrescriptionFormTips", "descripts", "选择左侧处方来查看处方单")}</p>
					{/* 麻醉剂药品处方：'pink'、急诊处方：、儿科处方：、普通处方：#fff */}
					<div style={{
						width: '100%',
						height: '100%',
						display: rowId ? 'block' : 'none', 
						background: mainInfoObj&&mainInfoObj.backGroupColor ? mainInfoObj.backGroupColor : '#fff'
					}}>
						<div style={{borderBottom: '1px solid #ccc', paddingTop: '12px'}}>
							<h1 style={{textAlign: 'center', position: 'relative', fontSize: '24px', marginBottom: '24px'}}>
								{mainInfoObj.hospDesc}{this.props.setMessage("PrescriptionReviewprescriptionNotes", "descripts", "处方笺")}
								<span style={{position: 'absolute', right: '10px', top: '10px', fontSize: '14px', fontWeight: 100, textAlign: 'right', color:'rgba(153,153,153,1)'}}>
									<Row>{mainInfoObj.prescType}</Row>
									<Row>{this.props.setMessage("PrescriptionReviewordPrescNo", "descripts", "处方号")}：{mainInfoObj.ordPrescNo}</Row>
								</span>
							</h1>
							<div style={{padding: '0 48px 12px', fontSize: '14px'}}>
								<Row>
									<Col span={6}>
										{this.props.setMessage("PrescriptionReviewloc", "descripts", "科室")}{mainInfoObj.ordLocDesc}
									</Col>
									<Col span={6}>
										{this.props.setMessage("PrescriptionReviewpatID", "descripts", "病人ID")}{mainInfoObj.patNo}
									</Col>
									<Col span={6}>
										{this.props.setMessage("PrescriptionReviewdate", "descripts", "日期")}{mainInfoObj.ordDate}
									</Col>
									<Col span={6}>
										{this.props.setMessage("PrescriptionReviewcostCategory", "descripts", "费别")}{mainInfoObj.admReasonDesc}
									</Col>
								</Row>
								<Row style={{margin: '4px 0'}}>
									<Col span={6}>
										{this.props.setMessage("PrescriptionReviewpatName", "descripts", "患者")}{mainInfoObj.patName}
									</Col>
									<Col span={6}>
										{this.props.setMessage("PrescriptionReviewpatSexDesc", "descripts", "性别")}{mainInfoObj.patSexDesc}
									</Col>
									<Col span={6}>
										{this.props.setMessage("PrescriptionReviewpatAge", "descripts", "年龄")}{mainInfoObj.patAge}
									</Col>
									<Col span={6}>
										{this.props.setMessage("PrescriptionReviewpatWeight", "descripts", "体重")}{mainInfoObj.patWeight}
									</Col>
								</Row>
								<Row>
										{this.props.setMessage("PrescriptionReviewadmDiag", "descripts", "诊断")}{mainInfoObj.admDiag}
								</Row>
							</div>
						</div>
						{/* mainInfoObj.cmPrescFlag === '1' 中草药格式 */}
						<div 
							style={{
								borderBottom: '1px solid #ccc', padding: '0 24px', 
								height: store.getState().tableHeight.y - 60 - basicHeight + 'px', overflow: 'auto'
							}} 
							className="pr-style prescription-bar"
						>
							<h1 style={{fontSize: '20px'}}>Rp:</h1>
							{mainInfoObj.cmPrescFlag === '1'? <div className="marginRight">
								<Row>
									{detailData&&detailData.map((item, index) => {
										return (
											<Col span={8} key={index} style={{marginBottom: '20px'}}>
												{item.medDesc}
												<span style={{marginLeft: '8px', position: 'relative', display: 'inline-block'}}>
													{item.ordQty + item.ordUnitDesc}
													{item.ordCMNote ? <b style={{position: 'absolute', top: '-8px', right: '-30px', fontWeight: 900, fontSize: '12px', color: 'blue', display: 'inline-blick'}}>{'(' + item.ordCMNote + ')'}</b> : ''}
												</span>
											</Col>
										)
									})}
								</Row>
								<div style={{textAlign: 'center', paddingRight: '150px'}}>
									--------------------------------------------------
									<span style={{fontWeight: '900'}}>{this.props.setMessage("PrescriptionReviewblank", "descripts", "(以下空白)")}</span>
									--------------------------------------------------
								</div>
								<Row style={{fontWeight: '900', }}>
									{this.props.setMessage("PrescriptionReviewusage", "descripts", "用法")}：{mainInfoObj.cmFreqDesc + '，' + mainInfoObj.cmExplainDesc + '，' + mainInfoObj.cmUsageDesc}
									<span style={{margin: '0 8px'}}>{this.props.setMessage("PrescriptionReviewtotal", "descripts", "共：") + mainInfoObj.cmFac + this.props.setMessage("PrescriptionReviewdoses", "descripts", "剂")}</span>
									{mainInfoObj.cmCookTypeDesc}
								</Row>
							</div>: <div>
								<ul style={{fontSize: '14px', paddingLeft: '24px'}}>
										{this.processAssociatedData(detailData).map((item, index) => {
											let childrenArr = item.children&&item.children.length ? item.children : [];
											let num = item.children&&item.children.length ? item.children.length : 0;
											return (
												<li key={index}>
													<div style={{paddingLeft: "24px", position: 'relative'}} className="prescription-list">
														<span style={{position: "absolute", left: 0, top: 0, display: 'inline-block', lineHeight: "30px"}}>{index + 1}、</span>
														{item.children&&item.children.map((childItem, childIndex) => {
															return (
																<div key={childIndex} style={{lineHeight: "30px"}}>
																	<span style={{display: "inline-block", width: "300px"}}>{childItem.medDesc}</span>
																	<span style={{display: "inline-block", width: "250px", marginRight: "50px", textAlign: "right"}}>
																		{childItem.medSpec}
																		<span style={{margin: '0 6px'}}>x</span>
																		{childItem.ordQty + childItem.ordUnitDesc}
																	</span>
																	<span style={{display: num > 1 ? "inline-block" : "none", width: "60px", textAlign: "right", borderRight: '1px solid #333', paddingRight: '10px'}}>
																		{childItem.ordDoseUnitDesc}
																	</span>
																	<span style={{display: num > 1 ? "inline-block" : "none"}} className={num > 1 ? "show-last-span" : ""}>
																		<span style={{margin: "0 10px"}}>X</span> {childItem.ordDurationDesc}
																	</span>
																</div>
															)
														})}
													</div>
													<Row className="marginRight">{this.props.setMessage("PrescriptionReviewusage", "descripts", "用法")}：{
														(item&&item.children&&item.children.length > 1 ? '' : item.children[0].ordDoseUnitDesc) +  ' ' + 
														(item&&item.children&&item.children[0]&&item.children[0].ordFreqDesc ? item.children[0].ordFreqDesc : "") + ' ' + 
														(item&&item.children&&item.children[0]&&item.children[0].ordUsageDesc ? item.children[0].ordUsageDesc : "")+ ' ' + 
														(item&&item.children&&item.children.length > 1 ? '' :  item.children[0].ordDurationDesc)}
													</Row>
												</li>
											)
										})}
									</ul>
									<div className="diagonal"></div>
								</div>}
							</div>
							<div style={{padding: '12px'}}>
								<Row style={{marginBottom: '4px'}}>
									<Col span={8}>
										<Row>
											<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewdoctorSignName", "descripts", "医生签名")}</Col>
											<Col {...colBottom}>{mainInfoObj.ordDocDesc}</Col>
										</Row>
									</Col>
									<Col span={8}>
										<Row>
											<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewcheck", "descripts", "审核")}</Col>
											<Col {...colBottom}>{mainInfoObj.auditUserName}</Col>
										</Row>
									</Col>
									<Col span={8}>
										<Row>
											<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewamount", "descripts", "金额")}</Col>
											<Col {...colBottom}>{mainInfoObj.prescAmt}</Col>
										</Row>
									</Col>
								</Row>
								<Row>
									<Col span={8}>
										<Row>
											<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewprovisioning", "descripts", "调配")}</Col>
											<Col {...colBottom}></Col>
										</Row>
									</Col>
									<Col span={8}>
										<Row>
											<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewverify", "descripts", "核对")}</Col>
											<Col {...colBottom}></Col>
										</Row>
									</Col>
									<Col span={8}>
										<Row>
											<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewdrugDistribution", "descripts", "发药")}</Col>
											<Col {...colBottom}></Col>
										</Row>
									</Col>
								</Row>
								{/* <p style={{textAlign: 'center', marginTop: '12px', marginBottom: 0}}>本处方当前有效</p> */}
							</div>
						</div>
				</div>
			</Card>
		)
	}
}