<template>
<div>
	<green-code ref="greenCode"   @callBack="callBack"></green-code>


	<header class="mui-bar mui-bar-nav" v-if="step==1">
		<h1 class="mui-title">访客信息登记</h1>
	</header>
	<div class="mui-content margin60" v-if="step==1">
		<div class="mui-content-padded vongi-editme vongi-qingjiadt">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>访客姓名<i class="colorfe616c">*</i></label>
					<input type="text" class="mui-input-clear"  v-model="detail.name" placeholder="请填写访客姓名">

				</div>
				<div class="mui-input-row">
					<label>手机号码<i class="colorfe616c">*</i></label>
					<input type="text" class="mui-input-clear" v-model="detail.mobilePhone" placeholder="请填写访客手机号码">

				</div>
				<div class="mui-input-row">
					<label>身份证号<i class="colorfe616c">*</i></label>
					<input type="text" class="mui-input-clear" v-model="detail.idCard" placeholder="请填写身份证号" style="text-transform: uppercase;">

				</div>
				<div class="mui-input-row">
					<label>访客单位<i class="colorfe616c">*</i></label>
					<input type="text" class="mui-input-clear" v-model="detail.unit" placeholder="请填写访客单位">

				</div>
				<div class="mui-input-row">
					<label>车牌号</label>
					<input type="text" class="mui-input-clear" v-model="detail.numberPlate" placeholder="请填写车牌号">
				</div>
			</form>
		</div>
		<div class="mui-content-padded vongi-editme vongi-qingjiadt">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>受访人<i class="colorfe616c">*</i></label>
					<input type="text" class="mui-input-clear" v-model="detail.intervieweeName" placeholder="请填写受访人">
				</div>
				<div class="mui-input-row">
					<label>手机号码<i class="colorfe616c">*</i></label>
					<input type="text" class="mui-input-clear" v-model="detail.intervieweePhone" placeholder="请填写受访人手机号码">
				</div>
				<div class="mui-input-row">
					<label>访问事由</label>
					<input type="text" class="mui-input-clear" v-model="detail.visitReasons" placeholder="请填访问事由">
				</div>
			</form>
		</div>
	</div>
	<div class="fyy-footer" v-if="step==1">
		<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary " @click="stepNext()">下一步</button></div>
	</div>
	<header class="mui-bar mui-bar-nav" v-if="step==2">
		<h1 class="mui-title">扫码通行</h1>
		<a class=" mui-icon mui-icon-left-nav mui-pull-left" @click="step='1'"></a>
	</header>
			<div class="mui-content"  v-if="step==2">
				<div class="fyy-scon">
					<div class="fyy-scon-top">
						<div class="fyy-scon-head mui-col-xs-5">
							<img src="~$project/assets/img/default_photo.png" alt="">
						</div>
						<div class="fyy-scon-det mui-col-xs-7">
							<div class="fyy-scon-det-top">
								<div class="fyy-scon-det-top-left">
									姓名
									<div class="mui-h3" v-text="detail.name"></div>
								</div>
								<div class="fyy-scon-det-top-right">
									健康码
									<a  @click="showGreenCode" class="mui-h3">绿码<span class="mui-icon iconfont icon-icon-"></span><span class="mui-icon mui-icon-arrowright"></span></a>
								</div>
							</div>
							<div class="fyy-scon-det-down">
								单位
								<div class="mui-h3" v-text="detail.unit">湖北荆盛商贸有限公司</div>
							</div>
							<div class="fyy-scon-det-down">
								手机号码
								<div class="mui-h3" v-text="showphone(detail.mobilePhone)">155****8888</div>
							</div>
						</div>
					</div>
					<div class="fyy-scon-center mui-card">
						<p>当前健康状态</p>
						<form class="mui-input-group">
							<div class="mui-input-row mui-radio mui-left">
								<label>健康</label>
								<input name="radio1" type="radio" checked>
							</div>
							<div class="mui-input-row mui-radio mui-left">
								<label>≥37.3°C</label>
								<input name="radio1" type="radio">
							</div>
						</form>
					</div>
				</div>
				<div class="mui-card fyy-scon-bot">
					<div class="fyy-scon-group">
						<label>受访人</label>
						<span>{{detail.intervieweeName}}  {{detail.intervieweePhone}}<a class="mui-icon mui-icon-phone" v-if="detail.intervieweePhone" :href="'tel:'+detail.intervieweePhone"></a></span>
						
					</div>
					<div class="fyy-scon-group">
						<label>核验地点</label>
						<span>{{info.name}}</span>
					</div>
					<div class="fyy-scon-group">
						<label>扫码时间</label>
						<span>{{today()}}</span>
					</div>
					<div class="fyy-scon-group" v-if="detail.comeInTime">
						<label>进入时间</label>
						<span>{{detail.comeInTime}}</span>
					</div>
					<div class="fyy-scon-group" v-if="detail.outTime">
						<label>离开时间</label>
						<span>{{detail.outTime}}</span>
					</div>
				</div>
				<div class="fyy-scon-botton">
					<div class="examine-btn examine-btn1"  :class="detail.comeInTime&&!detail.outTime?'examine-btn1':'examine-btn3'"  @click="update(detail.comeInTime&&!detail.outTime)">离开</div>
					<div class="examine-btn examine-btn2"  :class="!detail.comeInTime?'examine-btn2':'examine-btn3'"  @click="insert(!detail.comeInTime)" >进入</div>
					<!--<div class="examine-btn examine-btn3">灰色按钮</div>-->
				</div>
			</div>

	<loading :visible="isLoading"></loading>

</div>
</template>

<script>

	import * as API_Current from '@/apis/Guest/current'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import GreenCode from '@/components/GreenCode.vue'

	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'GuestFromInfo',
		components: {
			Common,
			Loading,
			TopHeader,
			GreenCode
		},
		data() {
			return {
				pageTitle: '扫码通行',
				detail: {

				},
				info:{},

				id:this.$route.query.id,
				step:'1',
				isLoading: false,
				lineColor: '#e5aa37',
				statusColor: '#e5aa37',
				statusTitleColor: '#d39d33',
				statusName: '异常',

			}
		},
		created() {

 		},
		methods:  {
			showGreenCode(){
 				this.$refs.greenCode.showGreenCode();
			},
			insert(bl){
				if(bl){
					this.detail.openId=this.openId;
					this.detail.comeInTime=parseUnixTime(currentTimeStamp());
					this.detail.visitDate=parseUnixTime(currentTimeStamp());
					this.detail.createTime=parseUnixTime(currentTimeStamp());

					this.detail.status=0;
					this.detail.temperature=36;
					this.save();
				}
			},
			update(bl){
				if(bl){
					this.detail.status=1;
					this.detail.temperatureBack=36;
					//this.detail.updateTime=parseUnixTime(currentTimeStamp());
					this.detail.outTime=parseUnixTime(currentTimeStamp());
					this.save();
				}
			},
			save(){
				this.isLoading = true;

				API_Current.add(this.detail).then(response => {
					this.isLoading = false;
					this.detail=response;
					mui.toast("操作成功，请将此页面展示给工作人员");

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			today(){
				return parseUnixTime(currentTimeStamp(),'{y}-{m}-{d} {h}:{i}')
			},
			showphone(phone){
				return phone.substring(0,3)+'****'+phone.substring(8);
			},
			//更新绿码
			callBack(obj) {
				this.getGreenCode();
			},
			//根据绿码显示颜色
			getGreenCode() {
				var colors = this.$refs.greenCode.getCode();
				this.statusColor = colors.foreground;
				this.statusTitleColor = colors.foreground;
				this.statusName = colors.title;
			},
			checkForm(){
				if (!this.detail.name) {
					mui.toast('请输入访客姓名');
					return false;
				} else if (!this.detail.mobilePhone) {
					mui.toast('请输入访客手机号码');
					return false;
				} else if (!this.detail.idCard) {
					mui.toast("请输入身份证号");
					return false;
				}else if (!this.detail.unit) {
					mui.toast('请输入访客单位名称');
					return false;
				}else if (!this.detail.intervieweeName) {
					mui.toast('请输入受访人名称');
					return false;
				}else if (this.detail.intervieweePhone) {
					mui.toast('请输入受访人手机号码');
					return false;
				} else {
					return true;
				}
			},
			stepNext(){
				if(this.checkForm()){

					this.step='2';
					this.$refs.greenCode.getGreenCodeByName(this.detail.name,this.detail.idCard);
				}
			},
			//获取详情
			getDetail() {
				this.isLoading = true;

				API_Current.info({qrcode:this.id,openId:this.openId }).then(response => {
					this.isLoading = false;

					this.detail = response.data;
					this.info = response.info;

					if(this.detail.id){
						this.step='2';
						this.$refs.greenCode.getGreenCodeByName(this.detail.name,this.detail.idCard);
					}
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},asynCallBack(){},
		},
		mounted() {

			if(!this.openId){
				mui.toast("请先关注【小鹏管家】")
			}else if(!this.id){
				mui.toast("请通过扫描二维码访问本页面")

			}else  if(this.id&&this.openId){
				this.getDetail();
			}
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>



<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>