<template>
	<view class="projectUser-box">
		<u-search class="search-box" placeholder="输入昵称或手机号搜索" :show-action="true" v-model="searchValue" @custom="onSearchFn" @change="onSearchFn" @search="onSearchFn"></u-search>
		<mescroll-body top="100" ref="mescrollRef" bottom="100" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="user-list">
				<view class="user-item" v-for="item in userList" :key="item.userId">
					<view class="user-left">
						<view class="user-icon">
							<u-icon name="account-fill" size="70"></u-icon>
						</view>
						<view class="user-main">
							<view class="user-name">昵称：{{item.nickName}}</view>
							<view class="user-phone">手机：{{item.phoneNumber}}</view>
							<view class="user-role">角色：{{item.roleName}}</view>
							<view class="user-role" >状态：
								<text v-if="getUserStatus(item)" style="color: #ffaa00">未注册</text>
								<text v-else style="color: #00AB40">正常</text>
							</view>
						</view>
					</view>
					<view class="user-btn" v-if="item.roleKey!='root'">
						<u-icon name="edit-pen" v-if="!getUserStatus(item)" size="50" color="#0066cc" @click="openEditMenu(item)" style="padding: 20rpx;"></u-icon>
						<u-icon name="trash" size="50" color="#dc2727"  @click="delUser(item)" style="padding: 20rpx;"></u-icon>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="btn-list" @click="openAddUserModel">
			<view class="btn-box">
				添加项目用户
			</view>
		</view>
		<u-modal v-model="addUserModalShow" title="添加用户" :show-cancel-button="true"
			@confirm="$throttle(addUser, 500)">
			<view class="slot-content">
				<u-input v-model="userPhone" :focus="true" border type="text" placeholder="请输入用户手机号" ></u-input>
				<!-- <view class="user-item">
					<text>角色：</text>
					<text @click="select">{{getRoleName(role)}}</text>
				</view> -->
			</view>
		</u-modal>
		<u-toast ref="uToast" />
		<u-select v-model="roleModelShow" :list="roleList" @confirm="confirmRole"></u-select>
		<u-action-sheet :list="editMenuList" @click="selectMenu" v-model="editMenuShow"></u-action-sheet>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins:[MescrollMixin],
		data() {
			return {
				editMenuList:[
					// {
					// 	text: '项目移交',
					// },
					{
						text: '修改成员角色',
					}
				],
				editMenuShow:false,
				roleModelShow: false,
				roleList: [
					{
						value: 'personal',
						label: '普通成员'
					},
					{
						value: 'operator',
						label: '设备运维员'
					}
				],
				userList:[],
				addUserModalShow:false,
				userPhone:'',
				role:'personal',
				searchValue:'',
				projectId:'',
				activeUser:{}
			}
		},
		onLoad(option) {
			console.log("option",option)
			this.projectId = option.projectId;
		},
		methods:{
			getUserStatus(item){
				return item.status==1&&item.userId==null;
			},
			confirmRole(e) {
				console.log(e);
				uni.showModal({
					title: '提示',
					content:'确认要修改用户角色为(' + e[0].label + ')吗？',
					confirmText:'确认',
					cancelText:'取消',
					success: (res) => {
						if (res.confirm) {
							this.$put("/app/project/" + this.projectId+'/'+this.activeUser.userId+'/'+e[0].value,{}).then((res)=>{
								if(res.code == 200){
									this.$refs.uToast.show({
										title: '修改成功',
										type: 'success',
									})
									this.mescroll.resetUpScroll();
								}else{
									this.$refs.uToast.show({
										title: res.msg,
										type: 'error',
									})
								}
							}).catch((err)=>{
								this.$refs.uToast.show({
									title: err.msg,
									type: 'error',
								})
							})
						}else if (res.cancel) {
							
						}
					}
				});
			},
			openEditMenu(val){
				this.activeUser = val;
				this.editMenuShow = true;
			},
			selectMenu(e){
				console.log("点击菜单",this.editMenuList[e].text)
				if(this.editMenuList[e].text == '项目移交'){
					uni.showModal({
						title: '提示',
						content:'确认要将项目移交给用户(' + this.activeUser.nickName + ')吗？',
						confirmText:'确认',
						cancelText:'取消',
						success: (res) => {
							if (res.confirm) {
								this.$post("/app/project/transfer",{
									projectId:this.projectId,
									userId:this.activeUser.userId
								}).then((res)=>{
									console.log("res",res)
									if(res.code == 200){
										this.$refs.uToast.show({
											title: '项目移交成功',
											type: 'success',
										})
										this.addUserModalShow = false;
										this.mescroll.resetUpScroll();
									}else{
										
									}
								}).catch((err)=>{
									
								})
							}else if (res.cancel) {
								
							}
						}
					});
				}else if(this.editMenuList[e].text == '修改成员角色'){
					this.roleModelShow = true;
				}
			},
			getRoleName(val){
				let name = '点击选择角色'
				this.roleList.forEach(item=>{
					if(item.value == val){
						name = item.label;
					}
				})
				return name;
			},
			openAddUserModel(){
				this.userPhone = '';
				this.addUserModalShow = true;
			},
			addUser(){
				this.$post("/app/project/useradd",{
					projectId:this.projectId,
					phone:this.userPhone
				}).then((res)=>{
					console.log("res",res)
					if(res.code == 200){
						this.$refs.uToast.show({
							title: '添加成功',
							type: 'success',
						})
						this.addUserModalShow = false;
						this.mescroll.resetUpScroll();
					}else{
						
					}
				}).catch((err)=>{
					
				})
			},
			delUser(user){
				console.log("user",user)
				uni.showModal({
					title: '提示',
					content:'确认要删除用户(' + user.nickName + ')吗？',
					confirmText:'确认',
					cancelText:'取消',
					success: (res) => {
						if (res.confirm) {
							let flag = this.getUserStatus(user);
							if(flag){
								console.log("删除项目临时成员")
								this.$DELETE("/app/project/temp/" + this.projectId+'/'+user.phoneNumber,{}).then((res)=>{
									console.log("res",res)
									if(res.code == 200){
										this.$refs.uToast.show({
											title: '删除成功',
											type: 'success',
										})
										this.mescroll.resetUpScroll();
									}else{
										this.$refs.uToast.show({
											title: res.msg,
											type: 'error',
										})
									}
								}).catch((err)=>{
									this.$refs.uToast.show({
										title: err.msg,
										type: 'error',
									})
								})
							}else{
								this.$DELETE("/app/project/" + this.projectId+'/'+user.userId,{}).then((res)=>{
									console.log("res",res)
									if(res.code == 200){
										this.$refs.uToast.show({
											title: '删除成功',
											type: 'success',
										})
										this.mescroll.resetUpScroll();
									}else{
										this.$refs.uToast.show({
											title: res.msg,
											type: 'error',
										})
									}
								}).catch((err)=>{
									this.$refs.uToast.show({
										title: err.msg,
										type: 'error',
									})
								})
							}
							
						}else if (res.cancel) {
							
						}
					}
				});
			},
			onSearchFn(e){
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let obj = {
					phoneNumber:this.searchValue,
					projectId: this.projectId,
				}
				this.$get("/app/project/userlist",obj).then((res)=>{
					if (res.rows && res.rows.length>0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows; 
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length; 
						//设置列表数据
						this.userList = curPageData; //追加新数据
						this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						// this.mescroll.endSuccess(curPageData.length);
					} else{
						this.userList = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				}).finally(()=>{
					// this.dropdownIsOpen = false;
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.search-box{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		background-color: #fff;
		z-index: 10;
	}
	.user-list{
		padding: 20rpx;
		.user-item{
			background: #fff;
			border-radius: 20rpx;
			border: 1px solid #ddd;
			padding: 20rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user-left{
				display: flex;
				align-items: center;
				.user-icon{
					padding: 10rpx;
					margin-right: 10rpx;
				}
				.user-main{
					font-size:28rpx;
					color: #666;
					
				}
			}
			.user-btn{
				padding: 10rpx;
			}
		}
	}
	.slot-content{
		padding: 20rpx 30rpx;
	}
	
	.btn-list{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 140rpx;
		padding: 20rpx 20rpx;
		background: #fff;
		.btn-box{
			background: #0066cc;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 36rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}
	}
	
</style>