<template>
	<view style="width: 100%">
		<view class="u-page">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
			<u-row customStyle="margin: 5px">
				<u-col span="9">
					<u-search style="z-index: 999" :disabled="true" 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-popup :show="show" @close="close" @open="open">
				<view style="width: 93%; align-self: center">
					<u--form labelWidth="auto" labelPosition="left" 
					:model="queryParamsForm" :rules="rules" ref="form1">
						<u-form-item label="租户编号" prop="tenantId" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square"
							 border="none" v-model="queryParamsForm.tenantId">
							</u--input>
						</u-form-item>
						<u-form-item label="联系人" prop="contactUserName" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none"
								v-model="queryParamsForm.contactUserName">
							</u--input>
						</u-form-item>
						<u-form-item label="联系电话" prop="contactUserName" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none"
								v-model="queryParamsForm.contactPhone">
							</u--input>
						</u-form-item>
						<u-form-item label="公司名称" prop="contactUserName" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none"
								v-model="queryParamsForm.contactPhone">
							</u--input>
						</u-form-item>
						
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup>
			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<u-empty v-if="DataList.length == 0" mode="list"></u-empty>
					<u-cell-group customStyle="background-color: white;" v-else>
						<u-cell v-for="(item, index) in DataList" 
						size="large" isLink clickable
							:title="getItemTitle(item)"
							 :name="item.id"
							@click="handel_cell_click(item)">
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>


<script setup>
	import {
			transformPostBody,
			transformRequestURL,
		} from "@/utils/requestParams.js";
	
		import {
			GetAgeByIdCard
		} from "@/utils/stringFormat.js";
	
		import {
			QueryRTInfoList
		} from "@/api/elder/RTInfo.js";
		import mixin from "@/mixins/myLoadMore";
	import {
		onLoad,
		
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted
	} from 'vue';
	// 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,
		tenantId:'',
		contactUserName:'',
		contactPhone:'',
		companyName:''
	});
	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(() => {
		getServerData()
	});
	//条件搜索框
	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() {
		queryParamsForm = {
			tenantId:'',
			contactUserName:'',
			contactPhone:'',
			companyName:''
		};
		handel_search_click();
	}
	//跳转新增页
	function handel_plus_click() {
		// this.$tab.navigateTo("/pages/RTInfo/add");
		uni.navigateTo({
			url:'/pages_RTInfo/pages/add'
		})
	}
	//跳转详情页
	function handel_cell_click(id) {
		console.log('id',id.name)
		uni.navigateTo({
			url:"/pages_RTInfo/pages/detail?id=" + id.id
		});
	}
	//加载更多合并结果
	function fetch() {
		queryParams.pageNum = queryParams.pageNum + 1; //加载下一页
		QueryRTInfoList(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;
		QueryRTInfoList(queryParamsForm).then(
			(res) => {
				if (res.code == 200) {
					DataList.value = res.rows;
					total.value = res.total;
				}
				loading.value = false;
			}
		);
	}
	//获取老人简介
	function getItemTitle(item) {
		let result = "";
		//  "name": "薛荣珍",
		//     "sex": "女",
		//     "age": "87",
		if (item.companyName) result += item.companyName + " ";
		if (item.contactUserName) result += item.contactUserName + " ";
		return result;
	}
	//获取老人住址
	// "permanentProvince": "山西省",
	// "permanentCity": "威海文登市",
	// "permanentDistrict": "离石区",
	// "permanentTown": "",
	// "permanentVillage": "城东社区",
	// "permanentStreet": "滨河街道",
	// "permanentResidenceAdd": "滨河佳苑后散户5排4院",
	function getItemLabel(item) {
		let result = "";
		//if (item.permanentProvince) result += item.permanentProvince
		//if (item.permanentCity) result += item.permanentCity
		if (item.permanentDistrict) result += item.permanentDistrict;
		// if (item.permanentTown) result += item.permanentTown
		if (item.permanentStreet) result += item.permanentStreet;
		if (item.permanentVillage) result += item.permanentVillage;
		if (item.permanentResidenceAdd) result += item.permanentResidenceAdd;
		return result;
	}

	function getServerData() {
		// 模拟从服务器获取数据时的延时
		setTimeout(() => {
			let res = {
				categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
				series: [{
						name: '目标值',
						data: [35, 36, 31, 33, 13, 34],
					},
					{
						name: '完成量',
						data: [18, 27, 21, 24, 6, 28],
					},
				],
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
</script>

<style>
</style>