<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 class="flex-sub padding-left-xs" @tap="handleSelectLocation" placeholder="请选择当前所在地区" name="input" type="btn"
					 v-model="district" />
					<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 placeholder="请输入详细地址(含门牌号)" name="input" type="text" v-model="address" />
			</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="StateChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(state,index) in status" :key="index">
							<label class="flex justify-between align-center">
								<radio class="round margin-right-xs" :checked="index === healthTypeId" :value="state.id"></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 placeholder="请输入就诊医院" name="input" type="text" v-model="hospital" />
			</view>
			<view class="cu-form-group flex flex-direction padding-top">
				<view class="title padding-bottom-sm">最近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">最近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-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>
		</form>
		<user-agreement @changeIntentions="changeIntentions"></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
	} 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: '是'
				}],
				animalHeat: 0,
				healthTypeId: 0,
				touchHubei: 0,
				touchSick: 0,
				agree: false,
			};
		},
		computed: mapState('user', ['token', 'status']),
		
		methods: {
			...mapMutations('user', ['setHealthCode']),
			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;
			},

			// 状态
			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) {
				console.log(this.touches,'aa')
				for (let b = 0; b < this.touches.length; b++) {
					if (this.touches[b].value === evt.target.value) {
						this.touchSick = b;
						break;
					}
				}
			},

			/**
			 * 申请健康码
			 */
			async handleHealthSign() {
				try {
					if (!this.checkRules()) return;

					const {
						address,
						animalHeat,
						district,
						healthTypeId,
						hospital,
						token,
						touchHubei,
						touchSick
					} = this;
					const params = {
						param: {
							address,
							animalHeat,
							district,
							healthTypeId: healthTypeId + 1,
							hospital,
							token,
							touchHubei,
							touchSick
						}
					};
					
					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,
					agree
				} = this;
				if (!district || district === '请选择当前所在地区') {
					showToast('请选择当前所在地区');
					return;
				}
				if (!address) {
					showToast('请输入当前所在地址');
					return;
				}
				if (healthTypeId < 0) {
					showToast('请选择状态');
					return;
				}
				if (!animalHeat) {
					showToast('请输入当前体温');
					return;
				}
				if (!agree) {
					showToast('请确定是否为本人填写');
					return;
				}
				return true;
			},

		},
	};
</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>
