<template>
	<view class="hzIndex">
		<hzHeader title="涉疫排查详情"></hzHeader>
		<view class="hzContent"  style="padding-top: 200upx;">
		<view class="details">
			<view class="detail_msg">
				<view class="info-item">
					<text class="label">提交时间： </text>
					<text class="infoSpan">{{formatDate(item.GMT_CREATED)}}</text>
				</view> 
				<view class="info-item">
					<text class="label">姓　　名： </text>
					<text class="infoSpan">{{item.USER_NAME}}</text>
				</view> 
				<view @click="callPhone(item.PHONE)" class="info-item">
					<text  class="label">联系方式： </text>
					<text class="infoSpan" >{{ item.PHONE }}</text>
				</view>
				<view class="info-item">
					<text  class="label">部　　门： </text>
					<text class="infoSpan">{{ item.ORG_NAME }}</text>
				</view> 
			</view>
		</view>
		<view class="form-box-ud" style="border-radius: 10upx;margin-top: 20upx;">
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>1.用工类型</text>
				<view class="ipt-box">
					<input class="top-t" v-model="item.USER_TYPE" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label" ><text style="color: red;">*</text>2.居住地址</text>
				<view class="ipt-box">
					<input class="top-t" v-model="item.ADDRESS" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>3.目前状态</text>
				<view class="ipt-box ">
					<input class="top-t" v-model="item.CURRENT_STATUS" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>4.健康状况</text>
				<view class="ipt-box ">
					<input class="top-t" v-model="item.HEALTH_STATUS" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>5.健康码颜色</text>
				<view class="ipt-box ">
					<input class="top-t" v-model="item.HEALTH_CODE_COLOR" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>6.涉疫情况</text>
				<view class="ipt-box ">
					<input class="top-t" v-model="item.INVOLVED_STATUS" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>7.是否向社区报备</text>
				<view class="ipt-box ">
					<input class="top-t" v-model="item.IS_REPORT" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>8.是否已接种新冠疫苗</text>
				<view class="ipt-box ">
					<input class="top-t" v-model="item.IS_VACCINATION" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>9.最近一次核酸检测结果时间</text>
				<view class="ipt-box ">
					<input class="top-t" :value="formatDate(item.TESTING_TIME)" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label"><text style="color: red;">*</text>10.同住人员涉疫情况</text>
				<view class="ipt-box ">
					<input class="top-t" v-model="item.COHABITANT_INVOLVED_STATUS" disabled="true" type="text"   />
				</view>
			</view>
			<view class="form-item" >
				<text class="label">10.同住人员目前状态</text>
				<view class="ipt-box ">
					<input class="top-t" v-model="item.COHABITANT_STATUS" disabled="true" type="text"   />
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import {
		greenHouseDetail,greenHouseExamine,getHouseType
	} from '@/common/api.js';
	import {
		callbackRequest,
		callbackRequestNoLoading ,
		getStorage,
		alertTip,
		formatDate,
		sureAlterTip,
		convertImgToBase64,
		vbPicture,
		callPhone,wxSdk,
		formatImgUrl
	} from '@/common/util.js';
	import UniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			UniPopup
		},
		data() {
			return {
				callPhone:callPhone,
				vbPicture:vbPicture,
				formatImgUrl:formatImgUrl,
				userInfo:getStorage('userInfo'),
				formatDate:formatDate,
				item: {},
				id:0,
				queryType:0,
				replyContent:'',
				userId: getStorage('userInfo').id,
				imgs:[],
				showAlert:false,
				userTypes:[],
				houseType:[],
				examineBatch:'',
				examineButton:true
			}
		},
		onLoad(option) {
			this.item = JSON.parse(option.item);
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.batchBtn{
		position: absolute;height: 140upx; background: white;padding-top: 30upx;
		.btn1{
			width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;
		}
		.btn2{
			width:40%;border-radius: 10upx;
		}
		.btn3{
			width: 28%;margin-left: 4%;border-radius: 10upx;
		}
		.btn4{
			width: 28%;margin-left: 4%;border-radius: 10upx;
		}
		.btn5{
			width: 28%;margin-left: 4%;border-radius: 10upx;
			background: #348CF2;
		}
	}
	.img-box {
		overflow: hidden;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	
		.img-item {
			float: left;
			width: 200upx;
			height: 200upx;
			border: 1px solid #ddd;
			margin: 0 22rpx 20upx 0upx;
			position: relative;
			box-sizing: border-box;
	
			.img {
				display: block;
				width: 100%;
				height: 100%;
			}
	
			.remove-btn {
				position: absolute;
				top: -18upx;
				right: -18upx;
				width: 44upx;
				height: 44upx;
				z-index: 2;
			}
		}
	
		.upload-btn {
			.img {
				width: 60upx;
				height: 60upx;
				margin: 70upx auto 0;
			}
		}
	}
	// .container {
	// 	min-height:100vh;
	// 	background: #f8f8f8;
	// 	font-size: 28upx;
		.details{
			// height: 550upx;
			background: white;
			margin: 20upx;
			border-radius: 20upx;
			.detail_header {
				border-bottom: #f8f8f8 5upx solid;
				height: 90upx;
				line-height: 90upx;
				margin: 15upx;
				border-radius: 10upx;
				.blueSign {
					height: 28upx;
					width: 5upx;
					background: #00c277;
					display: inline-block;
					margin-left: 20upx;
				}
				.font-tilte {
					font-weight:bold;
					margin-left: 20upx;
				}
			}
			.detail_msg {
				margin-left: 20upx;
				border-radius: 10upx;
				font-size: 24upx;
				.info-item{
					border-bottom:1px solid #f8f8f8;
					padding:20upx 10upx;
					line-height: 50upx;
					.label{
						display:inline-block;
						width:150upx;
						font-size:28upx;
						color:#333;
						font-weight:bold;
					}
				}
				.status {
					.infoSpan{
						color: #00c277;
					}
					.infoSpan2{
						color: red;
					}
				}
				.img-box {
					// background: #fff;
					image{
						width: 200upx;
						height: 200upx;
						margin:20upx 20upx 0 0;
					}
				}
			}
		}
	// }
	.common-shade{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		background: rgba(0,0,0,0.7);
		z-index:9999;
	}
	.form-box-ud {
		background: #fff;
		margin-left: 15upx;
		margin-right: 15upx;
		.form-item {
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			padding: 30upx 20upx 10upx 20upx;
			.label {
				width: 150upx;
				font-size: 28upx;
				color: #333;
				font-weight: bold;
				line-height: 50upx;
			}
			.ipt-box {
				margin-left: 40upx;
				margin-top: 20upx;
				input {
					width: 100%;
					height: 70upx;
					line-height: 70upx;
					font-size: 28upx;
					color: #666;
					border: 1px solid #e5e5e5;
					padding-left: 20upx;
					border-radius: 10upx;
					// padding: 40upx 20upx;
				}
				.radio-group{
					font-size: 26upx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-right: 40upx;
					min-width: 140upx;
					margin-bottom: 20upx;
				}
			}
			.select {
				.arrow {
					float: right;
					width: 16upx;
					height: 29upx;
					margin-top: 10upx;
				}
				.picker {
					height: 50upx;
					line-height: 50upx;
					font-size: 26upx;
					color: #666;
					margin-left: 10upx;
				}
			}
		}
	}
	
	.box {
		display: flex;
		display: -webkit-flex;
	}
	
	.box-row-reverse {
		flex-direction: row;
	}
	
	/*上下排列*/
	.box-column {
		flex-direction: column;
	}
	
	/*上下排列*/
	.box-left {
		justify-content: flex-start;
	}
	
	/*居右*/
	.box-right {
		justify-content: flex-end;
	}
	
	/*居左*/
	.box-center {
		justify-content: center;
	}
	
	/*居中*/
	.box-between {
		justify-content: space-between;
	}
	
	/*两端对齐*/
	.box-align-center {
		align-items: center;
	}
	
	.box-wrap {
		flex-wrap: wrap;
	}
</style>
