<template>
	<view>
		<tui-form ref='form'>
			<view  class="user">
				<image class="avatar-img" src="/static/images/sxlq/loginPortrait.png"></image>
				<view class="user-info-mobile">
					<text style="font-size: 25rpx;color: #000;">{{ itemInfo.nickname }}</text>
				</view>
			</view>
			<tui-input required
					   label='角色'
					   placeholder='请选择'
					   v-model="itemInfo.roleName"
					   textRight
					   disabled>
			  <template v-slot:right>
				<tui-icon name="arrowright"
						  :size="24"
						  @click="picker"></tui-icon>
			  </template>
			</tui-input>
			<tui-input label='用户账号' v-model='itemInfo.name' textRight ></tui-input>
			<tui-input label='用户密码' v-model="itemInfo.password"  textRight ></tui-input>
			<tui-input label='用户昵称' v-model='itemInfo.nickname' textRight ></tui-input>
			
			<view class="operation" >
				<tui-button  @click="edit">更新</tui-button>
			</view>
			<view class="operation" >
				<tui-button  @click="delUser">删除</tui-button>
			</view>
		</tui-form>
		<tui-picker :show="showPicker"
		            :pickerData="roleList"
		            @hide="hide"
		            @change="pickRoleChange"></tui-picker>
	</view>
</template>

<script>
import {
	mapState,
	mapGetters,
	mapActions,
	mapMutations
} from 'vuex';
import {getStorage} from '@/utils/storage.js';

	export default {
		data() {
			return {
				itemInfo: {},
				user:{},
				selectRoleId:null,
				showPicker:false,
				roleList:[],
				password:null,
			};
		},
		computed: {
			...mapState(['APIHOST', 'userinfo']),
			// switch组件映射Boolean
			is_switch() {
				return this.itemInfo.is_use === 1 ? true : false
			}
		},
		onLoad() {
			// 页面通信
			this.page = this.getOpenerEventChannel();
			// 触发事件
			this.page.on('detail', (data) => {
				this.itemInfo = data
				console.log(this.itemInfo);
			})
			this.roleList = this.getRoleList();
		},
		methods: {
			hide(e) {
			  this.showPicker = false;
			},
			pickRoleChange(e){
			  this.itemInfo.roleName = e.text;
			  this.selectRoleId = e.value;
			},
			picker(){
				this.showPicker = true
			},
			getRoleList(){
				uni.request({
					url: this.APIHOST + "ProjectPersonnel/getRoleList",
					header: {
						authorization: "Bearer " + getStorage("sxlq_token"),
					},
					success: (res) => {
						this.roleList =res.data.data.map(item => ({
							value: item.id,
							text: item.name,
						}))
					}
				});
			},
			// 返回上一级
			
			edit(){
				this.itemInfo.status=this.itemInfo.status==1?2:1
				this.user.id = this.itemInfo.id
				this.user.user_id=this.itemInfo.userId
				this.user.avatar=this.itemInfo.avatar
				this.user.name=this.itemInfo.name
				this.user.nickname=this.itemInfo.nickname
				this.user.password=this.itemInfo.password
				this.user.role_id=this.selectRoleId
				this.user.status=this.itemInfo.status
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; 
				uni.request({
					url: this.APIHOST + 'ProjectPersonnel/edit',
					method: "POST",
					data: this.user,
					header: {
						authorization: "Bearer " + getStorage("sxlq_token"),
					},
					success: (res) => {
						if (res.data.code == 0) {
							setTimeout(() => {
							    uni.showToast({
							        title: "更新成功",
							        icon: "none",
							    });
								uni.navigateBack({
									success: function() {
										beforePage.getList(); // 执行上一页的getList里面的方法方法
									}
								});
							}, 0);
						}
					}
				})
								
			},
			delUser(){
				this.user.id = this.itemInfo.id
				this.user.user_id=this.itemInfo.userId
				this.user.role_id=this.selectRoleId
				uni.request({
					url: this.APIHOST + 'ProjectPersonnel/delete',
					method: "POST",
					data: this.user,
					header: {
						authorization: "Bearer " + getStorage("sxlq_token"),
					},
					success: (res) => {
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; 
						if (res.data.code == 0) {
							uni.showToast({
							  title: "删除成功",
							  icon: "success",
							  duration: 1000,
							});
							setTimeout(() => {
							 uni.navigateBack({
							 	success: function() {
							 		beforePage.getList(); // 执行上一页的getList里面的方法方法
							 	}
							 });
							}, 500);
						}
					}
				})
			},
			// 消息提示组件
			showTips(value) {
				let options = {
					msg: value,
					duration: 1000,
				};
				// 确认已获取到组件实例
				this.$refs.toast && this.$refs.toast.showTips(options);
			},
			
		}
	}
</script>

<style lang="scss">
	.user {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 2;
		margin-top: 20rpx;
	}
	
	.avatar-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		align-self: center;
	}
		
	.user-info-mobile {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		font-size: 28rpx;
		color: #fefefe;
		line-height: 28rpx;
		align-self: center;
		padding: 0 50rpx;
	}

	

	
	.operation {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;

		.tui-btn {
			width: 80% !important;
			height: 80rpx !important;
			line-height: 80rpx !important;
		}
	}

	.tui-input__wrap {
		height: 80rpx !important;
	}

	.tui-input__label {
		width: 180rpx !important;
		font-size: $uni-font-size-sm !important;
	}
</style>