<template>
	<view style="width: 96%;margin: 10px auto;">
		<view style=" display: flex;align-items: center;margin: 10rpx 0;">
			<view style="border-left: 4px solid #4192F4;height: 20px;margin-right: 10rpx;"></view>
			<view style="font-size: 32rpx;color: #4192F4;">干预目标</view>
		</view>
		<view>
			<view style="border: 1px solid #ccc;">
				<view class="tableTitle" style="display: flex;border-bottom: 1px solid #ccc;">
					<view class="tableHead">健康指标</view>
					<view class="tableHead" style="border-left: 1px solid #ccc;border-right: 1px solid #ccc;">本次测量值
					</view>
					<view class="tableHead">干预目标</view>
				</view>
				<view class="tableTr">
					<view style="display: flex;align-items: center;">
						<view>血糖</view>
						<view>
							<view style="border-right: 1px solid #ccc;border-left: 1px solid #ccc;">空腹血糖</view>
							<view
								style="border-right: 1px solid #ccc;border-left: 1px solid #ccc;border-top: 1px solid #ccc;">
								HbA1c(%)</view>
						</view>
					</view>
					<view style="border-bottom: 1px solid #ccc;">
						<view style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;">
							{{ nurseDetailData.performanceRecord.fbg ? nurseDetailData.performanceRecord.fbg : '-'}}
						</view>
						<view style="border-right: 1px solid #ccc;">
							{{ nurseDetailData.performanceRecord.randomGlycoprotein ? nurseDetailData.performanceRecord.randomGlycoprotein : '-' }}
						</view>
					</view>
					<view style="border-bottom: 1px solid #ccc;">
						<view style="border-bottom: 1px solid #ccc;">{{ domData }}</view>
						<view>{{ domData1 }}</view>
					</view>
				</view>

				<view class="tableTr">
					<view style="display: flex;align-items: center;border-top: 1px solid #ccc;">
						<view>血压</view>
						<view>
							<view
								style="border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;">
								舒张压
							</view>
							<view style="border-right: 1px solid #ccc;border-left: 1px solid #ccc;">收缩压</view>
						</view>
					</view>
					<view style="border-bottom: 1px solid #ccc;">
						<view style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;">
							{{ nurseDetailData.performanceRecord.dbp ? nurseDetailData.performanceRecord.dbp : '-' }}
						</view>
						<view style="border-right: 1px solid #ccc;">
							{{ nurseDetailData.performanceRecord.sbp ? nurseDetailData.performanceRecord.sbp : '-' }}
						</view>
					</view>
					<view style="border-bottom: 1px solid #ccc;">
						<view style="border-bottom: 1px solid #ccc;">{{ domData2 }}</view>
						<view>{{ domData3 }}</view>
					</view>
				</view>

				<view class="tableTr">
					<view
						style="display: flex;align-items: center;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;">
						<view>血脂</view>
						<view>
							<view
								style="border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;">
								TC
							</view>
							<view
								style="border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;">
								TG
							</view>
							<view style="border-left: 1px solid #ccc;border-right: 1px solid #ccc;">HDL-C</view>
						</view>
					</view>
					<view>
						<view style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;">
							{{ nurseDetailData.performanceRecord.tc ? nurseDetailData.performanceRecord.tc : '-' }}
						</view>
						<view style="border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;">
							{{ nurseDetailData.performanceRecord.tg ? nurseDetailData.performanceRecord.tg : '-' }}
						</view>
						<view style="border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;">
							{{ nurseDetailData.performanceRecord.hdl ? nurseDetailData.performanceRecord.hdl : '-' }}
						</view>
					</view>
					<view>
						<view style="border-bottom: 1px solid #ccc;">{{ domData4 }}</view>
						<view style="border-bottom: 1px solid #ccc;">{{ domData5 }}</view>
						<view style="border-bottom: 1px solid #ccc;">{{ domData6 }}</view>
					</view>
				</view>

				<view class="tableTr">
					<view style="display: flex;align-items: center;">
						<view style="border-right: 1px solid #ccc;">体质指数</view>
					</view>
					<!-- <view style="border-right: 1px solid #ccc;">1</view> -->
					<view style="border-right: 1px solid #ccc;">
						{{ nurseDetailData.performanceRecord.bmi ? nurseDetailData.performanceRecord.bmi : '-' }}
					</view>
					<view>{{ domData7 }}</view>
				</view>
			</view>
		</view>
		<view style=" display: flex;align-items: center;margin: 10rpx 0;">
			<view style="border-left: 4px solid #4192F4;height: 20px;margin-right: 10rpx;"></view>
			<view style="font-size: 32rpx;color: #4192F4;">用药指导</view>
		</view>
		<view>
			<view style="border: 1px solid #ccc;">
				<view class="tableTitle" style="display: flex;border-bottom: 1px solid #ccc;">
					<view class="tableHead" style="border-right:1px solid #ccc;">用药名称</view>
					<view class="tableHead" style="border-right:1px solid #ccc;">用药类型</view>
					<view class="tableHead" style="border-right:1px solid #ccc;">用药单位</view>
					<view class="tableHead" style="border-right:1px solid #ccc;">次剂量</view>
					<view class="tableHead">用药频次</view>
				</view>
				<view class="itemTr" style="display: flex;text-align: center;align-items: center;"
					v-for="(item,index) in nurseDetailData.drugProtocolList" :key="index">
					<view style="flex:1;border-right:1px solid #ccc;">{{ item.medicineName }}</view>
					<view style="flex:1;border-right:1px solid #ccc;">{{ item.medicineTypeName }}</view>
					<view style="flex:1;border-right:1px solid #ccc;">{{ item.usage }}</view>
					<view style="flex:1;border-right:1px solid #ccc;">{{ item.dosage }}</view>
					<view style="flex:1">{{ item.frequency }}</view>
				</view>
			</view>
		</view>
		<view style=" display: flex;align-items: center;margin: 10rpx 0;">
			<view style="border-left: 4px solid #4192F4;height: 20px;margin-right: 10rpx;"></view>
			<view style="font-size: 32rpx;color: #4192F4;">既往用药</view>
		</view>
		<view>
			<view style="border: 1px solid #ccc;">
				<view class="tableTitle" style="display: flex;border-bottom: 1px solid #ccc;">
					<view class="tableHead" style="border-right:1px solid #ccc;">用药名称</view>
					<view class="tableHead" style="border-right:1px solid #ccc;">用药单位</view>
					<view class="tableHead" style="border-right:1px solid #ccc;">用药次剂量</view>
					<view class="tableHead">用药频次</view>
				</view>
				<view class="itemTr" style="display: flex;text-align: center;align-items: center;"
					v-for="(item,index) in nurseDetailData.protocolList" :key="index">
					<view style="flex:1;border-right:1px solid #ccc;">{{ item.medicineName }}</view>
					<view style="flex:1;border-right:1px solid #ccc;">{{ item.usage }}</view>
					<view style="flex:1;border-right:1px solid #ccc;">{{ item.dosage }}</view>
					<view style="flex:1">{{ item.frequency }}</view>
				</view>
			</view>

		</view>
		<view style=" display: flex;align-items: center;margin: 10rpx 0;">
			<view style="border-left: 4px solid #4192F4;height: 20px;margin-right: 10rpx;"></view>
			<view style="font-size: 32rpx;color: #4192F4;">处方</view>
		</view>
		<view>
			<view><span style="color: #4192f4;">健康教育处方：</span>
				<view style="display: inline;"
					v-html="nurseDetailData.prescription.healthEducation ? nurseDetailData.prescription.healthEducation : '无' ">
				</view>
			</view>
			<view style="margin: 6px 0;"><span style="color: #4192f4;">运动治疗处方：</span>
				<view style="display: inline;"
					v-html="nurseDetailData.prescription.exercise ? nurseDetailData.prescription.exercise : '无' ">
				</view>
			</view>
			<view><span style="color: #4192f4;">营养治疗处方：</span>
				<view style="display: inline;"
					v-html="nurseDetailData.prescription.nutritional ? nurseDetailData.prescription.nutritional : '无' ">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNurseListDetail
	} from '@/api/pagesC/nurseRecord/index.js'
	export default {
		data() {
			return {
				perRecordId: '',
				nurseDetailData: '',
				// 干预目标接收渲染数据
				domData: "-",
				domData1: "-",
				domData2: "-",
				domData3: "-",
				domData4: "-",
				domData5: "-",
				domData6: "-",
				domData7: "-",
			};
		},
		onLoad(e) {
			console.log(e);
			this.perRecordId = e.perRecordId
			this.getNurseDetail()
		},
		methods: {
			getNurseDetail() {
				getNurseListDetail(this.perRecordId).then(res => {
					// console.log(res);
					this.nurseDetailData = res.data
					this.interveneTargetData = res.data.interveneTarget;
					for (let item in this.interveneTargetData) {
						let targetData = this.interveneTargetData[item].target;
						let targetItemData = this.interveneTargetData[item].targetItem;
						if (targetData == "血糖" && targetItemData == "空腹") {
							if (!this.interveneTargetData[item].targetValueMin) {
								this.domData = "<" + this.interveneTargetData[item].targetValueMax;
							} else if (!this.interveneTargetData[item].targetValueMax) {
								this.domData = ">" + this.interveneTargetData[item].targetValueMin;
							} else {
								this.domData =
									this.interveneTargetData[item].targetValueMin +
									"-" +
									this.interveneTargetData[item].targetValueMax;
							}
						}
						if (targetData == "血糖" && targetItemData == "HbA1c") {
							if (!this.interveneTargetData[item].targetValueMin) {
								this.domData1 = "<" + this.interveneTargetData[item].targetValueMax;
							} else if (!this.interveneTargetData[item].targetValueMax) {
								this.domData1 = ">" + this.interveneTargetData[item].targetValueMin;
							} else {
								this.domData1 =
									this.interveneTargetData[item].targetValueMin +
									"-" +
									this.interveneTargetData[item].targetValueMax;
							}
						}
						if (targetData == "血压" && targetItemData == "收缩压") {
							if (!this.interveneTargetData[item].targetValueMin) {
								this.domData2 = "<" + this.interveneTargetData[item].targetValueMax;
							} else if (!this.interveneTargetData[item].targetValueMax) {
								this.domData2 = ">" + this.interveneTargetData[item].targetValueMin;
							} else {
								this.domData2 =
									this.interveneTargetData[item].targetValueMin +
									"-" +
									this.interveneTargetData[item].targetValueMax;
							}
						}
						if (targetData == "血压" && targetItemData == "舒张压") {
							if (!this.interveneTargetData[item].targetValueMin) {
								this.domData3 = "<" + this.interveneTargetData[item].targetValueMax;
							} else if (!this.interveneTargetData[item].targetValueMax) {
								this.domData3 = ">" + this.interveneTargetData[item].targetValueMin;
							} else {
								this.domData3 =
									this.interveneTargetData[item].targetValueMin +
									"-" +
									this.interveneTargetData[item].targetValueMax;
							}
						}
						if (targetData == "血脂" && targetItemData == "TC") {
							if (!this.interveneTargetData[item].targetValueMin) {
								this.domData4 = "<" + this.interveneTargetData[item].targetValueMax;
							} else if (!this.interveneTargetData[item].targetValueMax) {
								this.domData4 = ">" + this.interveneTargetData[item].targetValueMin;
							} else {
								this.domData4 =
									this.interveneTargetData[item].targetValueMin +
									"-" +
									this.interveneTargetData[item].targetValueMax;
							}
						}
						if (targetData == "血脂" && targetItemData == "TG") {
							if (!this.interveneTargetData[item].targetValueMin) {
								this.domData5 = "<" + this.interveneTargetData[item].targetValueMax;
							} else if (!this.interveneTargetData[item].targetValueMax) {
								this.domData5 = ">" + this.interveneTargetData[item].targetValueMin;
							} else {
								this.domData5 =
									this.interveneTargetData[item].targetValueMin +
									"-" +
									this.interveneTargetData[item].targetValueMax;
							}
						}
						if (targetData == "血脂" && targetItemData == "HDL-C") {
							if (!this.interveneTargetData[item].targetValueMin) {
								this.domData6 = "<" + this.interveneTargetData[item].targetValueMax;
							} else if (!this.interveneTargetData[item].targetValueMax) {
								this.domData6 = ">" + this.interveneTargetData[item].targetValueMin;
							} else {
								this.domData6 =
									this.interveneTargetData[item].targetValueMin +
									"-" +
									this.interveneTargetData[item].targetValueMax;
							}
						}
						if (targetData == "体质指数" && targetItemData == "体质指数") {
							if (!this.interveneTargetData[item].targetValueMin) {
								this.domData7 = "<" + this.interveneTargetData[item].targetValueMax;
							} else if (!this.interveneTargetData[item].targetValueMax) {
								this.domData7 = ">" + this.interveneTargetData[item].targetValueMin;
							} else {
								this.domData7 =
									this.interveneTargetData[item].targetValueMin +
									"-" +
									this.interveneTargetData[item].targetValueMax;
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tableTitle {
		.tableHead {
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			flex: 1;
			background-color: #F7F7F7;
		}
	}

	.itemTr {
		border-bottom: 1px solid #ccc;
	}

	.itemTr:last-child {
		border-bottom: none;
	}

	.tableTr {
		text-align: center;
		align-items: center;
		display: flex;

		view {
			flex: 1;
		}
	}
</style>