<template>
	<view class="list_main">
		<!-- <view style="display: flex;justify-content: space-between;">
			<input class="input search_input" v-model="search" placeholder-style="color:#ccc;" placeholder="搜索" />
			<view class="search_button"  @click="GetList()">搜索</view>
		</view> -->
		<view v-if="List.length>0">
			<view class="person_list_wrapper">
				<view class="person_item_wrapper" v-for="(i, k) in List" :key="k">
					<view style="display: flex;align-items: center;"  @click="PersonClick(i)">
						<view class="person_avatar_wrapper">
							<image v-if="i.sex === 1" src="@/static/images/userm.png"></image>
							<image v-else src="@/static/images/userw.png"></image>
						</view>
						<view class="person_info_wrapper">
							<view class="person_text_wrapper">
								<view class="person_name_wrapper">{{ i.name }}</view>
								<view class="person_sex_wrapper">{{ i.sex === 1 ? "男" : "女" }}性</view>
							</view>
							<view class="person_idnumber_wrapper">{{ i.id_number }}</view>
						</view>
					</view>
					
					<view style="display: flex; width: 300rpx;"   >
						<view class="person_type_wrapper">本人</view>
						<view style="display: flex; justify-content: end; width: 100%; padding-right: 20rpx;">
							<view class="tools_row" @click="editClickFunc(i.id)">
								<uni-icons type="compose" size="20"></uni-icons>
								<view class="tools">编辑</view>
							</view>
							<view  class="tools_row"  @click="delClickFunc(i.id)">
								<uni-icons type="trash" size="20"></uni-icons>
								<view class="tools">删除</view>
							</view>
							
						</view>
					</view>
					


				</view>
			</view>
		</view>
		<view v-else style="font-size: 28rpx;color: #666; width: 100%; text-align: center; padding-top: 200rpx;">
			请先添加体检人
		</view>
		<view  class="add_button_wrapper">
			<view class="add_button_text_wrapper" @click="addClickFunc()">添加体检人</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		PersonGetList,PersonDel
	} from "@/api"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	let search = ref('');
	let List = ref([]);
	const GetList = () => {
		PersonGetList({
			search: search.value
		}).then(res => {
			if (res.status) {
				List.value = res.data.list
			}

		})
	}
	const goto = (id) => {
		let userlist_type = sessionStorage.getItem('userlist_type')
		let url = null;
		if (userlist_type == 'expend') {
			url = '/pages/user/expend?member_id=' + id
		}
		if (userlist_type == 'recharge') {
			url = '/pages/user/recharge?member_id=' + id
		}
		uni.navigateTo({
			url: url
		})
	}
	const addClickFunc=()=>{
		uni.navigateTo({
			url:'/pages/user/person_edit'
		})
	}
	const editClickFunc=(id)=>{
		uni.navigateTo({
			url:'/pages/user/person_edit?personid=' + id
		})
	}
	const delClickFunc=(id)=>{
		uni.showModal({
			title: '提示',
			content: '确定删除吗？',
			success: function (res) {
				if (res.confirm) {
					 PersonDel({
					 	id: id
					 }).then(res => {
					 	if (res.status) {
					 		GetList() 
					 	}
					 })
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	
	}
	const PersonClick=(person)=>{
		uni.navigateTo({
			url:'/pages/fenzhen/fenzhen_paidui?id_number='+person.id_number
		})
	}
	onShow(() => {
		GetList()
	})
</script>

<style scoped>
	.list_main {
		background-color: #fafafa;
		height: 100vh;
	}

	.person_list_wrapper {
		width: 750rpx;
		margin: 0 auto;
		overflow-y: auto;
	}

	.person_item_wrapper {
		width: 690rpx;
		height: 166rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		position: relative;
		display: flex;
		align-items: center;
		margin: 20rpx auto 0; 
		padding-right: 20rpx;
	}

	.person_avatar_wrapper {
		width: 105rpx;
		height: 105rpx;
		margin-left: 16rpx;
	}

	.person_avatar_wrapper image {
		width: 105rpx;
		height: 105rpx;
		display: inline-block;
		object-fit: contain;
	}

	.person_info_wrapper {
		margin-left: 14rpx;
		width: 250rpx;
	}

	.person_text_wrapper {
		display: flex;
		align-items: end;
	}

	.person_name_wrapper {
		font-weight: 500;
		font-size: 32rpx;
		color: #0e0e0e;
		line-height: 1;
	}

	.person_sex_wrapper {
		font-size: 24rpx;
		color: #9e9e9e;
		line-height: 1;
		margin-left: 10rpx;
	}

	.person_idnumber_wrapper {
		font-size: 26rpx;
		color: #0e0e0e;
		line-height: 1;
		margin-top: 20rpx;
	}

	.person_type_wrapper {
		position: absolute;
		width: 100rpx;
		height: 46rpx;
		background: #c0c0c0;
		border-radius: 0rpx 15rpx 0rpx 15rpx;
		right: 0;
		top: 0;
		font-weight: 500;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 46rpx;
		text-align: center;
	}

	.list_left {
		color: #333;
		width: 280rpx;
		display: flex;
		font-size: 34rpx;

	}

	.name {}

	.tel {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.yue {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		margin-left: 20rpx;
		color: #FF8A5B;
	}

	.tags {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		margin-left: 20rpx;
	}

	.search_input {
		background-color: #fff;
		border-radius: 20rpx;
		height: 80rpx;
		margin: 10rpx 0rpx 10rpx 20rpx;
		padding-left: 30rpx;
		width: 500rpx;
	}

	.search_button {
		height: 80rpx;
		line-height: 80rpx;
		margin: 10rpx 20rpx 10rpx 0rpx;
		background-color: #79e8e3;
		text-align: center;
		width: 180rpx;
		border-radius: 20rpx;
	}
	.add_button_text_wrapper {
		font-size: 31rpx;
		font-weight: 500;
		color: #F6FDFD;
		text-align: center;
	}
	
	 
	.add_button_wrapper {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		width: 580rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
		border-radius: 45rpx;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.tools{
		
		font-size: 28rpx;
		width: 60rpx;
		color:#666;
	}
	.tools_row{
		margin-left: 20rpx;
		display: flex;
	}
</style>