<template>
	<view class="visitor-form-page">
		<view class="block">
			<view class="title PfScMedium">就诊人信息</view>
			<input-box class="inputcom-wrapper" :value="name" holder="就诊人姓名" label="姓名" @blurEvent="nameBlurEvent"></input-box>
			<input-box class="inputcom-wrapper" :value="idcardExt" holder="请输入身份证后4位" label="身份证尾号" @blurEvent="idCardBlurEvent" rule="idcardext"></input-box>
			<input-box class="inputcom-wrapper" :value="phone" holder="请输入就诊人手机号" label="常用手机号" @blurEvent="phoneBlurEvent" rule="phone"></input-box>
		</view>

		<view class="submit-wrapper btPadding">
			<view :class="'btn btn3 submit'+(canSubmit?' primary':' noclick')" :hover-class="(canSubmit?'hover':'')" @click="submit">
				确认就诊人
			</view>
		</view>
	</view>
</template>

<script>
	import InputBox from '@/components/inputBox.vue';

	export default {
		data() {
			return {
				canSubmit:false,
				name:'',
				nameRule:false,
				idcardExt:'',
				idcardExtRule:false,
				phone:'',
				phoneRule:false,
				type:1,
				adding:false
			}
		},
		components:{
			InputBox
		},
		onLoad(option) {
			if(option.type) this.type = option.type
		},
		methods: {
			add() {
				if(this.adding) return
				this.adding = true
				console.log(123)
				var param = new Object()
				param.real_name = this.name
				param.id_no = this.idcardExt
				param.mobile = this.phone
				var that = this
				var addtimer = setTimeout(function() {
					that.adding = false
				}, 5000);
				this.$http.req('client/user/visit_user/', param, 'POST', true).then(data=>{
					clearTimeout(addtimer)
					this.adding = false
					if(data == -1) return
					this.$func.toPage('/pages/visitors/visitors?type='+this.type);
				});
			},
			nameBlurEvent(value, res){
				this.name = value
				this.nameRule = res
				this.checkSubmit()
			},
			idCardBlurEvent(value, res){
				this.idcardExt = value
				this.idcardExtRule = res
				this.checkSubmit()
			},
			phoneBlurEvent(value, res){
				this.phone = value
				this.phoneRule = res
				this.checkSubmit()
			},
			checkSubmit() {
				this.canSubmit = false
				if(!this.nameRule || !this.idcardExtRule || !this.phoneRule) return
				this.canSubmit = true
			},
			submit(){
				this.checkSubmit()
				this.canSubmit = true
				if(!this.canSubmit) return
				this.add()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.visitor-form-page{
		background: #F8F8F8;
		height: 100vh;
		overflow-y: scroll;
		.block{
			min-height: 50vh;
			min-height: 562rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
			border-radius: 8rpx;
			width: 714rpx;
			margin: 20rpx auto 0rpx;
			overflow: hidden;
			.title{
				font-size: 32rpx;
				color: #000000;
				width: 666rpx;
				height: 50rpx;
				line-height: 50rpx;
				letter-spacing: 2rpx;
				margin: 36rpx 0 36rpx 24rpx;
			}
			.inputcom-wrapper{
				margin-bottom: 20rpx;
			}
		}
		.submit-wrapper{
			overflow: hidden;
			margin-top: 13.5vh;
			height: 92rpx;
		}
		.submit{
			margin: 0 auto;
		}
	}
	
</style>
