<template>
	<view class="content">
		<view class="grxx">
			<view class="grxxTitle">个人信息</view>
			<view class="grxxItem">
				<view class="ygxm">姓名：{{this.name}}</view>
				<view class="sfzhm">
					<text>身份证</text>
					<text>{{this.idcard}}</text>
				</view>
				<view class="sfzhm">
					<text>手机号</text>
					<text>{{this.phone}}</text>
				</view>
				<!-- <view class="sfzhm">
					<picker @change="bindPickerChangeGzdd" :value="officeId" :range="candidates" range-key="name">
						<view class="gzdd">
							<text>工作地点</text>
							<input type="text" :disabled="true" placeholder="请选择>>" :value="officename" />
						</view>
					</picker>
				</view> -->
			</view>
		</view>
		<view class="grxx">
			<view class="grxxTitle">1.最近14天内您或您的同住人员是否前往或途经以下区域</view>
			<view class="grxxItem">
				<view class="xx">
					<button class="xx1" :class="passbyDanger==1?'xx3':''" @click="passbyDanger=1">是</button>
					<button class="xx2" :class="passbyDanger==0?'xx3':''" @click="passbyDanger=0">否</button>
				</view>
				<view class="">
					<button type="primary" @click="open">点击查看详细地区</button>
					<view class="contextdqs" v-show="isdqs" @click="isdqs=false">
						<view class="contextdq" @click.stop>
							<view class="container">
								<editor id="editor" :read-only="true" class="ql-container" @ready="onEditorReady">
								</editor>
							</view>
						</view>
					</view>
				</view>
				<view class="xcmphoto">
					<text>*请上传行程码照片</text>
					<uni-file-picker v-model="imageValue3" :auto-upload="false" file-mediatype="image" mode="grid"
						file-extname="png,jpg" :limit="1" @success="successthird" @select="selectthird" />
				</view>
			</view>
		</view>
		<view class="grxx">
			<view class="grxxTitle">2.近7天是否做过核酸检测</view>
			<view class="grxxItem">
				<view class="xx">
					<button class="xx1" :class="nucleicTest==1?'xx3':''" @click="nucleicTest=1">是</button>
					<button class="xx2" :class="nucleicTest==0?'xx3':''" @click="nucleicTest=0">否</button>
				</view>
				<view v-if="nucleicTest==1" class="sfzhm">
					<view class="hxx">*</view>
					<text>检测时间</text>
					<view class="example-body">
						<uni-datetime-picker :clearIcon="false" :border="false" type="date" :disabled="false"
							v-model="testDate" start="2021-3-20" end="2024-6-20" @change="bindChange" />
					</view>
				</view>
				<view v-if="nucleicTest==1" class="xcmphoto">
					<text>*请上传核酸结果照片</text>
					<uni-file-picker v-model="imageValue" :auto-upload="false" file-mediatype="image" mode="grid"
						file-extname="png,jpg" :limit="1" @success="success" @select="select" />
				</view>
			</view>
		</view>
		<view class="grxx">
			<view class="grxxTitle">3.是否注射过疫苗</view>
			<view class="grxxItem">
				<view class="xx">
					<button class="xx1" :class="injestVaccine==1?'xx3':''" @click="injestVaccine=1">是</button>
					<button class="xx2" :class="injestVaccine==0?'xx3':''" @click="injestVaccine=0">否</button>
				</view>
				<view v-if="injestVaccine==1" class="sfzhm">
					<text>第一针时间</text>
					<view class="example-body">
						<uni-datetime-picker :clearIcon="false" :border="false" type="date" :disabled="false"
							v-model="firstInjest" start="2021-3-20" end="2024-6-20" @change="bindChangeFirst" />
					</view>
				</view>
				<view v-if="injestVaccine==1" class="sfzhm">
					<text>第二针时间</text>
					<view class="example-body">
						<uni-datetime-picker :clearIcon="false" :border="false" type="date" :disabled="false"
							v-model="secondInjest" start="2021-3-20" end="2024-6-20" @change="bindChangeSecond" />
					</view>
				</view>
				<view v-if="injestVaccine==1" class="sfzhm">
					<text>第三针时间</text>
					<view class="example-body">
						<uni-datetime-picker :clearIcon="false" :border="false" type="date" :disabled="false"
							v-model="thirdInjest" start="2021-3-20" end="2024-6-20" @change="bindChangeThird" />
					</view>
				</view>
			</view>
			<view v-if="injestVaccine==1" class="xcmphoto">
				<text>*请上传疫苗证明照片</text>
				<uni-file-picker v-model="imageValue2" :auto-upload="false" file-mediatype="image" mode="grid"
					file-extname="png,jpg" :limit="1" @success="successtwo" @select="selecttwo" />
			</view>
		</view>
		<view class="grxx">
			<view class="grxxTitle">4.身体是否出现以下异常</view>
			<view class="grxxItem">
				<view class="sfzhm">
					发烧、四肢无力、喉咙痛、流鼻涕、出血、眼眶发红、红疹等
				</view>
				<view class="xx">
					<button class="xx1" :class="abnormalBody==1?'xx3':''" @click="abnormalBody=1">是</button>
					<button class="xx2" :class="abnormalBody==0?'xx3':''" @click="abnormalBody=0">否</button>
				</view>
				<view v-if="abnormalBody==1" class="sfzhm">
					<text>体温</text>
					<input type="number" v-model="animalHeat" placeholder="请输入摄氏度温度" />
				</view>
			</view>
		</view>

		<view v-if="isbusss" class="footer">
			<button type="warn" @click="submit(0)">驳回</button>
			<button type="primary" @click="submit(1)">通过</button>
		</view>
	</view>
</template>

<script>
	import {
		postRequest,
		getRequest,
		baseURL,
		baseURL1
	} from '../../api/api.js'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
			const days = []
			const day = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				if (i < 10) {
					months.push('0' + i)
				} else {
					months.push(i)
				}
			}
			for (let i = 1; i <= 31; i++) {
				if (i < 10) {
					days.push('0' + i)
				} else {
					days.push(i)
				}
			}
			return {
				num: '',
				businessId: '',
				ywid: '',
				title: 'picker-view',
				years,
				months,
				days,
				timers: year + '-' + month + '-' + day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,

				//地域选择器
				array: [],
				index: 0,
				//是否按钮
				abnormalBody: null,
				//时间选择
				confirm: '', //信息真实有效承诺标识
				idcard: '',
				currentLocation: '', //当前所在地
				destination: "", //目的地
				ids: 0, //主键(每日疫情登记表ID)
				inShanghai: null, //当前是否在上海
				injestComplet: null, //是否注册完成
				injestVaccine: null, //是否注册疫苗
				name: "", //姓名
				nucleicTest: null, //是否七天内核酸检测
				officeId: "", //科室ID
				officename: '',
				openId: "", //微信ID
				passbyDanger: null, //是否去过危险区
				phone: "", //手机号
				returnDate: "", //返程时间
				returnLocation: "", //返程地区
				testDate: "", //检测时间
				firstInjest: "", //第一针时间
				secondInjest: "", //第二针时间
				thirdInjest: "", //第三针时间
				vaccineCompany: "", //疫苗公司
				animalHeat: '', //温度
				areaType: '', //所在区域
				areaName: '',
				candidates: [{
					id: 1,
					name: '金山'
				}, {
					id: 2,
					name: '市区'
				}],

				loginData: {},

				userData: {},
				id: '0', //地域选择id
				isbusss: true,
				isdqs: false,
				//疫苗v-model
				base: baseURL,
				base1: baseURL1,
				imageValue: [],
				imageValue2: [],
				imageValue3: [],
				vaccinePicture: '', //疫苗图片
				nucleicPicture: '', //核酸图片
				routePicture: '', //高危地区图片
				contentVal: '' //富文本数据
			}
		},
		onLoad: function(option) {
			this.businessId = option.businessId;
			this.ywid = option.msgId;
			getRequest('/loginVerify/findByOpenIdInfo', {}).then(res => {
				if (res.code == '200') {
					this.userData = res.data;
					if (this.userData.areaType != null) {
						this.officename = this.candidates[this.userData.areaType - 1].name;
						this.areaType = this.userData.areaType;
					}
				}
			});
			getRequest('/covidDailyRegister/detail', {
				id: option.businessId
			}).then(res => {
				if (res.code == '200') {
					this.name = res.data.name
					this.phone = res.data.phone
					this.idcard = res.data.idcard
					this.abnormalBody = res.data.abnormalBody
					this.passbyDanger = res.data.passbyDanger
					this.testDate = res.data.testDate
					this.nucleicTest = res.data.nucleicTest
					this.injestVaccine = res.data.injestVaccine
					this.firstInjest = res.data.firstInjest
					this.secondInjest = res.data.secondInjest
					this.thirdInjest = res.data.thirdInjest
					
					if (res.data.nucleicPicture) {
						this.imageValue.push(this.changeImg(res.data.nucleicPicture))
					}
					if (res.data.routePicture) {
						this.imageValue3.push(this.changeImg(res.data.routePicture))
					}
					if (res.data.vaccinePicture) {
						this.imageValue2.push(this.changeImg(res.data.vaccinePicture))
					}
					this.animalHeat = res.data.animalHeat
				}
			})
		},
		methods: {
			changeImg(url) {
				let name = url.split('/')[3]
				console.log(name)
				let data = {
					name,
					extname: 'png,jpg',
					url: this.base1 + url
				}
				console.log(data)
				return data
			},
			//url参数获取
			getQueryString(name) {
				const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
				const search = window.location.search.split('?')[1] || '';
				const r = search.match(reg) || [];
				return r[2];
			},
			//风险地区文本编辑器
			onEditorReady() {
				let that = this
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					//获取文本编辑器数据
					let id = uni.getStorageSync('id')
					getRequest('/dailyRegisterType/findList', {
						id
					}).then(resd => {
						if (resd.code == '200') {
							that.contentVal = resd.data.riskyArea;
							var contentVal_1 = that.contentVal;
							//将内容写入编辑器
							that.editorCtx = res.context;
							let EContent = {
								html: contentVal_1
							}
							that.editorCtx.setContents(EContent); //设置富文本编辑器的内容
						}
					})

				}).exec()
				// #endif
			},
			bindPickerChangeGzdd: function(e) {
				this.areaType = this.candidates[e.target.value].id;
				this.officename = this.candidates[e.target.value].name
			},
			// 获取上传状态 //核酸
			select(e) {
				let token = uni.getStorageSync('token')
				uni.uploadFile({
					url: this.base + '/covidDailyRegister/upload',
					fileType: 'image',
					name: 'file_data',
					header: {
						'x-auth-token': token
					},
					file: e.tempFiles[0].file,
					formData: {
						type: 1
					},
					success: res => {
						let data = JSON.parse(res.data)
						this.nucleicPicture = data.data
					}
				})
			},
			//疫苗
			selecttwo(e) {
				let token = uni.getStorageSync('token')
				uni.uploadFile({
					url: this.base + '/covidDailyRegister/upload',
					fileType: 'image',
					name: 'file_data',
					header: {
						'x-auth-token': token
					},
					file: e.tempFiles[0].file,
					formData: {
						type: 0
					},
					success: res => {
						let data = JSON.parse(res.data)
						this.vaccinePicture = data.data
					}
				})
			},
			//高危地区图片
			selectthird(e) {
				let token = uni.getStorageSync('token')
				uni.uploadFile({
					url: this.base + '/covidDailyRegister/upload',
					fileType: 'image',
					name: 'file_data',
					header: {
						'x-auth-token': token
					},
					file: e.tempFiles[0].file,
					formData: {
						type: 2
					},
					success: res => {
						let data = JSON.parse(res.data)
						this.routePicture = data.data
					}
				})
			},
			success(e) {
				//console.log(e)
			},
			open() {
				this.isdqs = true
			},
			bindChange: function(date) {
				this.testDate = date
			},
			bindChangeFirst: function(date) {
				this.firstInjest = date
			},
			bindChangeSecond: function(date) {
				this.secondInjest = date
			},
			bindChangeThird: function(date) {
				this.thirdInjest = date
			},
			submit(num) {
				this.num = num;
				if (this.areaName == '金山') {
					this.areaType = 1
				} else if (this.areaName == '市区') {
					this.areaType = 2
				}
				let that = this;
				uni.showModal({
					title: '《疫情防控承诺书》',
					showCancel: false,
					content: '本人同意上海市公共卫生临床中心（下简称机构）在疫情防控时期对本人身体状况定期跟踪，如遇发烧、咳嗽等相关情况，采取强制离岗措施。本人承诺积极配合机构的防疫相关工作，真实有效的上报自身身体状况和旅居史。如因瞒报、谎报身体状况或高风险旅居史导致疫情出现社群性传染情况，本人愿承担相应法律责任，并赔偿相应损失。',
					success: function(res) {
						if (res.confirm) {
							that.confirm = 1;
							that.save()
						}
					}
				});
			},
			save() {
				let data = {
					msgId: this.ywid,
					businessId: this.businessId,
					approval: this.num
				}
				postRequest('/covidDailyRegister/approvalDailyRegister', data).then(res => {
					if (res.code == '200') {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: res.data,
							success: function(res) {
								uni.navigateTo({
									url: '/pages/sy/sy'
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		position: relative;
	}

	.content {
		padding: 0 10px;
	}

	.content .grxxTitle {
		padding: 5% 0;
		font-size: 14px;
	}

	.grxxItem {
		border-radius: 5px;
		box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1);
	}

	.grxxItem .ygxm {
		padding: 10px;
		background-color: #3297ff;
		color: white;
	}

	.contextdqs {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}


	.contextdq {
		width: 80%;
		height: 50%;
		margin: 0 auto;
		transform: translateY(44%);
		background-color: white;
		overflow-y: scroll;
		padding: 5%;
		border-radius: 5px;
		font-size: 14px;
	}

	.xcmphoto {
		padding: 5%;
	}

	.xcmphoto text {
		color: red;
		font-size: 14rpx;
	}

	.grxxItem .sfzhm {
		margin: 0 10px;
		border-bottom: 1px solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		font-size: 84%;
		color: #999999;
		position: relative;
	}


	.hxx {
		position: absolute;
		color: red;
		left: 3px;
		top: 25%;
	}

	.grxxItem .sfzhm {
		border: none;
		height: 36rpx;
		font-size: 14px;
	}

	.grxxItem .sfzhm:last-of-type .uni-combox {
		width: 100%;
	}

	.grxxItem .sfzhm:last-of-type .uni-combox .uni-input-input {
		margin-left: 50rpx;
	}

	.dxkxxx label {
		display: block;
		width: 100%;
	}

	.xx {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 4px 10px;
		padding: 10px 0;
	}

	.xx1 {
		margin: 0;
		padding: 0;
		width: 34%;
		border-radius: 68px 0 0 68px;
		height: 34px;
		line-height: 34px;
		border: none;
		font-size: 15px;

	}

	.xx2 {
		margin: 0;
		padding: 0;
		width: 34%;
		border-radius: 0 68px 68px 0;
		height: 34px;
		line-height: 34px;
		border: none;
		font-size: 15px;
	}

	.xx3 {
		background-color: #007AFF;
		color: white;
	}

	.xxdz {
		margin: 0 10px;
		padding: 10px;
		font-size: 84%;
		color: #999999;
		position: relative;
	}

	.xxdz .hxx {
		top: 7%;
	}

	.xxdz .sfzhm {
		margin: 0;
		border-bottom: 1px solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		font-size: 84%;
		color: #999999;
		border: none;
	}



	.sfzhm radio {
		border-radius: 0;
		transform: scale(0.7)
	}

	.sfzhm image {
		width: 30rpx;
		height: 30rpx;
	}

	.sfzhm .radio {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sfzhm .radio image {
		width: 40rpx;
		height: 40rpx;
	}

	uni-picker {
		width: 100%;
	}

	.gzdd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.gzdd input {
		width: 20%;
		font-size: 14px;
	}

	.xzdzxx {
		text-align: center;
	}

	.xzdzxx {
		padding: 10px;
		text-align: center;
		color: #007AFF;
	}

	.footer {
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer button {
		width: 50%;
		background-color: #007AFF;
		color: white;
	}

	.picTime {
		z-index: 10;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.uni-padding-wrap {
		width: 750rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		padding: 10px 0;
	}

	.uni-padding-wrap button {
		height: 30px;
		line-height: 30px;
		font-size: 15px;
	}

	.uni-padding-wrap button:last-of-type {
		background-color: #007AFF;
		color: white;
	}

	.yymc {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pickers {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 40%;
		z-index: 10;
		text-align: center;
		background-color: white;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.dqxz {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 70%;
		width: 100%;
		background-color: white;
		padding: 10px;
	}

	.dqxz .uni-title {
		padding: 10px 0;
		text-align: center;
	}

	.dqxz .uni-list-cell-db {
		margin: 10px 20px 10px 10px;
		padding: 5px;
		border-radius: 6px;
		background-color: #CCCCCC;
		border-top: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}

	.dyButton {
		overflow: hidden;
		text-align: center;
		border-bottom: 1px solid #f3eded;
		padding: 1%;
	}

	.dyButtons {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		position: relative;
		height: 4.1%;
		text-align: center;
		padding: 1%;
		border-bottom: 1px solid #f3eded;
	}

	.dyButton view {
		float: left;

		border: none;
		background-color: white;
		font-size: 15px;
	}

	.dyButtons view:first-of-type {
		position: absolute;
		left: 0%;
		top: 0%;
		border: 1px solid rgba(0, 0, 0, 0);
		background-color: white;
		font-size: 15px;
	}

	.dyButtons .dybuttonst {
		position: absolute;
		right: 5%;
		top: 0%;
		border: 1px solid rgba(0, 0, 0, 0);
		background-color: white;
		font-size: 15px;
	}

	.dyButtons .dybuttonst {
		color: #007AFF;
	}

	.container .ql-container {
		height: 80%;
	}
</style>
