<template>
	<view class="bodyContainer">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="来访项目"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="wrap-view wrap-top">
			<view class="item title"> <text class="blueLine"></text>项目信息：</view>
			<view class="item">
				<view class="title">来访事由</view>
				<view class="content">
					<text>{{purposeOptions[formData.purpose]}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">来访状态</view>
				<view class="content">
					<text>{{stateOptions[formData.state]}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">来访概述</view>
				<view class="content">
					<text>{{formData.name}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">来访详述</view>
				<view class="content">
					<text>{{formData.description}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">来访时间</view>
				<view class="content">
					<text>{{formData.visit_time}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">离开时间</view>
				<view class="content">
					<text>{{formData.leave_time}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">接待人</view>
				<view class="content">
					<text v-if="formData.receptionist">{{formData.receptionist_.name}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">来访单位</view>
				<view class="content">
					<text>{{formData.company}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">来访级别</view>
				<view class="content">
					<text>{{levelOptions[formData.level]}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">来访人数</view>
				<view class="content">
					<text>{{formData.count_people}}</text>
				</view>
			</view>
		</view>
		<view class="wrap-view wrap-top">
			<view class="item title"> <text class="blueLine"></text>人员列表：</view>
			<view class="visitorsWrap">
				<view class="visitorsItem itemTitle">
					<text class="visitorCell">姓名</text>
					<text class="visitorCell">主访</text>
					<text class="visitorCell">操作</text>
				</view>
				<view class="visitorsItem" v-for="item in visitorsList" :key="item.id">
					<text class="visitorCell" style="color:blue" @click="viewPeople(item)">{{item.visitor_.name}}</text>
					<text class="visitorCell">
						<span v-if="item.is_main">是</span>
					</text>
					<view class="visitorCell">
						<view v-if="formData.state == 40">
						<text class="bindBtn" @click="bindBtl(item,10)" v-if="item.visitor_.blt_===null">绑卡</text>
						<text class="bindBtn" @click="bindBtl(item,20)" v-else>解绑</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view id="visitorWrap" v-if="visitorDetailLimited">
			<view class="visitorContainer">
				<view class="visitorInfo">
					<view class="infoTitle">姓名：</view><view>{{visitorItem.visitor_.name}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">手机：</view><view>{{visitorItem.visitor_.phone}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">头像：</view>
					<image :src="visitorItem.photo"  @click="preView(visitorItem.photo)"></image>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">反乡时间：</view><view>{{visitorItem.return_date}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">来源地：</view><view>{{visitorItem.come_place}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">行程轨迹：</view><view>{{visitorItem.trip_desc}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">管控措施：</view><view>{{visitorItem.measure}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">检测日期：</view><view>{{visitorItem.test_date}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">是否已报备：</view><view>{{visitorItem.is_reported?'已报备':'未报备'}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">是否主访客：</view><view>{{visitorItem.is_main?'是':'否'}}</view>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">健康码：</view>
					<view v-if="visitorItem.health_code==''">未上传</view>
					<image v-else :src="visitorItem.health_code"  @click="preView(visitorItem.health_code)"></image>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">行程码：</view>
					<view v-if="visitorItem.travel_code==''">未上传</view>
					<image v-else :src="visitorItem.travel_code"  @click="preView(visitorItem.travel_code)"></image>
				</view>
				<view class="visitorInfo">
					<view class="infoTitle">核酸报告：</view>
					<view v-if="visitorItem.test_report==''">未上传</view>
					<image v-else :src="visitorItem.test_report"  @click="preView(visitorItem.test_report)"></image>
				</view>
			</view>
			<icon class="closeDetailIcon" type="cancel" size="36" color="#fefefe" @click="closeVisitorDetail"/>
		</view>
		<img-view ref="imgPreView" :imgSrc="preImgSrc" @cancelPreView="cancelPreView"></img-view>
	</view>
</template>

<script>
	import imgView from "@/components/image-view/image-view.vue";
	export default {
		name: "visit",
		components: {
			imgView
		},
		data() {
			return {
				formData:{},
				visitorsList:[],
				purposeOptions: {
					10: "参观",
					20: "拜访",
					30: "面试",
					40: "开会",
					50: "拉送货"
				},
				stateOptions: {
					10: "创建中",
					20: "审批中",
					30: "待入厂",
					40: "进行中",
					50: "已完成",
					60: "已关闭",
				},
				levelOptions: {
					10: "一般",
					20: "重要",
				},
				preImgSrc:null,
				visitorItem:null,
				visitorDetailLimited:false,
			}
		},
		onLoad(params) {
			if (params.visit) {
				this.visitId = params.visit;
			} 
		},
		onShow() {
			this.getVisitItem();
			this.getVpeopleList();
		},
		methods: {
			//获取已有游客
			getVpeopleList() {
				let that = this;
				that.$u.api.vmVpeople({
					page: 0,
					visit: that.visitId
				}).then(res => {
					that.visitorsList =res;
				})
			},
			getVisitItem() {
				this.$u.api.visitItem(this.visitId).then(res => {
					this.formData = res;
				})
			},
			bindBtl(row,type){
				let that = this;
				 uni.scanCode({
					 success: function (res) {
						 console.log('条码类型：' + res.scanType);
						 console.log('条码内容：' + res.result);
						 let form = {};
						 form.type = type;
						 form.code = res.result;
						 form.employee = row.visitor_.employee;
						 that.$u.api.thirdBltBind(form).then(res=>{
							 debugger;
							 uni.showToast({
							 	title: res,
							 	icon: "none"
							 })
						 })
					 }
				 });
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			viewPeople(item) {
				this.visitorItem = item;
				this.visitorItem.photo = item.visitor_.photo!==''?this.vuex_host + item.visitor_.photo:'';
				this.visitorItem.health_code = item.health_code!==''?(this.vuex_host + item.health_code):'';
				this.visitorItem.travel_code = item.travel_code!==''?this.vuex_host + item.travel_code:'';
				this.visitorItem.test_report = item.test_report!==''?this.vuex_host + item.test_report:'';
				this.visitorDetailLimited = true;
			},
			closeVisitorDetail(){
				this.visitorDetailLimited = false;
				this.visitorItem = null;
			},
			preView(srcImg){
				let imgs = [];
				imgs.push(srcImg)
				uni.previewImage({
					urls: imgs,
					current: 0,
				});
			},
			cancelPreView(){
				this.preImgSrc = '';
			},
		}
	}
</script>

<style scoped>
	uni-page-body {
	    color: #303133;
	    font-size: 15px;
	    height: 100%;
	    background: #f3fbff;
	}
	.bodyContainer {
	    background-color: #f3fbff;
	}
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(254deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}
>>>uni-image{
	height: 200upx;
	width: 200upx;
}
	.my-data {
		background-color: #f3fbff;
		padding-bottom: 227rpx;
	}

	.nav-bar>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.wrap-view {
		width: 720rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		line-height: 94rpx;
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		padding-bottom: 30upx;
	}
	.wrap-top{
		line-height: 60upx;
		margin-top: 20upx;
	}
	.item {
		margin: 0rpx 32rpx;
		display: flex;
		margin-top: 10rpx;
	}
	.item.title{
		    height: 100upx;
		    line-height: 100upx;
		    border-bottom: 1upx solid #dddddd;
	}
	.item_bottom_border{
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.title {
		color: #212121;
		flex: 1;
	}

	.content {
		flex: 3;
		color: #666666;

	}
	.visitorsWrap{
		
	}
	
	.visitorsItem{
		display: flex;
		font-size: 28upx;
	}
	
	.itemTitle{
		height: 80upx;
		font-size: 32upx;
		line-height: 80upx;
	}
	.itemTitle>.visitorCell{
		color: #212121;
	}
	.visitorCell{
		flex: 1;
		color: #666666;
		text-align: center;
	}
	.blueLine{
		height: 24upx;
		width: 10upx;
		background: #2a8cff;
		margin-top: 39upx;
		margin-right: 12upx;
	}
	.bindBtn{
		    width: 80upx;
		    height: 50upx;
		    line-height: 50upx;
		    background: #2a8cff;
		    display: inline-block;
		    border-radius: 16upx;
		    color: #ffffff;
		    font-size: 25upx;
	}
	#visitorWrap{
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.6);
	}
	.visitorContainer{
		position: relative;
		width: 90%;
		left: 5%;
		background: #ffffff;
		padding: 40upx;
		top: 50%;
		transform: translateY(-50%);
		max-height: 80%;
		overflow-y: scroll;
		border-radius: 20upx;
	}
	.visitorInfo{
		display: flex;
		margin: 20upx 0;
	}
	.infoTitle{
		width: 170upx;
	}
	.closeDetailIcon{
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
