<template>
	<view class="app">
		<view class="lefttext">
			<view class="">
				复诊日期
			</view>
			<view :class="currentValue == index ? 'showitem' : ''" v-for="(item, index) in timeList" :key="item.value"
				@click="currentInfo(index)" @tap="detail(item)">
				{{item.label}}
			</view>
		</view>
		<view class="righttext">
			<view class="title">
				<view class="left">
				</view>
				<view class="right">
					基本信息
				</view>
			</view>
			<view class="information">
				<view class="p1">
					<view class="p1left">
						姓名：
					</view>
					<text>{{name}}</text>
				</view>
				<view class="p1">
					<view class="p1left">
						复诊日期：
					</view>
					<text>{{pageInfo.performanceDate}}</text>
				</view>
			</view>

			<view class="title">
				<view class="left">
				</view>
				<view class="right">
					体征
				</view>
			</view>

			<view class="information sign">
				<view class="p1">
					<view class="p1left">
						收缩压：
					</view>
					<text>{{pageInfo.sbp}}mmHg</text>
				</view>
				<view class="p1">
					<view class="p1left">
						舒张压：
					</view>
					<text>{{pageInfo.dbp}}mmHg</text>
				</view>
				<view class="p1">
					<view class="p1left">
						血糖：
					</view>
					<text>{{pageInfo.fbg ? pageInfo.fbg : pageInfo.pbg }}mmHg</text>
				</view>
				<view class="p1">
					<view class="p1left">
						心率：
					</view>
					<text>{{pageInfo.hr}}次/分钟</text>
				</view>
				<view class="p1">
					<view class="p1left">
						身高：
					</view>
					<text>{{pageInfo.height}}cm</text>
				</view>
				<view class="p1">
					<view class="p1left">
						体重：
					</view>
					<text>{{pageInfo.weight}}kg</text>
				</view>
				<view class="p1">
					<view class="p1left">
						体质指数：
					</view>
					<text>{{pageInfo.bmi}}Kg/㎡</text>
				</view>
				<view class="p1">
					<view class="p1left">
						控制是否满意：
					</view>
					<text v-if="pageInfo.satisfied == '1'">控制满意</text>
					<text v-if="pageInfo.satisfied == '0'">控制不满意</text>
				</view>
			</view>

			<view class="title">
				<view class="left">
				</view>
				<view class="right">
					目前用药情况
				</view>
			</view>

			<view>
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">药物名称</uni-th>
						<uni-th width="150" align="center">用药频次</uni-th>
						<uni-th align="center">用药次剂量</uni-th>
						<uni-th width="204" align="center">用药单位</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in mqyyTableData" :key="index">
						<uni-td align="center">{{ item.medicineName }}</uni-td>
						<uni-td align="center">{{ item.freq }}</uni-td>
						<uni-td align="center">{{ item.dose }}</uni-td>
						<uni-td align="center">{{ item.unit }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<view class="title">
				<view class="left">
				</view>
				<view class="right">
					调整用药
				</view>
			</view>

			<view>
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">药物名称</uni-th>
						<uni-th width="150" align="center">用药频次</uni-th>
						<uni-th align="center">用药次剂量</uni-th>
						<uni-th width="204" align="center">用药单位</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tzyyTableData" :key="index">
						<uni-td align="center">{{ item.medicineName }}</uni-td>
						<uni-td align="center">{{ item.freq }}</uni-td>
						<uni-td align="center">{{ item.dose }}</uni-td>
						<uni-td align="center">{{ item.unit }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<view class="title">
				<view class="left">
				</view>
				<view class="right">
					其他项目
				</view>
			</view>
			<view class="information">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">项目</uni-th>
						<uni-th width="150" align="center">问题描述</uni-th>
						<uni-th width="150" align="center">处置详细</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in qtxmTableData" :key="index">
						<uni-td align="center">{{ item.projectName }}</uni-td>
						<uni-td align="center">{{ item.content }}</uni-td>
						<uni-td align="center">{{ item.descripe }}</uni-td>
					</uni-tr>
					<uni-tr v-for="(item, index) in qtxmTableData" :key="index">
						<uni-td>
							<view @click="qtxmPicFun1(item.attachments1)">
								<image v-if="item.attachments1" style="width: 100%;height: 100px;"
									:src="'data:image/jpeg;base64' + item.attachments1"></image>
							</view>
						</uni-td>
						<uni-td>
							<view @click="qtxmPicFun2(item.attachments2)">
								<image v-if="item.attachments2" style="width: 100%;height: 100px;"
									:src="'data:image/jpeg;base64' + item.attachments2"></image>
							</view>
						</uni-td>
						<uni-td>
							<view @click="qtxmPicFun3(item.attachments3)">
								<image v-if="item.attachments3" style="width: 100%;height: 100px;"
									:src="'data:image/jpeg;base64' + item.attachments3"></image>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>


		</view>
		<!-- 其他项目照片弹出层 -->
		<u-popup :show="show2" @close="close" mode="center">
			<view style="text-align: center;">
				<image :src="'data:image/jpeg;base64' + fileImgSrc" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getSubsequentVisitTime,
		getSubsequentVisitDetail
	} from "@/api/pagesC/Healthrecords/index.js"
	export default {
		data() {
			return {
				show2: false,
				fileImgSrc: '',
				mqyyTableData: [],
				tzyyTableData: [],
				qtxmTableData: [],
				currentValue: 0,
				identity: uni.getStorageSync('userinfo').identity,
				name: uni.getStorageSync('userinfo').residentName,
				timeList: [],
				pageInfo: {},
				saltSituation: {
					'1': '轻',
					'2': '中',
					'3': '重'
				},
				followupWay: {
					'1': '门诊',
					'2': '家庭',
					'3': '电话',
					'99': '其他',
				},
				symptom: {
					'0': '无症状',
					'1': '头晕头疼',
					'2': '恶心呕吐',
					'3': '眼花耳鸣',
					'4': '呼吸困难',
					'5': '心悸胸闷',
					'6': '鼻衄出血不止',
					'7': '四肢发麻',
					'8': '下肢水肿',
					'99': '其他症状',
				},
				complianceState: {
					'1': '良好',
					'2': '一般',
					'3': '差'
				},
				drugState: {
					'1': '规律',
					'2': '间断',
					'3': '不服药',
					'4': '医嘱无需用药'
				},
				adr: {
					'1': '无',
					'2': '有',
				},
				hypoglycemia: {
					'1': '无',
					'2': '偶尔',
					'3': '频繁',
				},
				followupKind: {
					'1': '控制满意',
					'2': '控制不满意',
					'3': '不良反应',
					'4': '并发症',
				},
				nextManageMeasure: {
					'1': '常规随访',
					'2': '第1次控制不满意2周随访',
					'3': '两次控制不满意转诊随访',
					'4': '紧急转诊',
				}
			};
		},
		onLoad() {
			// 复诊记录时间轴
			getSubsequentVisitTime(this.identity).then(res => {
				for (let item in res.data) {
					for (let i of res.data[item].children) {
						this.timeList.push(i)
					}
				}
				this.detail(this.timeList[0])
			})
		},
		methods: {
			qtxmPicFun1(url) {
				this.show2 = true
				this.fileImgSrc = url
			},
			qtxmPicFun2(url) {
				this.show2 = true
				this.fileImgSrc = url
			},
			qtxmPicFun3(url) {
				this.show2 = true
				this.fileImgSrc = url
			},
			close() {
				this.show2 = false
			},
			currentInfo(index) {
				this.currentValue = index
			},
			// 详情
			detail(item) {
				getSubsequentVisitDetail(item.value).then(res => {
					this.pageInfo = res.data
					this.mqyyTableData = res.data.drugList
					this.tzyyTableData = res.data.adjustDrugList
					this.qtxmTableData = res.data.formList
				})
			}
		}
	}
</script>

<style lang="scss">
	.app {
		width: 100%;
		display: flex;
		background-color: #f6f6f6;

		.lefttext {
			font-size: 28rpx;
			color: #666666;
			width: 25%;
			line-height: 80rpx;
			text-align: center;
			background-color: #fff;

			.showitem {
				background-color: #55d0df;
				color: #fff;
			}
		}

		.righttext {
			width: 75%;

			.symptom {
				width: 92%;
				margin: 0 auto;
				background-color: #ffffff;
				border-radius: 10rpx;
				padding: 20rpx 0 20rpx 25rpx;

				text {
					display: block;
					font-size: 32rpx;
					line-height: 60rpx;
					letter-spacing: 1rpx;
					color: #333333;
				}
			}

			.information {
				width: 92%;
				margin: 0 auto;
				background-color: #ffffff;
				border-radius: 10rpx;
				padding-left: 25rpx;

				.p2 {
					border-top: 1rpx solid #f0f1f6;
					font-size: 28rpx;
					line-height: 100rpx;

					letter-spacing: 1rpx;
					color: #333333;
					display: flex;

					.p2left {
						width: 50%;
					}
				}

				.p1 {
					display: flex;
					font-size: 26rpx;
					line-height: 80rpx;
					letter-spacing: 1rpx;
					color: #666666;

					.p1left {
						width: 50%;
						display: flex;
						align-items: center;
					}

					text {
						font-size: 28rpx;
						line-height: 80rpx;
						letter-spacing: 1rpx;
						color: #333333;
					}
				}
			}

			.title {
				display: flex;
				padding-left: 20rpx;
				margin-top: 40rpx;
				margin-bottom: 20px;
				font-size: 30rpx;

				.right {
					line-height: 34rpx;
					padding-left: 10rpx;
					color: #666666;
				}

				.left {
					width: 8rpx;
					height: 32rpx;
					background-color: #55d0df;
					border-radius: 4rpx;
				}
			}
		}
	}
</style>