<template>
	<view class="list">
		<view class="employee" v-for="(item,index) in user" :key="item.employeeId" @click="choose(index)">
			<view class="label">
				<u-avatar style="margin-right: 30rpx;" :text="item.employeeName[0]" size="24" fontSize="12" bgColor="#2b7"></u-avatar>{{item.employeeName}}
			</view>
			<view class="icon" v-if="item.isSelect">
				<u-icon name="checkbox-mark" color="#2b7"></u-icon>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:[],
				taskId:null,
				selected:[]
			};
		},
		onLoad(option) {
			this.taskId=option.taskId
			uni.$u.http.get('/agriculture/taskEmployee/list?taskId='+option.taskId).then(res=>{
				this.select = res.rows.map(item=>item.employeeId)
				uni.$u.http.get('/agriculture/employee/list').then(employee=>{
					this.user=employee.rows.map(item=>{
						if(this.select.includes(item.employeeId)){
							return {
								...item,
								isSelect:true
							}
						}else{
							return {
								...item,
								isSelect:false
							}
						}
					})
				})
			})
		},
		destroyed() {
			uni.$emit("getEmp","success")
		},
		methods:{
			choose(index){
				this.user[index].isSelect=!this.user[index].isSelect
				if(this.user[index].isSelect){
					uni.$u.http.post("/agriculture/taskEmployee",{
						taskId:this.taskId,
						employeeId:this.user[index].employeeId
					}).then(()=>{
						this.$refs.uToast.show({
							type: 'success',
							message: "添加成功",
						})
					}).catch(err=>{
						this.user[index].isSelect=!this.user[index].isSelect
					})
				}else{
					uni.$u.http.delete("/agriculture/taskEmployee/"+this.taskId+'/'+this.user[index].employeeId).
					then(()=>{
						this.$refs.uToast.show({
							type: 'success',
							message: "删除成功",
						})
					}).catch(err=>{
						this.user[index].isSelect=!this.user[index].isSelect
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.list{
	background-color: #fff;
}
.employee{
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	border-bottom: 1px solid #f3f3f3;
	.label{
		display: flex;
		align-items: center;
	}
}
</style>
