<!-- 点击列表的查看--信息查看页面 -->
<template>
	<view class="check-list-info">
		<view class="form">
			<u--form labelPosition="left" :model="form">
				<u-form-item label="申请单号" prop="staffCode" borderBottom labelWidth="100">
					{{form.applyNo}}
				</u-form-item>
				<u-form-item label="申请状态" borderBottom labelWidth="100" >
					<view :class="form.status === '申请中' ? 'blue' : form.status === '申请不通过' ? 'red' : 'green'">
						{{form.status}}
					</view>
				</u-form-item>
				<u-form-item label="申请者工号" prop="staffCode" borderBottom labelWidth="100">
					{{form.staffCode}}
				</u-form-item>
				<u-form-item label="申请者名字" borderBottom labelWidth="100">
					{{form.staffName}}
				</u-form-item>
				<u-form-item label="申请者手机号" borderBottom labelWidth="100">
					{{form.staffPhone}}
				</u-form-item>
				<u-form-item label="访客姓名" prop="visitorName" labelWidth="100" borderBottom>
					{{form.visitorName}}
				</u-form-item>
				<u-form-item label="访客身份证" prop="visitorIdCard" borderBottom labelWidth="100">
					{{form.visitorIdCard}}
				</u-form-item>
				<u-form-item label="访客联系方式" prop="visitorPhone" borderBottom labelWidth="100">
					{{form.visitorPhone}}
				</u-form-item>
				<u-form-item label="访问目的" prop="visitReason" borderBottom labelWidth="100">
					{{form.visitReason}}
				</u-form-item>
				<u-form-item label="访问楼栋" prop="visitPosition" borderBottom labelWidth="100">
					{{form.visitPosition}}
				</u-form-item>
				<u-form-item label="访问时间" prop="inTime" borderBottom labelWidth="100">
					{{form.inTime}} ~ {{form.outTime}}
				</u-form-item>
				<u-form-item label="备注" borderBottom labelWidth="100">
					{{form.remarks}}
				</u-form-item>
			</u--form>
		</view>
		<view style="display: flex;justify-content: space-around;margin-top: 32px;">
			<u-button customStyle="border: none;color: #fff;font-weight: 600;width: 200rpx;font-size:16px;" type="primary" @click="changeApply">修改申请</u-button>
			<u-button customStyle="border: none;color: #fff;font-weight: 600;width: 200rpx;font-size:16px;" type="error" @click="deleteApply">删除申请</u-button>
		</view>
	</view>
</template>

<script>
	import { delApply } from '@/api/information.js'
	export default {
		data() {
			return {
				form: {
					id: '', //主键
					applyNo: '', //申请单号
					visitorName: '',
					visitorIdCard: '',
					visitorPhone: '',
					visitReason: '', //访问目的
					visitPosition: '', //访问楼栋
					inTime: '', //开始时间
					outTime: '', //结束时间
					staffCode: '',
					staffName: '',
					remarks: '',
					staffPhone: '', // 申请者手机号
					status: '', //申请状态
				},
			}
		},
		onLoad(options) {
			const getFormData = JSON.parse(decodeURIComponent(options.form))
			console.log(getFormData)
			this.form.id = getFormData.id //申请单号
			this.form.applyNo = getFormData.applyNo //申请单号
			this.form.inTime = getFormData.inTime //开始时间
			this.form.outTime = getFormData.outTime //结束时间
			this.form.visitorName = getFormData.visitorName //访客姓名
			this.form.visitorIdCard = getFormData.visitorIdCard //访客身份证
			this.form.visitorPhone = getFormData.visitorPhone
			this.form.visitReason = getFormData.visitReason //访问目的
			this.form.visitPosition = getFormData.visitPosition //访问楼栋
			this.form.staffCode = getFormData.staffCode //申请者工号
			this.form.staffName = getFormData.staffName //申请者姓名
			this.form.remarks = getFormData.remarks //备注
			this.form.staffPhone = getFormData.staffPhone || '' // 申请者手机号
			this.form.status = getFormData.status || '' // 申请者手机号
		},
		methods: {
			//点击删除申请
			async deleteApply() {
				const res = delApply(this.form.id)
				wx.showToast({
					title: '删除成功',
					icon: 'success',
					duration: 3000
				})
				setTimeout(() => {
					wx.switchTab({
						url: '/pages/list/list'
					})
				}, 1000)
			},
			//点击修改申请
			changeApply() {
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.check-list-info {
		padding: 22rpx;
	
		.form {
			padding: 40rpx 32rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
		.blue {
			color: #1076e3;
		}
		.red {
			color: #f02a0a;
		}
		.green {
			color: #2ebf00;
		}
	}
</style>
<style lang="scss">
	.check-list-info {
		.u-form-item__body__right__content__slot {
			text-align: right;
			// color: #999;
		}
		.uicon-arrow-right {
			position: absolute !important;
			right: 10rpx;
			bottom: 0;
		}
		.u-input__content__field-wrapper__field {
			text-align: right !important;
		}
		.u-form-item__body__right__message {
			text-align: right !important;
		}
		.u-form-item__body__left__content__label {
			font-weight: 600;
		}
	}
</style>