<template>
	<view>
		<uni-card :is-shadow="false" :border="false" is-full spacing="0" margin="20">
			<uni-search-bar class="search" radius="30" placeholder="请输入成员名称" clearButton="auto" cancelButton="none" v-model="keyword" />
		</uni-card>
		
		<template v-if="list.length">
			<ul class="list">
				<li v-for="item in list">
					<image class="avatar" :src="item.userAvatars || require('@/static/image/avatar.png')" mode=""></image>
					<view class="info">
						<view class="c-name">{{ item.isTeam == '1' ? '团队管理员' : '团队成员' }}: {{ item.userName }}</view>
						<view class="line">
							<text class="name">手机号码：</text>
							<text class="val">{{ item.phone }}</text>
						</view>
						<view class="line">
							<text class="name">加入时间：</text>
							<text class="val">{{ item.lastLoginTime.split(' ')[0] }}</text>
						</view>
					</view>
				</li>
			</ul>
		</template>
		<empty v-else></empty>
		
		<uni-icons class="plus" type="plus-filled" size="60" color="#007eff" @click="$util.to('../addStaff/addStaff')"></uni-icons>
	</view>
</template>

<script>
	import { queryTeamMembers } from '@/apis/modules/parner.js'
	export default {
		data() {
			return {
				id: '',
				keyword: '',
				list: [],
			}
		},
		watch: {
			keyword () {
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.getList()
				}, 500)
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.id = options.id
			this.getList()
		},
		methods: {
			// 获取列表
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				queryTeamMembers({
					teamId: this.id,
					name: this.keyword,
				}).then(({ teamMembers }) => {
					uni.hideLoading()
					this.list = teamMembers
				}).catch(e => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.list {
	margin-top: 20rpx;
	background-color: #fff;
	li {
		display: flex;
		align-items: center;
		padding: 20rpx 40rpx;
		border-bottom: 1px solid #f7f7f7;
		&:last-child {
			border-bottom: 0;
		}
	}
	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-right: 30rpx;
		border-radius: 50%;
	}
	.c-name {
		margin-bottom: 6rpx;
		font-size: 30rpx;
		color: #333;
	}
	.line {
		display: flex;
		padding: 2rpx 0;
	}
	.name {
		margin-right: 10rpx;
		white-space: nowrap;
		font-size: 28rpx;
		color: #999;
	}
	.val {
		font-size: 28rpx;
		color: #333;
	}
}
.plus {
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
}
</style>
