<template>
	<view class="uinfo_view">
		<view class="form-box-ud" style="border-radius: 10upx;">
			<view class="form-item" >
				<text class="label">姓　　名：</text>
				<view class="ipt-box">
					<input v-model="realName" type="text" maxlength="120" disabled="true" />
				</view>
			</view>
			<view class="form-item" >
				<text class="label">手机号码：</text>
				<view class="ipt-box">
					<input v-model="mobile" type="text" maxlength="120" disabled="true" />
				</view>
			</view>
			<view class="form-item" >
				<text class="label">部　　门：</text>
				<view class="ipt-box box box-between">
					<input style="width: 80%;" v-model="deptText" type="text" maxlength="120" disabled="true"  />
					<button  @tap="showTree" style="height: 70upx;line-height: 70upx; font-size: 28upx;color: white;background-color: #4db4ea;margin: 0px;"  @click="editUserInfo()">修改</button> 
				</view>
			</view>
		</view>
		
		<!-- <button class="confirm-btn" @click="editUserInfo()">修改</button> -->
		<tki-tree ref="tkitree" :range="range" rangeKey="name" confirmColor="#4e8af7"
		@confirm="treeConfirm"  
		@cancel="treeCancel"
		@childrenClick="childrenClick"
		/>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import{updateUserInfo,getCodeInfo,getDeptByParentId} from '@/common/api.js'
	import {callbackRequest,alertTip,setStorage,getStorage,devEnv} from '@/common/util.js'
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import dyDatetimePicker from '@/components/dateTime.vue'
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		components: {
			uniIcons,
			dyDatetimePicker,
			avatar
		},
		data() {
			return {
				userInfo:getStorage("userInfo"),
				showFlag:0,//0 查看，1修改
				realName:getStorage("userInfo").realName,
				mobile:getStorage("userInfo").mobile,
				departmentId:getStorage("userInfo").deptId,
				departmentName:getStorage("userInfo").departmentName,
				orgId:getStorage("userInfo").orgId,
				orgName:getStorage("userInfo").orgName,
				deptText:getStorage("userInfo").deptNameUrl,
				chooseDept:{},
				range:[],
				
				vCode:'',
				codeKey:'',
				jsq:null,//计时器
				btnText:'获取验证码',
				headImg:getStorage("userInfo").wxProfile,
				headImgB64:getStorage("userInfo").wxProfile,
			}
			
		},
		computed: {
		},
		onLoad() {
			this.getDeptByParentId(0,new Array());
		},
		methods: {
			...mapMutations(['login']),
			longTap(){
				var vconShow = uni.getStorageSync('1001093_vconShow') == null ? '0' : uni.getStorageSync('1001093_vconShow');
				if(vconShow == 0){
					uni.setStorageSync('1001093_vconShow', "1");
				}else{
					uni.setStorageSync('1001093_vconShow', "0");
				}
				console.log(uni.getStorageSync('1001093_vconShow'));
			},
			
			
			childrenClick(e){
				var id = e[0].id;
				this.getDeptByParentId(id,e);
			},
			treeConfirm(e) {
				this.chooseDept = e[0];
				console.log(e);
				uni.showModal({
					title: '确认',
					content: '请确认是否修改部门',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							let deptText = "";
							let deptId = "";
							for(let i=0;i<this.chooseDept.parents.length;i++){
								deptText+=this.chooseDept.parents[i].name+"/";
								deptId+=this.chooseDept.parents[i].id+"/";
							}
							deptText+=this.chooseDept.name;
							deptId+=this.chooseDept.id;
							this.editUserInfo(deptText,deptId);
							this.deptText = deptText;
						} else if (res.cancel) {
						}
					}
				});
				
				
			},
			// 取消回调事件
			treeCancel(e) {
			},
			// 显示树形选择器
			showTree() {
				this.$refs.tkitree._show();
			},
			getSubScript(id,arr){
				for(var i=0;i<arr.length;i++){
					if(id == arr[i].id){
						return i;
					}
				}
			},
			getDeptByParentId(parentId,arr){
				let params = {
					method: getDeptByParentId,
					data: {
						parentId: parentId
					}
				};
				callbackRequest(params).then(res => {
					res = res.data;
					if (res.returnCode==1) {
						if(res.returnData.length==0){
							return;
						}
						if(parentId==0){
							this.range = res.returnData;
						}else{
							var obj = arr[0];
							var parentArr = obj.parents;
							if(parentArr.length==0){
								for(var i=0;i<this.range.length;i++){
									var rangeObj = this.range[i];
									if(parentId == rangeObj.id){
										 this.range[i].children = res.returnData;
										 this.range[i].show = true;
										 this.range[i].showChild = true;
										 this.range[i].open = true;
										 this.$refs.tkitree._initTree();
										 return;
									}
								}
							}else{
								var numArr=[];
								var dataArr = this.range;
								for(var i=0;i<parentArr.length;i++){
									var subScript = this.getSubScript(parentArr[i].id,dataArr);
									numArr.push(subScript);
									dataArr = dataArr[subScript].children;
								}
								for(var j=0;j<dataArr.length;j++){
									if(parentId == dataArr[j].id){
										numArr.push(j);
										break;
									}
								}
								if(numArr.length==2){
									this.range[numArr[0]].children[numArr[1]].children = res.returnData;
								}else if(numArr.length==3){
									this.range[numArr[0]].children[numArr[1]].children[numArr[2]].children = res.returnData;
								}else if(numArr.length==4){
									this.range[numArr[0]].children[numArr[1]].children[numArr[2]].children[numArr[3]].children = res.returnData;
								}
								this.$refs.tkitree._initTree()
								
							}
						}
					}
				});
			},
			checkPhone (phone) {
			  if (!(/^1[3456789]\d{9}$/.test(phone))) {   
				  return false;
			  } 
			  return true;
			},
			testCode(code) {
				if(!(/^\d{6}$/.test(code))){
					return false;
				}
				return true;
			},
			getCodeInfo(){
				if(this.jsq){return false;}
				if (!this.checkPhone(this.uinfo.mobile)) {
					alertTip('请填写正确的手机号码','',1000);
					return false;
				}
				let data = {
					"method": getCodeInfo,
					"data": {
						phone:this.uinfo.mobile
					}
				}
				callbackRequest(data)
				.then(res =>{
					if(res.data.returnCode == 1){
						this.codeKey = res.data.returnMsg;
						alertTip('验证码已发送，请注意查收！','',3000);
						this.timer();
					}
				})
			},
			//倒计时
			timer(){
				let i = 60;
				let _this = this;
				this.jsq = setInterval(function(){
					if(i == 0){
						_this.btnText = '重新发送';
						clearInterval(_this.jsq);
						_this.jsq = null;
						return false;
					}
					_this.btnText = i+'s';
					i--;
				},1000);
				
			},
			editUserInfo(deptTextUrl,deptIdUrl){
				if(!this.realName){
					alertTip('请填写姓名','',1000);
					return false;
				}
				if(!this.mobile){
					alertTip('请填写手机号','',1000);
					return false;
				}
				if (!this.checkPhone(this.mobile)) {
					alertTip('请填写正确的手机号码','',1000);
					return false;
				}
				if(this.chooseDept.id){
					this.departmentId = this.chooseDept.id;
					this.departmentName = this.chooseDept.name;
					this.orgId =  this.chooseDept.parents[0].id;
					this.orgName =this.chooseDept.parents[0].name;
				}
				let data = {
					"method": updateUserInfo,
					"data": {
						realName:this.realName,
						mobile:this.mobile,
						departmentId:this.departmentId,
						departmentName:this.departmentName,
						orgId:this.orgId,
						orgName:this.orgName,
						id:this.userInfo.id,
						deptIdUrl:deptIdUrl,
						deptTextUrl:deptTextUrl
					}
				}
				callbackRequest(data)
				.then(res =>{
					res = res.data;
					if(res.returnCode == 1){
						alertTip('用户信息已修改','',2000);
						var userInfo=getStorage("userInfo");
						userInfo.deptName = res.returnData.departmentName == null ? '' : res.returnData.departmentName;
						userInfo.deptId = res.returnData.department_id == null ? '' : res.returnData.department_id;
						userInfo.orgName = res.returnData.orgName == null ? '' : res.returnData.orgName;
						userInfo.deptNameUrl = res.returnData.deptNameUrl == null ? '' : res.returnData.deptNameUrl;
						userInfo.departmentName = res.returnData.departmentName == null ? '' : res.returnData.departmentName;
						userInfo.department_id = res.returnData.department_id == null ? '' : res.returnData.department_id;
						userInfo.deptIdUrl = res.returnData.deptIdUrl == null ? '' : res.returnData.deptIdUrl;ss
						uni.setStorage({
							key: "userInfo",
							data: userInfo
						})
						this.login(userInfo);
					}
				})
				
			}
		
		},
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.form-box-ud {
		background: #fff;
		.form-item {
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			padding: 30upx 20upx 10upx 20upx;
			.label {
				width: 150upx;
				font-size: 28upx;
				color: #333;
				font-weight: bold;
				line-height: 50upx;
			}
			.ipt-box {
				margin-left: 40upx;
				margin-top: 20upx;
				input {
					width: 100%;
					height: 70upx;
					line-height: 70upx;
					font-size: 28upx;
					color: #666;
					border: 1px solid #e5e5e5;
					padding-left: 20upx;
					border-radius: 10upx;
					// padding: 40upx 20upx;
				}
				textarea{
					width: 100%;
					height: 200upx;
					font-size: 28upx;
					color: #666;
					border: 1px solid #e5e5e5;
					padding: 20upx;
					border-radius: 10upx;
				}
				.radio-group{
					font-size: 26upx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-right: 40upx;
					min-width: 140upx;
					margin-bottom: 20upx;
				}
			}
			.select {
				.arrow {
					float: right;
					width: 16upx;
					height: 29upx;
					margin-top: 10upx;
				}
				.picker {
					height: 50upx;
					line-height: 50upx;
					font-size: 26upx;
					color: #666;
					margin-left: 10upx;
				}
			}
		}
	}
	
	.bg-ccc{
		background: #ccc !important;
	}
	.icon_view {
		color: $font-color-light;
		margin-left: 2vw;
	}

	.uinfo_view {
		font-size: $font-lg;
		// background: #fff;
		min-height:100vh;
	}

	.u_head {
		padding: 4vw;
	}

	.head_img {
		margin: 40upx auto;
		margin-top: 50upx;
		width: 190upx;
		height:190upx;
		box-shadow: 0 0 10rpx 1rpx #f8f8f8;
		border: 1px solid #e5e5e5;
		border-radius:20upx;
	}
	.head_img image{
		width:100%;
		height:100%;
		border-radius:20upx;
	}
	.head_edit {
		position: absolute;
		top: 41vw;
		left: 56vw;
		width: 10vw;
		height: 10vw;
		z-index: 9999;
	}

	.i_img {
		width: 100%;
		height: 100%;
		border-radius: 50%;

	}

	.head_name {
		font-size: 40upx;
		font-weight: 800;
		text-align: center;
	}

	.u_mid {
		padding: 4vw;
	}

	.mid_view {
		padding: 4vw 0;
		display: flex;
		border-bottom: 1px solid #eee;
	}
	.code-box  .getCodeBtn{
		float:right;
		width:22vw;
		height:50rpx;
		background: #ff6600;
		text-align: center;
		line-height: 50rpx;
		border-radius:4rpx;
		font-size:26rpx;
		color:#fff;
	}
	.code-box .tab_rig {
		width: 40vw;
		height: 25px;
	}
	.tab_left {
		width: 25vw;
		text-align: right;
		margin-right: 3vw;
		line-height:50rpx;
	}

	.tab_rig {
		width: 55vw;
		line-height:50rpx;
		input{
			height: 50rpx;
		}
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 10px;
		margin-top: 90upx;
		margin-bottom: 60upx;
		background: #4db4ea;
		color: #fff;
		font-size: $font-lg;
		
	}
	.ipt-box {
		margin-left: 160upx;
		input {
			width: 100%;
			height: 50upx;
			line-height: 50upx;
			font-size: 26upx;
			color: #666;
		}
	}
	
	.select {
		margin-left: 0rpx;
		width: 60vw;
		font-size: 30rpx;
		color: #666;
		.picker{
			line-height: 50rpx;
		}
		.arrow {
			float: right;
			width: 16upx;
			height: 29upx;
			margin-top: 10upx;
		}
	
		input {
			width: 70%;
		}
	}
	
	.bg-gray{
		background-color: #9A9A9A;
	}
	
	.box {
		display: flex;
		display: -webkit-flex;
	}
	
	.box-row-reverse {
		flex-direction: row;
	}
	
	/*上下排列*/
	.box-column {
		flex-direction: column;
	}
	
	/*上下排列*/
	.box-left {
		justify-content: flex-start;
	}
	
	/*居右*/
	.box-right {
		justify-content: flex-end;
	}
	
	/*居左*/
	.box-center {
		justify-content: center;
	}
	
	/*居中*/
	.box-between {
		justify-content: space-between;
	}
	
	/*两端对齐*/
	.box-align-center {
		align-items: center;
	}
	
	.box-wrap {
		flex-wrap: wrap;
	}
</style>
