<template>
	<view class="detailPages">
		<view class="head-back">
			<view class="userName">
				<view class="name">
					{{userInfo.licencePlate}}
				</view>
				<view class="jiashiyuan">
					驾驶员：{{userInfo.driver}}
				</view>
			<view class="discharge">
				<view class="icon">
					<img src="/static/baishijz.png" alt="" />
				</view>
				<view class="time">
				出车时间：{{userInfo.drivingTime}}
				</view>
			</view>
			<view class="discharge" v-if="userInfo.status === 3">
				<view class="icon">
					<img src="/static/baishijz.png" alt="" />
				</view>
				<view class="time">
					回院时间：{{userInfo.drivingEndTime || ''}}
				</view>
			</view>
			
		</view>
		
		<!-- 急救信息 -->	
			<view class="head-center">
				<view class="head-center-item">
					<view class="item-title">
						急救任务：{{userInfo.orderNo}}
					</view>
				</view>	
				<view class="head-center-item">
					<view class="item-title-flex">
						<view class="user">
							医生
						</view>
						<view class="name">
							<view v-if="!type">{{userInfo.doctorName}}</view>
							<u-input placeholder-style="input-placeholder" v-else v-model="userInfo.doctorName" :border="true" :type="text" />
						</view>
						
					</view>
				</view>	
				<view class="head-center-item">
					<view class="item-title-flex">
						<view class="user">
							护士
						</view>
						<view class="name">
							<!-- {{userInfo.nurseName}} -->
							<view v-if="!type">{{userInfo.nurseName}}</view>
							<u-input placeholder-style="input-placeholder" v-else v-model="userInfo.nurseName" :border="true" :type="text" />
						</view>
					</view>
				</view>	
				<view class="head-center-item">
					<view class="item-title-flex">
						<view class="user" style="width: 200rpx;">
							患者地址
						</view>
						<view class="name">
						<view v-if="!type">{{userInfo.address}}</view>
						<u-input placeholder-style="input-placeholder" v-else v-model="userInfo.address" :border="true" :type="text" />
						</view>
					</view>
				</view>	
			</view>
			<!-- 第二段 -->
			<view class="head-center" style="margin-top: 30rpx;">
				<view class="head-center-item">
					<view class="item-title-flex">
						<view class="user">
							送往医院
						</view>
						<view class="name">
							<!-- {{userInfo.hospital}} -->
							<view v-if="!type">{{userInfo.hospital}}</view>
							<u-input placeholder-style="input-placeholder" v-else v-model="userInfo.hospital" :border="true" :type="text" />
						</view>
					</view>
				</view>	
				<view class="head-center-item">
					<view class="item-title-flex">
						<view class="user">
							来电号码
						</view>
						<view class="name">
							<view v-if="!type">{{userInfo.phone}}</view>
							<u-input placeholder-style="input-placeholder" v-else v-model="userInfo.phone" :border="true" :type="text" />
						</view>
					</view>
				</view>	
				<view class="head-center-item">
					<view class="item-title-flex">
						<view class="user">
							病情类型
						</view>
						<view class="name">
							<!-- {{userInfo.bruiseType}} -->
							<view v-if="!type">{{userInfo.bruiseType}}</view>
							<u-input placeholder-style="input-placeholder" v-else v-model="userInfo.bruiseType" :border="true" :type="text" />
						</view>
					</view>
				</view>	
				<view class="head-center-item">
					<view class="item-title-flex">
						<view class="user">
							病情等级
						</view>
						<view class="name">
							<view v-if="!type">{{userInfo.bruiseLevel}}</view>
							<u-input placeholder-style="input-placeholder" v-else v-model="userInfo.bruiseLevel" border-color="#eee" :focus="true" :border="true" :type="text" />
						</view>
					</view>
				</view>	
			</view>
			
			<view class="bottom" v-if="!type && userInfo.status !== 3">
				<button type="default"  class="button" @click="editExtractBtn">修改</button>
			</view>
			<view class="bottom" v-if="type ===1">
				<button type="default"  class="button" @click="extractBtn">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
import {request} from '../../request/request.js'
	export default {
		data(){
			return {
				id:'',
				userInfo:{},
				type:null
			}
		},
		onLoad({id}) {
			this.id = id
			this.getUserInfo(id)
		},
		methods:{
			// 确认
		async	extractBtn(){
			const data = this.userInfo
			delete data.drivingTime
			await request({url:'/dispatchOrder/update',method:'POST',data})
			this.type = null
				uni.navigateBack({
				  delta: 1 // 返回的页面数，1表示返回上一级页面
				});
			},
			// 修改
			editExtractBtn(){
				this.type = 1
			},
			// 获取信息
			async	getUserInfo(id){
				this.userInfo =	await request({url:`/dispatchOrder/taskParticulars/${id}`})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	::v-deep input {
		text-align: right !important;
		color: #656565 !important;
		margin-right: -18rpx;
		font-size: 30rpx !important;
	}
	.detailPages{
		 width: 100vw;
		 height: 100vh;
		 background-color: #eee;
		
		 .head-center {
			 background-color: #FFFFFF;
			 .head-center-item{
				 width: 100%;
				 height: 88rpx;
				 background: #FFFFFF;
				 padding: 0 30rpx;
				 .item-title{
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
					line-height: 88rpx;
					border-bottom: 2rpx solid #D7D7D7;
				 }
				 .item-title-flex{
						display: flex;
					
						justify-content: space-between;
						align-items: center;
						height: 100%;
						margin-right: 50rpx;
						.user{
							font-family: SourceHanSansCN, SourceHanSansCN;
							font-weight: 400;
							font-size: 30rpx;
							color: #1B1B20;
						}
						
						.name{
							font-family: SourceHanSansCN, SourceHanSansCN;
							font-weight: 400;
							font-size: 30rpx;
							color: #656565;
						}
				 }
			 }
		 }
		 .bottom{
		 	margin-top: 50rpx;
		 	height: 200rpx;
		 	background-color: #FFFFFF;
		 	display: flex;
		 	align-items: center;
		 	.button{
		 		width: 721rpx;
		 		height: 100rpx;
				line-height: 100rpx;
		 		background: #5581FF;
		 		box-shadow: 8rpx 0rpx 16rpx 0rpx #2385FF;
		 		border-radius: 44rpx 44rpx 44rpx 44rpx;
		 		color: #FFFFFF;
		 	}
		 }
		 .head-back{
			 width: 100%;
			 height: 350rpx;
			 background: url('/static/tuceng.png') no-repeat center;
			 background-size: 100% 100%;
			 .discharge{
			 		 display: flex;
			 		 align-items: center;
			 		margin-top: 20rpx;
			 					  .icon{
			 					  	width: 40rpx;
			 					  	height: 40rpx;
			 					  	margin-right: 20rpx;
			 					  	img {
			 					  		height: 100%;
			 					  		width: 100%;
			 					  	}
			 					  }
			 					  .time {
			 						 font-family: SourceHanSansCN, SourceHanSansCN;
			 						 font-weight: 400;
			 						 font-size: 22rpx;
			 						 color: #F9F9F9;
			 						 // line-height: 40rpx;
			 						
			 					  }
			 }
			  .userName{
				  padding: 20rpx;
				  padding-left: 40rpx;
				  display: flex;
				  flex-direction: column;
				  justify-content: space-around;
				  .name{
					  margin-top: 30rpx;
					  font-family: SourceHanSansCN, SourceHanSansCN;
					  font-weight: bold;
					  font-size: 36rpx;
					  color: #FFFFFF;
					  // line-height: 20rpx;
				  }
				  .jiashiyuan{
					  margin-top: 20rpx;
					  font-weight: 400;
					  font-size: 26rpx;
					  color: #FFFFFF;
					  // line-height: 20rpx;
			
				  }
				
			  }
		 }
	}
</style>