<template>
	<view class="content">
		<view class="grxx">
			<view class="grxxItem">
				<view class="ygxm">个人信息</view>
				<view class="sfzhm">
					<view class="gzdd">
						<view class="uni-list-cell-left">
							姓名
						</view>
						<view class="uni-list-cell-db">
							{{ userData.name }}
						</view>
					</view>
				</view>
				<view class="sfzhm">
					<view class="gzdd">
						<view class="uni-list-cell-left">
							身份证
						</view>
						<view class="uni-list-cell-db">
							{{ userData.idcard }}
						</view>
					</view>
				</view>
				<view class="sfzhm">
					<view class="gzdd">
						<view class="uni-list-cell-left">
							手机号
						</view>
						<view class="uni-list-cell-db">
							{{ userData.phone }}
						</view>
					</view>
				</view>
				<view class="sfzhm">
					<view class="gzdd">
						<view class="uni-list-cell-left">
							归口单位
						</view>
						<view class="uni-list-cell-db">
							{{ officeName }}
						</view>
					</view>
				</view>
				<view class="sfzhm">
					<picker @change="bindPickerChangeGzdd" :value="areaType" :range="candidates" range-key="name">
						<view class="gzdd">
							<text>工作地点</text>
							<input type="text" :disabled="true" placeholder="请选择>>" :value="areaName" />
						</view>
					</picker>
				</view>
				<view class="sfzhm" v-if="iscompany">
					<view class="gzdd">
						<view class="uni-list-cell-left">
							所属公司
						</view>
						<view class="uni-list-cell-db">
							<uni-combox :candidates='companyList1' v-model="companyName" placeholder="请选择" @input="bindPickerChangeSsgs"></uni-combox>
						</view>
					</view>
				</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" @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" @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" @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" @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 class="footer">
			<button type="default" :disabled="isSubmit"  @click="submit">提交</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 {
				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: '',
				ids: 0, //主键(每日疫情登记表ID)
				inShanghai: null, //当前是否在上海
				injestComplet: null, //是否注册完成
				injestVaccine: null, //是否注册疫苗
				name: "", //姓名
				nucleicTest: null, //是否七天内核酸检测
				officeId: "", //科室ID
				openId: "", //微信ID
				passbyDanger: null, //是否去过危险区
				phone: "", //手机号
				testDate: "", //检测时间
				firstInjest: "", //第一针时间
				secondInjest: "", //第二针时间
				thirdInjest: "", //第三针时间
				animalHeat: '', //温度
				areaType: '', //所在区域
				areaName: '',
				candidates: [{
					id: 1,
					name: '金山'
				}, {
					id: 2,
					name: '市区'
				}],

				loginData: {},
				
				//个人信息
				userData: {
					name:'',
					idcard:'',
					phone:'',
					outOrIn:'',
					officeId:'',
					companyId:''
				},
				//人员类型显示
				outOrInName:'',
				outOrInList:[
					{
						id:0,
						name:'院外'
					},
					{
						id:1,
						name:'院内'
					}
				],
				//归口单位显示
				officeName:'',
				officeList:[],
				officeList1:[],
				//所属公司显示
				iscompany:false,
				companyName:'',
				companyList:[],
				companyList1:[],
				id: '0', //地域选择id
				isdqs: false,
				//疫苗v-model
				base: baseURL,
				base1: baseURL1,
				imageValue: [],
				imageValue2: [],
				imageValue3: [],
				vaccinePicture: '', //疫苗图片
				nucleicPicture: '', //核酸图片
				routePicture: '', //高危地区图片
				contentVal: '', //富文本数据
				isSubmit:false
			}
		},
		onLoad: function(option) {
			let type=uni.getStorageSync('type')
			if(type==2){
				this.iscompany=true
			}else{
				this.iscompany=false
			}
			getRequest('/loginVerify/findByOpenIdInfo', {}).then(res => {
				if (res.code == '200') {
					this.userData = res.data;
					this.officeName=res.data.officeName
					this.userData.officeId=res.data.officeId
					this.companyName=res.data.companyName
					this.userData.companyId=res.data.companyId
					if (this.userData.areaType != null) {
						this.areaName = this.candidates[this.userData.areaType - 1].name;
						this.areaType = this.userData.areaType;
					}
				} 
			});
			//获取归口单位list
			getRequest('/covidRegister/selectOfficName').then(res=>{
				if(res.code=='200'){
					this.officeList=res.data
					this.officeList.forEach(item=>{
						this.officeList1.push(item.name)
					})
				}
			})
			//获取所属公司list
			getRequest('/covidRegister/selectCompanyName').then(res=>{
				if(res.code=='200'){
					if(res.code=='200'){
						this.companyList=res.data
						this.companyList.forEach(item=>{
							this.companyList1.push(item.name)
						})
					}
				}
			})
		},
		methods: {
			
			changeImg(url){
				let name=url.split('/')[3]
				let data={
					name,
					extname:'png,jpg',
					url:this.base1+url
				}
				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.areaName = this.candidates[e.target.value].name
			},
			//人员类型
			bindPickerChangeYylx(e){
				this.userData.outOrIn = this.outOrInList[e.target.value].id;
				this.outOrInName = this.outOrInList[e.target.value].name
			},
			//归口单位
			ksInput(value) {
				if (this.officeList1.indexOf(value) >= 0) {
					this.userData.officeId = this.officeList[this.officeList1.indexOf(value)].id
				}
			},
			//所属公司
			bindPickerChangeSsgs(value) {
				if (this.companyList1.indexOf(value) >= 0) {
					this.userData.companyId = this.companyList[this.companyList1.indexOf(value)].id
				}
			},
			// 获取上传状态 //核酸
			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() {
				if (this.areaName == '金山') {
					this.areaType = 1
				} else if (this.areaName == '市区') {
					this.areaType = 2
				}
				let that = this;
				if (that.areaType == '' ) {
					uni.showToast({
						icon: "none",
						title: "工作地点必填"
					})
					return
				}
				if (that.nucleicTest == 1) {
					if (that.testDate == '') {
						uni.showToast({
							icon: "none",
							title: "核酸时间必选"
						})
						return
					}
					if (that.nucleicPicture == '') {
						uni.showToast({
							icon: "none",
							title: "核酸结果照片必传"
						})
						return
					}
				};
				if (that.injestVaccine == 1) {
					if (that.firstInjest == '') {
						uni.showToast({
							icon: "none",
							title: "第一针必选"
						})
						return
					} 
					if (that.vaccinePicture == '') {
						uni.showToast({
							icon: "none",
							title: "疫苗证明照片必传"
						})
						return
					} 
					that.save()
				} else {
					that.save()
				}
			},
			save() {
				let that = this;
				let userType = uni.getStorageSync('userType');
				let userId = uni.getStorageSync('userId');
				let data = {
					userType,
					userId,
					areaType: this.areaType,
					confirm: that.confirm,
					id: null,
					companyId:that.userData.companyId,
					outOrIn:that.userData.outOrIn,
					idcard: that.userData.idcard,
					inShanghai: that.inShanghai,
					injestComplet: that.injestComplet,
					injestVaccine: that.injestVaccine,
					name: that.userData.name,
					nucleicTest: that.nucleicTest,
					officeId: that.userData.officeId,
					openId: that.openId,
					passbyDanger: that.passbyDanger,
					phone: that.userData.phone,
					testDate: that.testDate,
					firstInjest: that.firstInjest,
					secondInjest: that.secondInjest,
					thirdInjest: that.thirdInjest,
					abnormalBody: that.abnormalBody,
					vaccinePicture: this.vaccinePicture || '',
					nucleicPicture: this.nucleicPicture || '',
					routePicture: this.routePicture || '',
					animalHeat: this.animalHeat
				};
				postRequest('/covidDailyRegister/save', data).then((res) => {
					if (res.code == '200') {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: res.data,
							success: function(res) {
								if (res.confirm) {
									that.isSubmit=true;
								}
							}
						})
					} else {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: res.data,
							success: function(res) {

							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		position: relative;
	}

	.content {
		padding: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 {
		width: 96%;
		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;
	}
	.uni-list-cell-db{
		width: 61%;
	}
	.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: 61%;
		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>
