<template>
	<view>
		<form class="padding-lr cu-form-group flex-direction">
			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm">
					<span class="text-red padding-right-xs">*</span>当前所在地区
				</view>
				<view class="flex align-center">
					<input @tap="handleSelectLocation" class="flex-sub padding-left-xs" name="input" placeholder="请选择当前所在地区" type="btn"
					 v-model="district" maxlength="128" />
					<text class="cuIcon-location timer"></text>
				</view>
			</view>
			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm">
					<span class="text-red padding-right-xs">*</span>当前所在详细地址
				</view>
				<input name="input" placeholder="请输入详细地址(含门牌号)" type="text" v-model="address" maxlength="128" />
			</view>
			<view class="cu-form-group flex flex-direction padding-top">
				<view class="title padding-bottom-sm">
					<span class="text-red padding-right-xs">*</span>当前状态
				</view>
				<radio-group @change="StateChange" class="block">
					<view class="cu-list menu text-left">
						<view :key="index" class="cu-item" v-for="(state,index) in status">
							<label class="flex justify-between align-center">
								<radio :checked="index === healthTypeId" :value="state.id" class="round margin-right-xs"></radio>
								<view class="flex-sub" style="font-size: 34rpx;">{{ state.name }}</view>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm">就诊医院（若无填无）</view>
				<input name="input" placeholder="请输入就诊医院" type="text" v-model="hospital" maxlength="32" />
			</view>
			<view class="cu-form-group flex flex-direction padding-top">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>最近14天是否有武汉居住史、旅游史或武汉亲戚来访</view>
				<radio-group class="block" @change="TourChange">
					<view class="flex">
						<view class="flex-sub margin-tb-sm" v-for="(tour,index) in tours" :key="index">
							<label class="flex justify-between align-center">
								<radio class="round margin-right-xs" :checked="index === touchHubei" :value="tour.value"></radio>
								<text class="flex-sub" style="font-size: 34rpx;">{{ tour.name }}</text>
							</label>
						</view>
					</view>
				</radio-group>
			</view>

			<view class="cu-form-group flex flex-direction padding-top">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>最近14天是否有新冠肺炎患者或疑似患者接触史</view>
				<radio-group class="block" @change="TouchChange">
					<view class="flex">
						<view class="flex-sub margin-tb-sm" v-for="(touch,index) in touches" :key="index">
							<label class="flex justify-between align-center">
								<radio class="round margin-right-xs" :checked="index === touchSick" :value="touch.value"></radio>
								<text class="flex-sub" style="font-size: 34rpx;">{{ touch.name }}</text>
							</label>
						</view>
					</view>
				</radio-group>
			</view>

			<view class="cu-form-group flex flex-direction padding-top">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>最近14天有无接触过近期境外返回人员</view>
				<radio-group class="block" @change="TouchOverseasChange">
					<view class="flex">
						<view class="flex-sub margin-tb-sm" v-for="(touch,index) in overseas" :key="index">
							<label class="flex justify-between align-center">
								<radio class="round margin-right-xs" :checked="index === touchOverseas" :value="touch.value"></radio>
								<text class="flex-sub" style="font-size: 34rpx;">{{ touch.name }}</text>
							</label>
						</view>
					</view>
				</radio-group>
			</view>

			<view class="cu-form-group flex flex-direction padding-top">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>是否在学校所在地</view>
				<radio-group class="block" @change="SchoolLocationChange">
					<view class="flex">
						<view class="flex-sub margin-tb-sm" v-for="(location,index) in locations" :key="location.value">
							<label class="flex justify-between align-center">
								<radio class="round margin-right-xs" :checked="index === schoolLocation" :value="location.value"></radio>
								<text class="flex-sub" style="font-size: 34rpx;">{{ location.name }}</text>
							</label>
						</view>
					</view>
				</radio-group>
			</view>

			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>当前体温（℃）</view>
				<input placeholder="请输入当前体温" name="input" type="digit" v-model="animalHeat" />
			</view>

			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>紧急联系人</view>
				<view class="flex">
					<input placeholder="姓名" maxlength="6" class="flex flex-sub" name="input" type="text" v-model="emergencyName" />
					<input placeholder="联系方式" maxlength="11" class="flex flex-sub" name="input" type="number" v-model="emergencyPhone" />
				</view>
			</view>

			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm">备注（选填）</view>
				<textarea placeholder="请填写具体情况..." name="input" v-model="remark" />

				<!-- 上传图片 -->
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</form>
		<user-agreement @changeIntentions="changeIntentions" @changeIntentions1="changeIntentions1" @changeIntentions2="changeIntentions2"></user-agreement>
		
		<button class="bg-cyan margin primary-btn" hover-class="cc-active" @tap="handleHealthSign">确认提交</button>
		<!-- 历史 -->
		<button class="shadow round bg-cyan history-btn iconfont icon-history" hover-class="cc-active" @tap="openPage('/pages/my-code/my-code')"></button>
	</view>
</template>

<script>
	import {
		showToast
	} from 'common/script/util';
	import {
		HEALTH_SIGN,HEALTH_FILE,HEALTH_SIGN_HISTORY
	} from 'api/api';
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				district: '请选择当前所在地区',
				address: '',
				// status: [],
				hospital: '',
				tours: [{
					value: '0',
					name: '否'
				}, {
					value: '1',
					name: '是'
				}],
				touches: [{
					value: '0',
					name: '否'
				}, {
					value: '1',
					name: '是'
				}],
				overseas: [{
					value: '0',
					name: '无'
				}, {
					value: '1',
					name: '有'
				}],
				locations: [{
					value: '0',
					name: '否'
				}, {
					value: '1',
					name: '是'
				}],
				animalHeat: 0,
				healthTypeId: 0,
				touchHubei: 0,
				touchSick: 0,
				touchOverseas: 0,
				schoolLocation: 0,
				emergencyName: '',
				emergencyPhone: '',
				remark: '',
				fileIdList: [],
				imgList: [],
				agree: false,
				agree1: false,
				agree2: false,
			};
		},
		
		onLoad() {
			const startTime = +this.$moment()
				.startOf('year')
				.format('x');
			const endTime = +this.$moment()
				.endOf('day')
				.format('x');
			const params = {
				param: {
					startTime,
					endTime,
					token: this.token
				}
			};
			this.getHealthSignHistory(params);
		},
		
		computed: mapState('user', ['token', 'status','healthyInfo']),
		
		methods: {
			...mapMutations('user', ['setHealthCode','setHealthyInfo']),
			handleSelectLocation() {
				const that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						that.district = res.address;
					},
				});
			},
			
			changeIntentions(data) {
			  this.agree = data;
			},
			changeIntentions1(data) {
			  this.agree1 = data;
			},
			changeIntentions2(data) {
			  this.agree2 = data;
			},

			// 状态
			StateChange: function(evt) {
				for (let i = 0; i < this.status.length; i++) {
					if (this.status[i].id === evt.target.value) {
						this.healthTypeId = i;
						break;
					}
				}
			},

			// 旅游
			TourChange: function(evt) {
				for (let i = 0; i < this.tours.length; i++) {
					if (this.tours[i].value === evt.target.value) {
						this.touchHubei = i;
						break;
					}
				}
			},

			// 接触
			TouchChange(evt) {
				for (let b = 0; b < this.touches.length; b++) {
					if (this.touches[b].value === evt.target.value) {
						this.touchSick = b;
						break;
					}
				}
			},
			
			// 境外
			TouchOverseasChange(evt) {
				for (let i = 0; i < this.overseas.length; i++) {
					if (this.overseas[i].value === evt.target.value) {
						this.touchOverseas = i;
						break;
					}
				}
			},
			
			// 学校所在地
			SchoolLocationChange(evt) {
				for (let i = 0; i < this.locations.length; i++) {
					if (this.locations[i].value === evt.target.value) {
						this.schoolLocation = i;
						break;
					}
				}
			},

			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						uni.uploadFile({
							url: `https://www.tall.wiki/gateway${HEALTH_FILE}`,
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							name: 'file',
							success: (res) => {
								const resData = JSON.parse(res.data)
								const {
									success,
									code,
									msg,
									data
								} = resData;
								this.fileIdList.splice(-1,0,resData.data.fileId);
								uni.showToast({
								  title: '图片提交成功',
								  duration: 1000,
								});
							},fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					},
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片吗？',
					cancelText: '再想想',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.fileIdList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			
			/**
			 * 申请健康码
			 */
			async handleHealthSign() {
				try {
					if (!this.checkRules()) return;

					const {
						address,
						animalHeat,
						district,
						healthTypeId,
						hospital,
						token,
						touchHubei,
						touchSick,
						touchOverseas,
						schoolLocation,
						emergencyName,
						emergencyPhone,
						remark,
						fileIdList,
						agree1,
						agree2,
					} = this;
					const params = {
						param: {
							address,
							animalHeat,
							district,
							healthTypeId: healthTypeId + 1,
							hospital,
							token,
							touchHubei,
							touchSick,
							touchOverseas,
							schoolLocation,
							emergencyName,
							emergencyPhone,
							remark,
							fileIdList,
							healthAgreement: agree1 ? 1 : 0,
							selfFill: agree2 ? 1 : 0,
						}
					};
					const res = await this.$http.post(HEALTH_SIGN, params);
					const {
						success,
						code,
						msg,
						data
					} = res.data;
					if (success && code === 200) {
						uni.showToast({
						    title: '申请健康码成功',
						    duration: 2000
						});
						this.success = true;
						this.setHealthCode(data.healthCode)
						uni.reLaunch({
							url: `/pages/index/index`,
						});
					} else {
						uni.showToast({
							title: msg || '申请健康码失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.log('error: ', error);
					if (error.msg) {
						uni.showToast({
							title: error.msg || '申请健康码失败',
							icon: 'none'
						});
					}
				}
			},

			// 验证信息
			checkRules() {
				const {
					district,
					address,
					healthTypeId,
					animalHeat,
					emergencyName,
					emergencyPhone,
					agree,
					agree1,
					agree2
				} = this;
				if (!district || district === '请选择当前所在地区') {
					showToast('请选择当前所在地区');
					return;
				}
				if (!address) {
					showToast('请输入当前所在地址');
					return;
				}
				if (healthTypeId < 0) {
					showToast('请选择状态');
					return;
				}
				if (!animalHeat || animalHeat<30 || animalHeat>45) {
					showToast('请输入正确的体温值（范围：30℃~45℃）');
					return;
				}
				if (!emergencyName) {
					showToast('请输入紧急联系人姓名');
					return;
				}
				if (!this.verifyPhone(emergencyPhone)) {
					showToast('请输入正确的紧急联系人手机号');
					return;
				}
				if (!agree) {
					showToast('请选择是否同意《用户服务协议》和《隐私政策》');
					return;
				}
				if (!agree1) {
						showToast('请选择是否同意信息提交山西大学管理');
						return;
				}
				if (!agree2) {
						showToast('请确定是否为本人填写');
						return;
				}
				return true;
			},
			
			/**
			 * 验证手机号格式
			 * @param {string} phone 手机号
			 */
			verifyPhone(phone) {
			  const phoneExg = /^1\d{10}$/;
			  return phoneExg.test(phone);
			},

			// 获取健康打卡记录
			async getHealthSignHistory(params) {
				try {
					const res = await this.$http.post(HEALTH_SIGN_HISTORY, params);
					const {
						success,
						code,
						msg,
						data
					} = res.data;
					if (success && code === 200) {
						this.success = true;
						this.setHealthyInfo(data[0]);
						if(this.healthyInfo){
							this.address = this.healthyInfo.address;
							this.district = this.healthyInfo.district;
							this.healthTypeId = this.healthyInfo.healthTypeId - 1;
							this.hospital = this.healthyInfo.hospital;
							this.touchHubei = this.healthyInfo.touchHubei;
							this.touchSick = this.healthyInfo.touchSick;
							this.touchOverseas = this.healthyInfo.touchOverseas;
							this.schoolLocation = this.healthyInfo.schoolLocation;
							this.emergencyName = this.healthyInfo.emergencyName;
							this.emergencyPhone = this.healthyInfo.emergencyPhone;
						}
					} else {
						uni.showToast({
							title: msg || '获取健康打卡记录失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.log('error: ', error);
					if (error.msg) {
						uni.showToast({
							title: error.msg || '获取健康打卡记录失败',
							icon: 'none'
						});
					}
				}
			},
		
		},
	};
</script>

<style lang="scss" scoped>
	.agree-box {
		width: 70rpx;
	}

	.agree-text {
		line-height: 60rpx;
	}

	.timer {
		font-size: 34rpx !important;
		color: $gray;
	}

	.primary-btn {
		border-radius: 15rpx;
	}

	.history-btn {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 96rpx;
		height: 96rpx;
		line-height: 96rpx;
		padding: 0;
	}

	.history-btn::after {
		border: none;
	}
</style>
