<template>
	<view class="page">
		<view class="search_input">
			<uni-easyinput class="uni-mt-5" suffixIcon="close" v-model="value" placeholder="请输入用户名查找" @iconClick="clear"
				@input="change"></uni-easyinput>
		</view>
		<tui-list-view color="#777">
			<tui-list-cell v-for="(item,index) in dataList" :key="item.id" arrow unlined
				@click="navTo('/pages/template/projectPersonnel/detail',item)">
				<view class="list-item">
					用户名:
					<span>{{item.name}}</span>
				</view>
				<view class="list-item">
					昵称:
					<span>{{item.nickname}}</span>
				</view>
				<view class="list-item">
					角色:
					<span>{{item.roleName}}</span>
				</view>
				
			</tui-list-cell>
		</tui-list-view>
		<Floating-Button @click="navTo('/pages/template/projectPersonnel/add')"></Floating-Button>		
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex';
	import md5 from '@/common/md5.js';
	export default {
		data() {
			return {
				value: "",
				// showLoading: true,
				dataList: [],
				// 当前请求页面
				currentPage: 1,
				// 目前所属页面
				tempPage: null,
				// 最后页面
				lastPage: null
			};
		},
		computed: {
			...mapState(['APIHOST'])
		},
		mounted() {
			this.getList()
		},
		onLoad() {
			this.value=''
			this.currentPage = 1,
			this.getList()
		},
		// uniapp触底钩子函数
		onReachBottom() {
			if (this.tempPage < this.lastPage) {
				this.getList()
			}
		},
		methods: {
			// 输入框监听事件
			change(inputValue) {
				this.value = inputValue
				this.debounce(this.search, 500)()
			},
			// 清空搜索值
			clear() {
				if (this.value == '') {
					return
				}
				this.value=''
				this.currentPage = 1,
				this.getList()
			},
			search() {
				this.$request.get(this.APIHOST + "ProjectPersonnel/getList", {
				    params: {
				        username: this.value,
				    },
				}).then(res=>{
					this.dataList = res.data.data
					
				})
			},
			getList() {
				// this.showLoading = true
				
				this.$request.get(this.APIHOST + "ProjectPersonnel/getList", {
				    params: {
				        name: this.value,
						page: this.currentPage,
				    },
				}).then(res=>{
					console.log(res);
					const newData = res.data.data;
					this.dataList = [...this.dataList, ...newData];
					this.dataList = this.removeDuplicateIds(this.dataList);
					this.currentPage = res.data.current_page + 1
					this.tempPage = res.data.current_page
					this.lastPage = res.data.last_page;
					console.log('请求', this.currentPage);
					console.log('当前', this.tempPage);
					console.log('最后', this.lastPage);
					
				})

			},
			// 去重id
			removeDuplicateIds(dataList) {
				const idSet = new Set();
				const deduplicatedList = [];

				for (const item of dataList) {
					if (!idSet.has(item.id)) {
						deduplicatedList.push(item);
						idSet.add(item.id);
					}
				}

				return deduplicatedList;
			},
			navTo(url, item) {
				uni.navigateTo({
					url,
					success: (res) => {
						res.eventChannel.emit('detail', item)
					}
				});
			},
			// 防抖函数
			debounce(func, wait) {
				let timeout

				return function() {
					let context = this // 保存this指向
					let args = arguments // 拿到event对象

					clearTimeout(timeout)
					timeout = setTimeout(function() {
						func.apply(context, args)
					}, wait)
				}
			},
		}
	}
</script>

<style lang="scss">
	.page{
		padding: 0rpx 20rpx;
	}
	.tui-list-cell {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 20rpx auto;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.list-item {
		font-size: $uni-font-size-sm;

		span {
			margin-left: 20rpx;
		}
	}

	.search_input {
		margin: 20rpx auto 0;
	}
</style>