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



    <top-header :pageTitle="pageTitle" ></top-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="insert()">提交审核</button></div>
	</div>

    <div class="mui-content margin60 "   v-if="step==2"  >

        <div class="mui-content-padded vongi-qingjiadt vongi-editme">
            <form class="mui-input-group vongi-login-form">
                <div class="mui-input-row">
                    <label>审核状态</label>
                    <span :class="statusColor[detail.status]" v-text="status[detail.status]"></span>
                    <!--<span class="colorf8b155">待确认</span>
                                <span class="color999">已过期</span>-->
                </div>

                <div class="mui-input-row">
                    <label>创建时间</label>
                    <span>{{detail.createTime}}</span>
                </div>
                <div class="mui-input-row" v-if="detail.confirmationTime">
                    <label>审核时间</label>
                    <span>{{detail.confirmationTime}} </span>
                </div>

            </form>
        </div>

        <div class="mui-content-padded vongi-qingjiadt">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>访客姓名</label>
                    <span>{{detail.name}}</span>
                </div>
                <div class="mui-input-row">
                    <label>访客手机号码</label>
                    <span>{{detail.mobilePhone}}</span>
                </div>
                <div class="mui-input-row">
                    <label>身份证号</label>
                    <span>{{detail.idCard}}</span>
                </div>

                <div class="mui-input-row">
                    <label>访客单位</label>
                    <span>{{detail.unit}}</span>
                </div>
                <div class="mui-input-row">
                    <label>访问事由</label>
                    <span>{{detail.visitReasons}}</span>
                </div>
                <div class="mui-input-row">
                    <label>拜访时间</label>
                    <span>{{detail.visitDate}}</span>
                </div>


                <div class="mui-input-row">
                    <label>车牌号</label>
                    <span>{{detail.numberPlate}}</span>
                </div>
            </form>
        </div>
        <div class="mui-content-padded vongi-qingjiadt vongi-editme">
            <form class="mui-input-group vongi-login-form">
                <div class="mui-input-row">
                    <label>受访人</label>
                    <span>{{detail.intervieweeName}}</span>
                </div>
                <div class="mui-input-row">
                    <label>受访手机号码</label>
                    <span>{{detail.intervieweePhone}}</span>
                </div>
            </form>
        </div>



        <div class="mui-content-padded vongi-qingjiadt vongi-editme" v-if="detail.status==1">
            <form class="mui-input-group vongi-login-form">

                <div class="mui-input-row" v-if="detail.comeInTime">
                    <label>进入时间</label>
                    <span>{{detail.comeInTime}}</span>
                </div>
                <div class="mui-input-row" v-if="detail.outTime">
                    <label>离开时间</label>
                    <span>{{detail.outTime}} </span>
                </div>

            </form>
        </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: {

				},

                currentId:this.$route.query.currentId,
				id:this.$route.query.id,
				step:'1',
				isLoading: false,
				lineColor: '#e5aa37',
 				statusTitleColor: '#d39d33',
				statusName: '异常',
                status: ['待确认', '已通过', '待审核','已过期','未通过'],
                statusColor: ['colorf8b155', 'color55f868','colorf8b155','color999', 'colorfe616c'],


            }
		},
		created() {

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

                this.detail.status=2;
               // 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("提交成功，请等待受访者审批");
                    this.$router.go(-1);
				}).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,id:this.currentId }).then(response => {
					this.isLoading = false;

					this.detail = response;

					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() {
            this.getDetail();
		},
		destroyed() {

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



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