<template>
	<view class="check-message-detail">
		<view class="detail-content">
			<view class="detail-item" >
			<text class="title">申请单号</text>
			<text>{{info.applyNo}}</text>
			</view>
			<view class="detail-item" >
			<text class="title">申请状态</text>
			<text :class="color">{{status}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">申请者工号</text>
					<text>{{info.staffCode}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">申请者手机号</text>
					<text>{{info.staffPhone}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">申请者姓名</text>
					<text>{{info.staffName}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">访问姓名</text>
					<text>{{info.visitorName}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">访问身份证</text>
					<text>{{info.visitorIdCard}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">访问联系方式</text>
					<text>{{info.visitorPhone}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">访问目的</text>
					<text>{{info.visitReason}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">访问区域</text>
					<text>{{info.visitPosition}}</text>
			</view>
			<view class="detail-item" >
					<text class="title">访问时间</text>
					<text class="time-box">
						{{info.inTime }}
					    {{info.outTime }}
					</text>
			</view>
			<view class="detail-item" >
					<text class="title">备注</text>
					<text>{{info.remarks}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMessageInfo} from '@/api/list.js'
	export default {
		data() {
			return {
				info: {
					// applyNo: 1254611,
					// status: 2,
					// staffCode: 123456,
					// staffName: '张三',
					// staffPhone: 123456789,
					// visitorName: '李四',
					// visitorIdCard:1234567894662552,
					// visitorPhone:123456799,
					// visitReason:'商务会议',
					// visitPosition:'一楼',
					// inTime:'2022-09-16 13:28:41',
					// outTime: "2022-10-06 13:28:46",
     //                remarks:'无'
				},
				color:'',
				status:'',
				messageId:''
			}
		},
		 onLoad(option){
		   this.messageId = option.messageId
		},
	   async onShow(){
			this.info = await getMessageInfo({messageId:this.messageId})
			if(this.info.visitorApplyStatus == '1'){
			 this.status = '申请已提交'
			 this.color = 'blue'
			}else if(this.info.visitorApplyStatus == '2'){
			  this.status = '申请已通过'
			  this.color = 'green'
			}else {
			  this.status = '申请未通过'
			  this.color = 'red'
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.check-message-detail {
		padding: 18rpx;
		height: 100%;
		.title {
			font-weight: 600;
		}
		.detail-content {
			padding: 22rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.detail-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 44rpx;
		}
	}
	.green{
		color: #2ebf00;
	}
	.blue{
		color: #1076e3;
	}
	.red{
		color: #f02a0a;
	}
</style>