<template>
	<view style="width: 100%">
	<view class="paiban">
		<view class="item-box">
			<view class="">
				<view class="item">
					<view class="name">
						<text class="label">巡更日期：</text>
						<text class="desc">{{detail.patrolDate||'-'}}</text>
					</view>
					<view class="name">
						<text class="label">巡更项目：</text>
						<text class="desc">{{detail.patrolItem||'-'}}</text>
					</view>
					<view class="name">
						<text class="label">巡更类型：</text>
						<text class="desc">{{detail.patrolType||'-'}}</text>
					</view>
					
					<view class="name">
						<text class="label">巡更时段：</text>
						<text class="desc">{{detail.patrolPeriod||'-'}}</text>
					</view>
					<view class="name">
						<text class="label">巡更人员：</text>
						<text class="desc">{{detail.patrolPersonnel||'-'}}</text>
					</view>
					<view class="name">
						<text class="label">异常时间：</text>
						<text class="desc">{{detail.exceptionTime||'-'}}</text>
					</view>
					<view class="name">
						<text class="label">异常描述：</text>
						<text class="desc">{{detail.exceptionDescription||'-'}}</text>
					</view>
					<view class="name">
						<text class="label">处理措施：</text>
						<text class="desc">{{detail.correctiveAction||'-'}}</text>
					</view>
					<view class="name">
						<text class="label">结束时间：</text>
						<text class="desc">{{detail.endTime ||'-'}}</text>
					</view>
					<view class="name">
						<text class="label">结束描述：</text>
						<text class="desc">{{detail.endDescription||'-'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="btn-box" style="display:flex">
		<button type="primary" class="edit-btn" @click="handel_edit_click(detail.id)">修改</button>
		<button type="plain" v-if="userId===1" class="edit-btn" @click="handel_edit_click(detail.id)">删除</button>
	</view>
	</view>
</template>


<script setup>
		import {
			getPatrolRecords
		} from "@/api/timingPatrolling/patrolRecords/index.ts";
		import mixin from "@/mixins/myLoadMore";
	import {
		onLoad,
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted
	} from 'vue';
	import store from '@/store'
	const userId=store.state.user.user.userId;
	onLoad((option) => {
		uni.showLoading({
			title:'加载中...'
		})
		getList(option.id);
	})
	onHide(() => {
		console.log('setup中的onHide');
	})
	onReady(() => {
		console.log('setup中的onReady');
	})
	let finished = ref(false)
	let total = ref(0)
	let detail = ref({})
	let loading = ref(false);

	//跳转详情页
	function handel_edit_click(id) {
		console.log('id',id)
		uni.navigateTo({
			url:"./edit?id=" + id
		});
	}
	
	//获取老人信息列表
	function getList(id) {
		loading.value = true;
		getPatrolRecords(id).then(
			(res) => {
				uni.hideLoading()
				console.log('res详情',res)
				if (res.code == 200) {
					detail.value = res.data;
				}
				console.log('detail详情',detail.value)
				loading.value = false;
			}
		).catch(()=>{
			uni.hideLoading()
		})
	}

</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5;
		font-size: 28rpx;
		color: #3d3d3d;
		min-height: 100vh;
		.btn-box{
			margin: 0 30rpx;
		}
		.paiban {
			padding-top:10rpx;
			.top {
				text-align: right;
				margin: 0 30rpx 10rpx;
			}
	
			.nav2 {
				margin:0 20rpx;
				::v-deep  {
					.u-tabs__wrapper__nav__item{
						width: 50%;
						background-color: #f5f5f5;
						padding:0;
						.u-tabs__wrapper__nav__item__text{
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					
				}
				
			}
			.item-box{
				
				overflow: hidden;
				.title{
					font-size:30rpx;
					font-weight: 600;
					box-sizing:border-box;
					padding:0 24rpx;
					height: 88rpx;
					line-height: 88rpx;
					background-color: #f5f5f5;
				}
				.item{
					margin:20rpx 24rpx 28rpx; 
					line-height:48rpx;
					box-sizing:border-box;
					border-radius: 20rpx 20rpx ;
					box-sizing: border-box;
					::v-deep{
						ol{
							padding-left:26rpx !important;
							margin-left: 0 !important;
						}
					}
					.name{
						font-weight:600;
						color:#444;
						display: flex;
						flex-direction: column;
						margin-bottom:24rpx;
					}
					.label{
						flex:none;
						display: inline-block;
						width:210rpx;
						text-align: justify;
						text-justify: inter-word;
						
					}
					.desc{
						font-weight:500;
						color:#666;
						
					}
					
				}
				
			}
		}
		.edit-btn{
			width:40%;
		}
	}
	
</style>