<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"    ></top-header>
		<div class="mui-content vongi-qingjiadt">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item " @click="step=1" :class="step==1?'mui-active':''" >
							访客信息
						</a>
						<a class="mui-control-item"  @click="step=2"  :class="step==2?'mui-active':''" >
							核验信息
						</a>
					</div>
				</div>
				<div class="mui-slider-group vongi-fkdat" >
					<div id="item1mobile" v-if="step==1"
						 class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<form class="mui-input-group mui-content-padded">
									<div class="mui-input-row">
										<label>拜访人</label>
										<span>{{detail.name}}</span>
									</div>
									<div class="mui-input-row">
										<label>预约时间</label>
										<span>{{detail.visitDate}}</span>
									</div>
									<div class="mui-input-row">
										<label>来访单位</label>
										<span>{{detail.unit}}</span>
									</div>
									<div class="mui-input-row">
										<label>同行人员</label>
										<span class="vongi-fkdat-name">
											<div class="flew">
											   <h5 v-for="mod in getFellow()">{{mod}}</h5>
											</div>
										</span>
									</div>
									<div class="mui-input-row">
										<label>来访事由</label>
										<span>{{detail.visitReasons}}</span>
									</div>
									<div class="mui-input-row">
										<label>车牌号</label>
										<span>{{detail.numberPlate}}</span>
									</div>
								</form>
								<form class="mui-input-group mui-content-padded">
									<div class="mui-input-row">
										<label>受访人员</label>
										<span>{{person?person.name:'其他'}}</span>
									</div>

									<div class="mui-input-row">
										<label>创建时间</label>
										<span>{{detail.createTime}}</span>
									</div>
									<div class="mui-input-row">
										<label>访问时间</label>
										<span>{{sub(detail.comeInTime)}}-{{sub(detail.outTime)}}</span>
									</div>
									<div class="mui-input-row">
										<label>总耗时</label>
										<span>{{gethour(detail.comeInTime,detail.outTime)}}</span>
									</div>

								</form>
							</div>
						</div>
					</div>
					<div id="item2mobile"  v-if="step==2"
						 class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<form class="mui-input-group mui-content-padded">
									<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 class="color55f868" v-if="detail.temperature">{{detail.temperature}}℃</span>
									</div>
									<div class="mui-input-row">
										<label>出场测温</label>
										<span class="color55f868"  v-if="detail.temperatureBack">{{detail.temperatureBack}}℃</span>
									</div>
								</form>
								<form class="mui-input-group mui-content-padded"  v-for="(item,index) in list">
									<div class="mui-input-row">
										<label>姓名</label>
										<span>{{item.name}}</span>

									</div>

									<div class="mui-input-row">
										<label>手机号码</label>
										<span>{{item.mobilePhone}}</span>
									</div>
									<div class="mui-input-row">
										<label>身份证号</label>
										<span>{{item.idCard}}</span>
									</div>

								</form>
							</div>
						</div>
					</div>

				</div>
			</div>

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

	</div>
</template>


<script>

	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,

				status: ['待确认', '已确认', '已拒绝','已过期'],
				statusColor: ['colorf8b155', 'color55f868', 'colorfe616c','color999'],

			}
		},
		created() {
			this.detail.id = this.$route.query.id;
		},
		methods:  {
			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;
			},

			//获取详情
			getDetail() {
				this.isLoading = true;

				API_From.getDetail(this.detail.id ).then(response => {
					this.isLoading = false;
					this.person=response.person;
					this.detail = response.info;
					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>
</style>
