<template>
	<view style="width: 100%;height: 100%;background-color: #F6F6F6;">
		<!-- 表单弹窗 -->
		<u-popup v-model="formshow" mode="center" border-radius="14" :closeable="false">
			<view style="width: 75vw;height: 60vh">
				<view class="flex justify-center align-center" style="height: 20%;font-size: 34rpx;font-weight: bold;">补充意见</view>
				<view style="height: 60%;padding: 0 40rpx;">
					<!-- 病症 -->
					<view class="flex align-center" style="padding-bottom: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #999999;">
						<text style="margin-right: 20rpx;font-weight: 500;font-size: 28rpx;">原因:</text>
						<input placeholder="请填写补充原因" @input="yyblur" style="" />
					</view>
					
					<!-- <view class="flex align-center" style="padding-bottom: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #999999;">
						<text style="margin-right: 20rpx;font-weight: 500;font-size: 28rpx;">病症:</text>
						<input placeholder="请填写病症名称" @input="bzblur"/>
					</view> -->
					<!-- 结论 -->
					<view>
						<view style="margin-bottom: 20rpx;font-weight: 500;font-size: 28rpx;">结论:</view>
						<!-- <view style="margin-bottom: 20rpx;">结论:</view> -->
						<view style="padding: 10rpx;">
							<u-input v-model="jl" type="textarea" :auto-height="true" placeholder="请补充内容"
							 :clearable="false" height='220' :border="true" borderColor="#C0C0C0"/>
						</view>
					</view>
				</view>
				<!-- 两个按钮 -->
				<view style="height: 20%;display: flex;justify-content: center;align-items: center">
					<view style="display:flex;justify-content: center;align-items: center;width: 50%;">
						<u-button shape="shape" size="medium" @click="formshow = false">取消</u-button>
					</view>
					<view style="display:flex;justify-content: center;align-items: center ;width: 50%;">
						<u-button shape="shape" size="medium"  type="primary" @click="qr">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<view style="padding: 20rpx 28rpx;background-color: #FFFFFF;">
			<!-- 头部 -->
			<view class="flex align-center" style="font-weight: bold;font-size: 30rpx;margin:30rpx 0;">
				<view style="width: 25%;">订单号:</view>
				<view style="width: 50%;">{{orderID}}</view>
				<view style="width: 25%;" class="flex justify-center">
					<view class="but">意见单</view>
				</view>
			</view>
			<!-- 线 -->
			<u-line color="#dadada" />
			<!-- 中部内容 -->
			<view style="font-size: 26rpx;background-color: #FFFFFF;">
				<view class="nr">
					<view class="left">病症:</view>
					<view class="right">{{bz}}</view>
				</view>
				<view class="nr">
					<view class="left">病因:</view>
					<view class="right">{{by}}</view>
				</view>
				<view class="nr">
					<view class="left">身份证号:</view>
					<view class="right">{{ID}}</view>
				</view>
				<view class="nr">
					<view class="left">结论建议:</view>
					<view class="right">{{jielun}}</view>
				</view>
			</view>
		</view>

		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 客户资料 -->
		<view class="" style="background-color: #FFFFFF;padding: 10rpx 28rpx;">
			<view class="nr">
				<view class="left">下单客户:</view>
				<view class="right">{{xiadankh}}</view>
			</view>
			<view class="nr">
				<view class="left">填写时间:</view>
				<view class="right">{{time}}</view>
			</view>
		</view>

		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 补充 -->
		<view style="background-color: #FFFFFF;padding: 10rpx 28rpx;">
			<view class="nr">
				<view class="left" style="font-size: 30rpx;font-weight: bold;color: #000000;">补充意见</view>
				<view class="right" style="display: flex;flex-direction: row-reverse;">
					<view class="but" @click="addyj">补充意见</view>
				</view>
			</view>
			
			<view v-for="(item,index) in byList" :key='index'>
				<view class="">
					<view class="nr">
						<view class="left">补充原因:</view>
						<view class="right">{{item.supplement_reason}}</view>
					</view>
					<view class="nr">
						<view class="left">补充内容:</view>
						<view class="right">{{item.supplement_content}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			let id = options.id
			if(options.type==1){
				if(id!='' && typeof id!=undefined){
					this.getDetaile(id);
					
				}
				this.sugg_id = options.id;
			}else{
				if(id!='' && typeof id!=undefined){
					this.getDetaile(id,2);
					
				}
			}
			
			// console.log(options)
		},
		mounted() {

		},
		data() {
			return {
				sugg_id:'',
				name: '',
				xiadankh: '',
				age: '',
				orderID: '',
				time: '',
				bz: '',
				by: '',
				ID: '',
				jielun: '',
				byList:[],
				
				formshow:false,//提交表单弹窗
				yy:'',//原因
				jl:''//结论
			}
		},
		methods: {
			// 补充意见
			addyj(e) {
				 this.formshow = true
			},
			getDetaile:async function(id,type=1){
				let obj = {'suggest_id':id,'type':type}
			 
				let res = await this.$request.post('suggest/getSuggestDetail',obj);
				if(res.status==0 && res.data!=''){
					let data = res.data;
					this.sugg_id = data.id;
					this.name=data.patient_name;
					this.xiadankh=data.username;
					this.age=data.birthday;
					this.orderID=data.order_sn;
					this.time=data.created_at;
					this.bz=data.symptoms;
					this.by=data.pathogen;
					this.ID=data.patient_card_number;
					this.jielun=data.suggest;
					this.byList=data.details;
					// this.bcneirong=data;
				}
				console.log('我是返回来的值',res);
			},
			//提交
			yyblur(e){
				this.yy = e.detail.value
			},
			
			jlblur(e){
				this.jl = e.detail.value
			},
			qr:async function(e){
				if(this.yy!=''){
						if(this.jl!=''){
							let res = await this.$request.post("suggest/addSuggestDetail",{'suggest_id':this.sugg_id,'supplement_reason':this.yy,'supplement_content':this.jl});
							if(res.status==0){
								uni.showToast({
									title:'补充成功',
									icon:'none'
								})
								this.formshow = false
								 
									this.getDetaile(this.sugg_id);
							}else{
								uni.showToast({
									title:res.message,
									icon:'none'
								})
							}
						
						}else{
							uni.showToast({
								title:'请填写补充内容',
								icon:'none'
							})
						}
				}else{
					uni.showToast({
						title:'请填写原因',
						icon:'none'
					})
				}
			},

		}
	};
</script>

<style lang="scss">
	.but {
		padding: 16rpx 30rpx;
		border-radius: 20rpx;
		background-color: #eaeaea;
		height: 50rpx;
		color: b1b1b1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
	}

	.nr {
		margin: 28rpx 0;
		display: flex;

		.left {
			width: 25%;
			color: #666666;
		}

		.right {
			width: 75%;
		}
	}
</style>
