<template>
	<view class="check-message-detail">
		<view class="detail-content">
			<view class="detail-item" >
			<text>申请单号</text>
			<text>{{info.applyNo}}</text>
			</view>
			<view class="detail-item" >
			<text>申请状态</text>
			<text :class="color">{{status}}</text>
			</view>
			<view class="detail-item" >
					<text>申请者工号</text>
					<text>{{info.staffCode}}</text>
			</view>
			<view class="detail-item" >
					<text>申请者姓名</text>
					<text>{{info.staffName}}</text>
			</view>
			<view class="detail-item" >
					<text>申请者手机号</text>
					<text>{{info.staffPhone}}</text>
			</view>
			<view class="detail-item" >
					<text>访客姓名</text>
					<text>{{info.visitorName}}</text>
			</view>
			<view class="detail-item" >
					<text>访客身份证</text>
					<text>{{info.visitorIdCard}}</text>
			</view>
			<view class="detail-item" >
					<text>访客联系方式</text>
					<text>{{info.visitorPhone}}</text>
			</view>
			<view class="detail-item" >
					<text>访客目的</text>
					<text>{{info.visitReason}}</text>
			</view>
			<view class="detail-item" >
					<text>访客区域</text>
					<text>{{info.visitPosition}}</text>
			</view>
			<view class="detail-item" >
					<text>访客时间</text>
					<text>{{info.inTime }}</text>
			</view>
			<view class="detail-item" >
					<text>备注</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:''
			}
		},
		async onLoad(option){
		   this.info = await getMessageInfo({messageId:option.messageId})
		},
		onShow(){
			if(this.info.status == '1'){
					 this.status = '申请通过'
					 this.color = 'green'
			}else if(this.info.status == '2'){
					  this.status = '申请中'
					  this.color = 'blue'
			}else {
					  this.status = '申请未通过'
					  this.color = 'red'
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.check-message-detail {
		padding: 18rpx;
		height: 100%;

		.detail-content {
			padding: 22rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.detail-item {
			display: flex;
			justify-content: space-between;
			margin-top: 44rpx;
		}
	}
	.green{
		color: #04ef0e;
	}
	.blue{
		color: #04a4ef;
	}
	.red{
		color: #ff0019;
	}
</style>