<template>
	<view class="safe-area-inset-bottom">
		<u-navbar title="查看处方" :is-back="false" title-size="34" title-color="#fff" :background="{
        background:'linear-gradient(90deg, #6ACDBB 0%, #6ACDBB 93%)'}">
		</u-navbar>

		<!-- 处方 -->
		<view class="head">
			<view class="head_record_top">
				<view class="record">
					处方编号：CF20222020202020
				</view>
				<view class="record_state">
					普通
				</view>
			</view>
			<!-- 医院 -->
			<view class="head_record">
				<image src="@/static/image/hlwyy.png" mode="" v-show="status===true"></image>
				<view class="record_yard">
					<view class="yard">
						互联网医院
					</view>
					<view class="state">
						处方笺
					</view>
				</view>
			</view>
			<!-- 时间 -->
			<view class="head_record_time">
				开具日期：2022-10-23
			</view>
		</view>

		<!-- 信息 -->
		<view class="my_info">
			<view class="info">
				<view class="info_item">
					<view class="name">
						姓名：
						<text>李悦</text>
					</view>
				</view>
				<view class="info_item">
					<view class="name">
						性别：
						<text>女</text>
					</view>
				</view>
				<view class="info_item">
					<view class="name">
						年龄：
						<text>18</text>
					</view>
				</view>
			</view>

			<view class="info">
				<view class="info_item">
					<view class="name">
						科室：
						<text>中医科</text>
					</view>
				</view>
				<view class="info_item">
					<view class="name">
						电话：
						<text>18000000000</text>
					</view>
				</view>
			</view>

			<view class="info">
				<view class="info_item">
					<view class="name">
						类别：
						<text>自费</text>
					</view>
				</view>
				<view class="info_item">
					<view class="name">
						诊断：
						<text>胆囊结核</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 药品 -->
		<view class="my_medical">
			<view class="title">
				Rp
			</view>
			<view class="item">
				<view class="name">
					<text>复方玄驹胶囊(施强)</text>
					<text>1盒</text>
				</view>
				<view class="details">
					<text>规格：0.42g*45s</text>
					<text>用法：饭后口服，每日三次，每次3粒</text>
					<text>可用天数：5天</text>
				</view>
			</view>

			<view class="item">
				<view class="name">
					<text>生力雄丸(太极）</text>
					<text>2盒</text>
				</view>
				<view class="details">
					<text>规格：0.32g*12粒*2板</text>
					<text>用法：口服，每日三次，每次3粒</text>
					<text>可用天数：6天</text>
				</view>
			</view>

		</view>

		<!-- 医嘱 -->
		<view class="doctor_order">
			<view class="order_info">
				<view class="title">
					医嘱：
				</view>
				<view class="info">
					7天一疗程，如无好转再来复查
				</view>
			</view>
			<view class="titles">
				处方开具已完毕
			</view>
		</view>

		<!-- 医生 -->
		<view class="my_doctor">
			<view class="doctor_info">
				<view class="info">
					<text>医师</text>
					<text class="name">李磊</text>
				</view>
				<view class="info">
					<text>药师审核</text>
					<text class="name">张三</text>
				</view>
			</view>

			<view class="price">
				价格
			</view>
		</view>

		<!-- 温馨提示 -->
		<view class="my_prompt">
			<view class="title">
				{{status||'温馨提示，请遵医嘱服药！处方48小时内有效！'}}
			</view>
			<!-- <view class="prompt">
				<text>特别提示</text>
				<ol>
					<li>1、处方有效期为3天,请及时取药。</li>
					<li>2、本处方限于互联网医院使用,自行下载配药不具有处方效力。</li>
					<li>3、服用3天症状未见好转，建议及时复诊或线下就医。</li>
				</ol>
			</view> -->
		</view>


		<d-loading-page :loading="loading"></d-loading-page>
		<u-popup v-model="show" mode="bottom" :closeable="true" @close="show=false" close-icon-pos='top-right'
			:safe-area-inset-bottom="true" :mask-close-able="false">
			<view class="flex-col flex-ali-center p-32">
				<d-text text="手写签名" className="m-b-48 fs-32" color="#323233"></d-text>
				<u-image width="414rpx" height="204rpx" shape="circle" :src="sign_image">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="m-t-8">
					<u-button  shape="circle" :custom-style="{heigth:'86rpx',width:'646rpx'}"
						@click="affirm" :throttle-time="0">确认通过</u-button>
				</view>
				<view class="m-t-48"></view>
			</view>
		</u-popup>
		<view class="bottom flex-row flex-jus-sp">
			<u-button type="primary" shape="circle" :disabled="!sign_image"
				:custom-style="{heigth:'86rpx',width:'327rpx',backgroundColor: 'transparent !important'}" plain
				@click="is_reject=true;show=true;" :throttle-time="0" :loading="loading" :ripple="true">拒绝
			</u-button>
			<u-button :throttle-time="0" :disabled="!sign_image" :loading="loading"  shape="circle"
				:custom-style="{heigth:'86rpx',width:'327rpx'}" @click="show=true">
				通过</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getRecordDetail,
		getUseWay
	} from '@/api/all.js'
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync("userInfo") || {},
				is_reject: false,
				show: false,
				id: '',
				type: 0,
				loading: true,
				info: '',
				sign_image: null
			}
		},
		computed: {
			// getList() {
			// 	return this.info ? this.info.recipe.map(item => {
			// 		return {
			// 			...item,
			// 			content: item['content'] ? JSON.parse(item['content']) : {}
			// 		}
			// 	}) : []
			// }
		},
		onLoad(op) {
			this.id = op['id'];
		},
		methods: {
			async getinfo() {
				this.loading = false

				let res = {}
				res = await getRecordDetail({
					store_id: uni.getStorageSync('store_id') || '11001',
					prescription_id: this.id
				})

				this.info = ''
				if (res.errcode == 0) {
					console.log(res, 'xq');
					this.info = res.data;
					this.info.patient['age'] = this.$d.getAge(this.info['patient']['id_card'])
					this.$nextTick(() => {
						this.loading = false
					})
				} else {
					this.$toast(res.msg);
					this.loading = false
				}
			}
		},
		mounted() {
			this.getinfo()
		}
	}
</script>

<style scoped lang="scss">
	.min-w-140 {
		min-width: 140rpx;
	}

	.rp {
		grid-column-gap: 80rpx;
		grid-row-gap: 8rpx;
	}

	.signature {
		width: 96rpx;
		height: 44rpx;
		border-bottom: 1px solid #31353D;
		font-size: 32rpx;
		color: #000;

		image {
			width: 80rpx;
			height: 38rpx;
		}
	}

	.bottom {
		box-sizing: border-box;
		width: 100vw;
		height: calc(110rpx + env(safe-area-inset-bottom));
		padding: 12rpx 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: 1px solid #F2F3F5;
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom)) !important;
		background-color: #fff;
	}

	.hiht {
		margin: 32rpx 0 calc(32rpx + env(safe-area-inset-bottom)) 0;
	}

	.head {
		.head_record_top {
			width: 710rpx;
			height: 42rpx;
			margin: 34rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.record {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #6C7380;
				line-height: 33rpx;
			}

			.record_state {
				width: 80rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #A7ABB0;
				border: 1rpx solid #C4C7CC;
			}

		}

		.head_record {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			image {
				width: 195rpx;
				height: 195rpx;
				position: absolute;
				left: 38%;
				top: -50rpx;
			}

			.record_yard {
				width: 240rpx;
				height: 112rpx;
				text-align: center;

				.yard {
					width: 240rpx;
					height: 68rpx;
					font-size: 48rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #31353D;
					line-height: 56rpx;
				}

				.state {
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #31353D;
					line-height: 38rpx;
				}
			}
		}

		.head_record_time {
			text-align: right;
			margin-top: 20rpx;
			width: 750rpx;
			padding-right: 32rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #6C7380;
			line-height: 28rpx;
		}
	}

	// 信息
	.my_info {
		width: 710rpx;
		height: 232rpx;
		margin: 8rpx auto;
		border-top: 2rpx solid #31353D;
		border-bottom: 2rpx solid #31353D;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 16rpx 4rpx;

		.info {
			width: 710rpx;
			height: 40rpx;
			display: flex;
			align-items: center;

			.info_item {

				.name {
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6C7380;
					line-height: 40rpx;

					text {
						display: block;
						width: 140rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #31353D;
						line-height: 40rpx;
						margin: 0 0rpx 0 8rpx;
					}
				}
			}
		}
	}

	// 药品
	.my_medical {
		width: 710rpx;
		height: 492rpx;
		margin: 32rpx auto;

		.title {
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #31353D;
			line-height: 44rpx;
		}

		.item {
			width: 710rpx;
			height: 228rpx;
			border-bottom: 2rpx solid #E8E9EB;
			padding-top: 32rpx;

			.name {
				width: 710rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #31353D;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;
			}

			.details {
				height: 120rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #6C7380;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
		}

		.item:last-child {
			border: 0;
		}
	}

	// 医嘱
	.doctor_order {
		width: 710rpx;
		height: 128rpx;
		margin: 16rpx auto;

		.order_info {
			width: 710rpx;
			height: 88rpx;

			.title {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #6C7380;
				line-height: 40rpx;
			}

			.info {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #31353D;
				line-height: 40rpx;
			}
		}

		.titles {
			width: 710rpx;
			height: 40rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #A7ABB0;
			line-height: 40rpx;
		}
	}

	// 医生
	.my_doctor {
		width: 710rpx;
		height: 172rpx;
		margin: 8rpx auto;
		border-top: 2rpx solid #31353D;
		border-bottom: 2rpx solid #31353D;
		padding: 32rpx 4rpx;

		.doctor_info {
			width: 710rpx;
			height: 44rpx;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.info {
				width: 222rpx;

				text {
					height: 34rpx;
					line-height: 28rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #31353D;
				}

				.name {
					width: 106rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #31353D;
					line-height: 38rpx;
					border-bottom: 2rpx solid #000000;
					margin-left: 16rpx;
				}
			}

		}

		.price {
			width: 710rpx;
			height: 44rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #31353D;
			line-height: 44rpx;
		}
	}

	// 温馨提示
	.my_prompt {
		width: 710rpx;
		height: 304rpx;
		margin: 0 auto 30rpx;
		padding: 0 4rpx;

		.title {
			width: 710rpx;
			height: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #A7ABB0;
			line-height: 60rpx;
			margin: 32rpx 0;
			position: relative;
		}

		.prompt {
			width: 710rpx;
			height: 200rpx;

			text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #A7ABB0;
			}

			ol {
				padding: 0 0 0 32rpx;

				li {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #A7ABB0;
					margin: 4rpx 0;
				}
			}
		}
	}

	// 状态
	.my_state {
		width: 710rpx;
		height: 40rpx;
		margin: 12rpx auto;
		padding-bottom: 110rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #F44336;
		line-height: 40rpx;
	}
</style>
