<template>
	<view class="fullHeight bgWhite">
		<headers :showBack="true">
			<view class="headerName">
				参与培训的人员
			</view>
		</headers>
		<scroll-view scroll-y="true" class="pageContent">
			<view class="personContent">
				<view class="personItem" v-for="(item,index) in personList" :key="index">
					<image v-if="item.fieldAcquisitionUrl" :src="url_config+'image/'+item.fieldAcquisitionUrl" class="profile_photo"></image>
					<image v-else src="/static/profile_photo.png" class="profile_photo"></image>
					<view class="personInfo">
						<view class="name">
							{{item.workerName}}
						</view>
						<view class="teamName">
							{{item.teamName}}
						</view>
						<view class="small">
							{{item.sex==2?'女':'男'}} {{item.age}}
						</view>
					</view>
					<image src="/static/icon-delete.png" class="icon-delete" @click="deleteFn(index)"></image>
				</view>
				<view class="placeholderBox" v-show="personList.length==0">
					<image src="/static/noData.png" class="noDataImg"></image>
					<view class="text">
						暂无数据
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottomOperate">
			<view class="item left">
				扫码添加
			</view>
			<view class="item" @click="searchPerson">
				手动添加
			</view>
		</view>
	</view>
</template>

<script>
	import headers from "@/components/headers/headers.vue"
	export default {
		components:{headers},
		data() {
			return {
				personList:[],
				selectArr:[],
				projectDetail:{},
				workerName:'',
				pageTitle:''
			};
		},
		onShow(){
			this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
			// this.loadData()
			this.personList=JSON.parse(uni.getStorageSync('person'))
		},
		methods:{
			deleteFn(index){
				this.personList.splice(index,1)
				uni.setStorageSync('person',JSON.stringify(this.personList))
			},
			searchPerson(){
				uni.navigateTo({
					url:'../../selectPerson/selectPerson2'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageContent{
		height: calc(100% - 125px);
	}
	.personContent{
		padding: 30rpx;
	}
.personItem{
	display: flex;
	align-items: center;
	box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
	position: relative;
	margin-bottom: 10rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	// padding: 0 30rpx;
	font-size: 30rpx;
	.teamName{
		font-size: 26rpx;
	}
	.small{
		font-size: 24rpx;
		opacity: 0.8;
	}
	
}

.profile_photo{
	width: 100rpx;
	height: 120rpx;
	margin-right: 20rpx;
}
.icon-delete{
	width: 28rpx;
	height: 30rpx;
	position: absolute;
	top: calc(50% - 7px);
	right: 30rpx;
}
.bottomOperate{
	position: fixed;
	bottom: 0;
	background-color: #f7f7f7;
	width: 100%;
	height: 44px;
	text-align: center;
	font-size: 30rpx;
	line-height: 44px;
	display: flex;
	.left{
		background-color: $uni-color-primary;
		color: white;
	}
	.item{
		flex: 1;
	}
}
</style>
