<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>{{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>{{formData.receptionist}}</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">{{item.visitor_.name}}</text>
					<text class="visitorCell">{{item.visitor_.phone}}</text>
					<view class="visitorCell">
						<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>
</template>

<script>
	export default {
		name: "visit",
		data() {
			return {
				formData:{},
				visitorsList:[],
				purposeOptions: {
					10: "参观",
					20: "拜访",
					30: "面试",
					40: "开会",
					50: "拉送货"
				},
				levelOptions: {
					10: "一般",
					20: "重要",
				},
			}
		},
		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
				})
			},

		}
	}
</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;
	}
</style>
