<template>
<div>
	<common @asynCallBack="asynCallBack"></common>
	<top-header :pageTitle="pageTitle"    ></top-header>

	<div class="mui-content vongi-fklist margin60">
			<ul class="mui-table-view openfyy-list vongi-mwsh">
				<li class="mui-table-view-cell mui-media">
					<div class="mui-ellipsis flew-sp">
						受访人员：{{person?person.name:detail.intervieweeName}}
					</div>
					<div class="mui-ellipsis flew-sp">
						访问电话：{{person?person.phone:detail.intervieweePhone}}
					</div>
					<div class="mui-ellipsis flew-sp">
						访问时间： {{detail.visitDate}}
						<div style="color: red" v-if="!isNoToday">（非今天）</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-media vongi-mwsh-input">
					<div class="mui-ellipsis flew-sp">
						来访人员
					</div>
					<div class="mui-ellipsis flew-sp">
						姓名：{{detail.name}}
						<span>联系电话：{{detail.mobilePhone}}</span>
					</div>
					<div class="mui-ellipsis flew-sp">
						身份证号：{{detail.idCard}}
					</div>
					<div class="flew-sp">
						<label>入场体温</label>
						<div class="vongi-container flew-sp flew-items">
							<div class="mui-col-xs-8">
								<div class="mui-input-row mui-input-range">

									<input type="range"  v-model="detail.temperature" min="30" max="40">
								</div>
							</div>
							<span>{{detail.temperature}}℃</span>
						</div>
					</div>
					<div class="flew-sp">
						<label>出场体温</label>
						<div class="vongi-container flew-sp flew-items">
							<div class="mui-col-xs-8">
<!--								<p class="mui-progressbar vongi-progressbar">-->
<!--									<span></span>-->
<!--								</p>-->
<!--								<div class="vongi-range"></div>-->

								<div class="mui-input-row mui-input-range">

									<input type="range"  v-model="detail.temperatureBack" min="30" max="40">
								</div>
							</div>
							<span>{{detail.temperatureBack}}℃</span>
						</div>
					</div>
				</li>
				<li class="mui-input-group mui-content-padded vongi-editme">
					<div class="mui-input-row">
						<label>车牌号</label>
						<input type="text" class="mui-input-clear" v-model="detail.numberPlate" placeholder="请输入车牌号">
					</div>
				</li>
				<li class="mui-input-group mui-content-padded">
					<div class="mui-input-row">
						<label>进场时间</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%" @click="selectStartTime()" v-text="detail.comeInTime?detail.comeInTime:'请选择'">
							请选择
						</button>
					</div>
					<div class="mui-input-row">
						<label>出场时间</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%"  @click="selectEndTime()" v-text="detail.outTime?detail.outTime:'请选择'">
							请选择
						</button>
					</div>
				</li>
			</ul>
		</div>
		<div class="fyy-footer">
			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary " @click="submit()">提  交</button></div>
		</div>
	<loading :visible="isLoading"></loading>

</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');

	import * as API_From from '@/apis/Guest/from'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		hourDistance
	} from '$project/utils'
	export default {
		name: 'GuestFromInfo',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '门卫审核信息',
				step:'1',

				detail: {
					id:'',
					name:'',
					mobilePhone:'',
					unit:'',
					visitReasons:'',

					visitDate: '请选择',
					expirationTime: '请选择',
					issueDevice: '',
					isUpPhoto:1,
				},
				person:null,
				list:[],
				isLoading: false,
				isNoToday:false,
				status: ['待确认', '已确认', '已拒绝','已过期'],
				statusColor: ['colorf8b155', 'color55f868', 'colorfe616c','color999'],

			}
		},
		created() {
			this.detail.id = this.$route.query.id;
		},
		methods:  {
			submit(){
				this.isLoading = true;
				var sub={
					id:this.detail.id,
					comeInTime:this.detail.comeInTime,
					outTime:this.detail.outTime,
					temperature:this.detail.temperature,
					temperatureBack:this.detail.temperatureBack,
					numberPlate:this.detail.numberPlate,
				}
				API_From.out(sub ).then(response => {
					this.isLoading = false;
					this.$router.push({
						name: 'MasterGuestScan',
					})
					mui.toast("操作成功");
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//选择时间
			selectStartTime() {
				var _this = this;

				var picker = new mui.DtPicker({
					"type": "datetime",
					"beginYear": 2020,
					"endYear": 2040,
				});
				picker.show(function(rs) {
					_this.detail.comeInTime = rs.text;
				});
			},
			//选择时间
			selectEndTime() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "datetime",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": _this.detail.comeInTime,
				});
				picker.show(function(rs) {
					_this.detail.outTime = rs.text;
				});
			},
			gethour(t1,t2){
				return hourDistance(t1,t2)
			},
			sub(time){
				if(time==null){
					return  '-';
				}
				return  String(time).substring(11);
			},
			getFellow(){
				var sz=[];
				if(this.list){
					for(var  m in this.list){
						var mod =this.list[m];
						if(mod.name){
							sz.push(mod.name.substring(0,1))
						}
					}
				}
				return sz;
			},
			daysDistance  (timeStampA, timeStampB){
				let date1 = new Date(timeStampA);
				let date2 = new Date(timeStampB);
				return (date1.setHours(0, 0, 0, 0) == date2.setHours(0, 0, 0, 0));
			},
			//获取详情
			getDetail() {
				this.isLoading = true;

				API_From.getDetail(this.detail.id ).then(response => {
					this.isLoading = false;
					this.person=response.person;
					this.detail = response.info;
					this.isNoToday=response.isNoToday;

					if(!this.isNoToday){
						mui.toast("请注意，访问时间不是今天");
					}
					if(!this.detail.temperature){
						this.detail.temperature=36;
					}
					if(!this.detail.temperatureBack){
						this.detail.temperatureBack=36;
					}
					this.list=response.list;
				}).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/mui.picker.min.css"></style>

<style>
</style>