<template>
	<view style="width: 100%">
	<view class="paiban">
		<view class="top">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
			<u-row customStyle="margin: 5px"  v-if="userId===1">
				<u-col span="9">
					<u-search style="z-index: 999"  bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
				<u-col span="3">
					<u-button type="primary" 
					@click="handel_plus_click" 
					size="small" shape="circle"
					 class="custom-style"
						plain text="创建">
					</u-button>
				</u-col>
			</u-row>
			<u-row customStyle="margin: 5px" v-else>
				<u-col span="12">
					<u-search style="z-index: 999"  bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
				
			</u-row>
		</view>
		<view class="item-box">
			<view class="">
				<view v-for="(item,index) in DataList" :key="index" class="item" @click="topath(item.id)">
					<view class="name">
						<text class="label">巡更日期：</text>
						<text class="desc">{{item.patrolDate}}</text>
					</view>
					<view class="name">
						<text class="label">巡更类型：</text>
						<text class="desc">{{item.patrolType}}</text>
					</view>
					<view class="name">
						<text class="label">巡更项目：</text>
						<text class="desc">{{item.patrolItem}}</text>
					</view>
					
					<view class="name">
						<text class="label">巡更时段：</text>
						<text class="desc">{{item.patrolPeriod}}</text>
					</view>
					<view class="name">
						<text class="label">巡更人员：</text>
						<text class="desc">{{item.patrolPersonnel}}</text>
					</view>
					<view class="name">
						<text class="label">巡更状态：</text>
						<text class="desc">{{item.patrolStatus}}</text>
					</view>
					<view class="name">
						<text class="label">操作类型：</text>
						<text class="desc">{{item.operationType}}</text>
					</view>
					<view class="name">
						<text class="label">异常时间：</text>
						<text class="desc">{{item.exceptionTime}}</text>
					</view>
				
				</view>
			</view>
		</view>
	</view>
	</view>
</template>


<script setup>
	import {
			transformPostBody,
			transformRequestURL,
		} from "@/utils/requestParams.js";
	
		import {
			GetAgeByIdCard
		} from "@/utils/stringFormat.js";
	
		import {
			listPatrolRecords
		} 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;
	// let {status,
	// 	finished,
	// 	DataList,
	// 	total,
	// 	loadText,
	// 	MyonLoad} = mixin()
	onShow(() => {
		queryParams.pageNum = 1
		getList();
		console.log('111setup中的onShow', queryParams);
	})

	onHide(() => {
		console.log('setup中的onHide');
	})

	onReady(() => {
		console.log('setup中的onReady');
	})
	let finished = ref(false)
	let loadText = reactive({
		contentdown: "点击加载更多",
		contentrefresh: "正在加载",
		contentnomore: "没有更多数据了",
	})

	let MyonLoad = (e) => {
		if (status.value == "more") {
			fetch();
			finished.value = true;
			e.detail = {
				status: "loading",
			};
		}
		return e;
	}
	let  DataList = ref([])
	let total = ref(0)
	 let queryParams = reactive({
		pageNum: 1,
		pageSize: 20, //每次加载更多数据量
		startAge: undefined,
		endAge: undefined,
		areaCode: undefined,
	});
	let queryParamsForm = reactive({
		idNumber: undefined,
		name: undefined,
		sex: undefined,
		currentState: undefined,
		selfCareAbility: undefined,
		urbanRural: undefined,
		capabilityAssess: undefined,
		livingStatus: undefined,
		pensionMode: undefined,
		childStatus: undefined,
	});
	let rules = reactive({});
	let loading = ref(false);
	let show = ref(false);
	let chartData = reactive({});
	// 计算属性
	let status = computed(() => {
		if (DataList.value.length < total.value) {
			return "more";
		} else {
			finished.value = true;
			return "nomore";
		}
	});
	onMounted(() => {
	});
	function topath(id){
		uni.navigateTo({
			url:'./detail?id='+id
		})
	}
	//条件搜索框
	function handle_SearchBox_click() {
		show.value = true;
	}

	function open() {}

	function close() {
		show.value = false;
	}
	//条件搜索按钮点击
	function handel_search_click() {
		finished.value = false; //重置搜索完结
		queryParams.pageNum = 1; //重置搜索页
		DataList.value = []; //清空原结果集
		getList();
		show.value = false; //关闭搜索框
	}
	//条件重置按钮点击
	function handel_reset_click() {
		queryParams = {
			pageNum: 1,
			pageSize: 15, //每次加载更多数据量
			startAge: undefined,
			endAge: undefined,
			areaCode: undefined,
		};
		queryParamsForm = {
			idNumber: undefined,
			name: undefined,
			sex: undefined,
			currentState: undefined,
			selfCareAbility: undefined,
			urbanRural: undefined,
			capabilityAssess: undefined,
			livingStatus: undefined,
			pensionMode: undefined,
			childStatus: undefined,
		};
		handel_search_click();
	}
	//跳转新增页
	function handel_plus_click() {
		uni.navigateTo({
			url:'./add'
		})
	}
	//跳转详情页
	function handel_cell_click(id) {
		console.log('id',id.name)
		uni.navigateTo({
			url:"/pages_RTInfo/pages/detail?id=" + id.name
		});
	}
	//加载更多合并结果
	function fetch() {
		queryParams.pageNum = queryParams.pageNum + 1; //加载下一页
		QueryRTInfoList(queryParams, queryParamsForm).then(
			(res) => {
				if (res.code == 200) {
					let list = [...DataList.value]
					let list2 = res.rows.filter(
							(item) => !list.some((i) => i.id === item.id)
						)
					// DataList =list.concat(
					// 	res.rows.filter(
					// 		(item) => !list.some((i) => i.id === item.id)
					// 	)
					// );
					DataList.value=[...list,...list2]
					total.value = res.total;
				}
			}
		);
	}
	function getList() {
		loading.value = true;
		listPatrolRecords(queryParams).then(
			(res) => {
				if (res.code == 200) {
					DataList.value = res.rows;
					total.value = res.total;
				}
				loading.value = false;
			}
		);
	}

</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5;
		font-size: 28rpx;
		color: #3d3d3d;
		min-height: 100vh;
		.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;
					padding:10rpx 24rpx;
					box-shadow: 0 0 10rpx #c6c6c6;
					::v-deep{
						ol{
							padding-left:26rpx !important;
							margin-left: 0 !important;
						}
					}
					.name{
						font-weight:600;
						color:#444;
						display: flex;
					}
					.label{
						flex:none;
						display: inline-block;
						width:210rpx;
						text-align: justify;
						text-justify: inter-word;
					}
					.desc{
						font-weight:500;
						color:#666;
						
					}
					
				}
				
			}
		}
	}
	
</style>