<!-- 点击列表的查看--信息查看页面 -->
<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 v-if="form.status === '申请中'" customStyle="border: none;color: #fff;font-weight: 600;width: 200rpx;font-size:16px;" type="primary" @click="changeApply">修改申请</u-button>
			<u-button v-if="form.status === '申请中'" customStyle="border: none;color: #fff;font-weight: 600;width: 200rpx;font-size:16px;" type="error" @click="deleteApply">删除申请</u-button>
		</view>
		
		<!-- 提示是否删除 -->
		<u-popup
		  :show="show"
		  mode="bottom"
		  :round="10"
		  :closeOnClickOverlay="false"
		  @close="close">
		  <view class="popup">
				<view class="title">提示</view>
		    <view class="content"> 确认将访客提交信息删除？一经删除，无法恢复。</view>
		    <view class="footer">
					<button class="allow refuse" @click="show = false"> 取消</button>
					<button class="allow" @click="deleteApply"> 确认</button>
		    </view>
		  </view>
		</u-popup>
		
		<!-- 提示是到期不能修改或删除 -->
		<u-popup
		  :show="showNotAllow"
		  mode="bottom"
		  :round="10"
		  :closeOnClickOverlay="false"
		  @close="close">
		  <view class="popup">
				<view class="title">提示</view>
		    <view class="content"> {{popupText}}</view>
		    <view class="footer">
					<button class="allow refuse" @click="showNotAllow = false"> 取消</button>
					<button class="allow" @click="confirm"> 确认</button>
		    </view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import { delApply } from '@/api/information.js'
	export default {
		data() {
			return {
				popupText: '',
				show: false, //控制提示删除popup
				showNotAllow: false, //控制不允许修改和删除
				form: {
					id: '', //主键
					applyNo: '', //申请单号
					visitorName: '',
					visitorIdCard: '',
					visitorPhone: '',
					visitReason: '', //访问目的
					visitPosition: '', //访问楼栋
					inTime: '', //开始时间
					outTime: '', //结束时间
					staffCode: '',
					staffName: '',
					remarks: '',
					staffPhone: '', // 申请者手机号
					status: '', //申请状态
				},
				ServiceTel: '020-61228107' //客服电话
			}
		},
		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: {
			//获取当前零点和第二天8点的时间戳(比较当前时间是否在预定访问时间的第二天的8点之后)
			getStamp() {
				const time = this.form.inTime.replace(/-/g, '/')
				//当前时间戳
				let nowStamp = new Date().getTime()
				// 访问时间当天零点
				let currentZero = new Date(new Date(time).toLocaleDateString()).getTime() // 获取当天零点
				// 第二天8点（当天0点 + 24个小时 = 第二天0点 + 8个小时）
				var currentTime = currentZero + 24 * 60 * 60 * 1000 + 8 * 60 * 60 * 1000
				if(nowStamp >= currentTime) {//过了次日8点了
				console.log('过时了')
					return false
				} else {
					console.log('没过时')
					return true
				}
			},
			//点击修改或删除
			handleClick(text) {
				const timeDiffResult = this.getStamp()
				this.popupText = `您的访客申请信息已无法进行${text}？如有问题请联系客服电话98778070`
				if(timeDiffResult) { 
					if(text === '修改') {
						this.changeApply()
					} else {
						this.show = true
					}
				} else { //超过访问时间次日8点,不可修改和删除
					this.showNotAllow = true
				}
			},
			//提示不可修改和删除的时候的点击确定
			confirm() {
				this.showNotAllow = false
				wx.makePhoneCall({
					phoneNumber: this.ServiceTel,
				})
			},
			//点击删除申请
			async deleteApply() {
				wx.showLoading({
					title: '删除中'
				})
				const res = await delApply(this.form.id)
				wx.hideLoading()
				wx.showToast({
					title: '删除成功',
					icon: 'success',
					duration: 3000
				})
				setTimeout(() => {
					wx.switchTab({
						url: '/pages/list/list'
					})
				}, 1000)
			},
			//点击修改申请
			changeApply() {
				wx.navigateTo({
					url: '/pagesA/changeListInfo/changeListInfo?form=' + encodeURIComponent(JSON.stringify(this.form))
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.check-list-info {
		padding: 22rpx;
	.popup {
		.title {
			font-size: 36rpx;
			color: #000;
			font-weight: 600;
			margin-bottom: 32rpx;
			text-align: center;
		}
		.content {
			font-size: 32rpx;
			color: #000;
			margin-bottom: 42rpx;
			text-align: center;
		}
		.footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-end;
			.allow {
				color: rgba(197, 0, 10, 1);
				height: 68rpx;
				padding: 16px 19px;
				line-height: 0;
				border: 1rpx solid rgba(197, 0, 10, 1);
				margin: 0 40rpx;
			}
			.refuse {
				color: rgba(142, 142, 142, 1.0);
				border: 1rpx solid rgba(142, 142, 142, 1.0);
				background-color: transparent;
			}
		}
	}
		.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;
		}
		.u-popup__content {
		  padding: 30rpx 40rpx;
			// padding-bottom: 0;
		}
	}
</style>