<template>
	<view class="addSalesman">
		<!-- <view class="" v-if="!isEdit">
			<template slot="top">
				<u-navbar title="新增业务员" :autoBack="true" leftIconSize="0" placeholder>
					<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
					<u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon>
				</u-navbar>
			</template>
		</view> -->
		<u-navbar v-if="isEdit" title="编辑业务员"  :autoBack="true" leftIconSize="0" placeholder>
			<u-icon name="arrow-left" slot="left" color="#333333" size="24" @click="zuo"></u-icon>
		</u-navbar>
		<u-navbar v-if="!isEdit" title="新增业务员"  :autoBack="true" leftIconSize="0" placeholder>
			<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
		</u-navbar>
		<!-- <view class="" v-if="isEdit">
			<template slot="top">

				<!-- <u-navbar v-if="isEdit" title="编辑业务员" :autoBack="true" leftIconSize="0" placeholder>
					<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>

				</u-navbar> -->
			<!-- </template> -->
		<!-- </view> -->
		<div class="title">账号信息</div>
		<div class="form">
			<u-form labelPosition="left" :model="form" ref="form" labelWidth="auto">
				<u-form-item label="业务员姓名" borderBottom required>
					<u-input v-model="name" placeholder="请输入业务员姓名" border="none" inputAlign="right" @blur="namea">
					</u-input>
				</u-form-item>
				<!-- <u-form-item v-if="isEdit" label="昵称" borderBottom>
					<u-input v-model="nickname" placeholder="请输入昵称" border="none" inputAlign="right" @blur="namebb">
					</u-input>
				</u-form-item> -->
				<u-form-item label="登录账号" borderBottom required>
					<u-input v-model="numberer" placeholder="请输入登录账号" border="none" inputAlign="right" @blur="number">
					</u-input>
				</u-form-item>
					<u-form-item v-if="!isEdit"  label="登录密码" borderBottom required>
						<u-input v-model="cipherer" placeholder="请输入登录密码" border="none" type="number" inputAlign="right" @blur="cipher">
						</u-input>
					</u-form-item>
					<u-form-item v-if="isEdit"  label="登录密码" borderBottom >
						<u-input v-model="cipherer" placeholder="********" border="none" type="number" inputAlign="right" @blur="cipher">
						</u-input>
					</u-form-item>

				<u-form-item v-if="!isEdit" label="支付密码" borderBottom >
					<u-input v-model="password" placeholder="请输入支付密码" border="none" type="number" inputAlign="right" @blur="cipherpassword">
					</u-input>
				</u-form-item>
				<u-form-item v-if="isEdit" label="支付密码" borderBottom >
					<u-input v-model="password" placeholder="********" border="none" type="number" inputAlign="right" @blur="cipherpassword">
					</u-input>
				</u-form-item>
				<u-form-item label="职位" borderBottom @click="$refs.addSelectPopup.start()">
					<view class="" v-if="position" style="text-align: right;width: 100%;">
						<u-input placeholder-style="color:#000" disabled disabledColor="#ffffff" :placeholder="position?position.name:'请选择职务员的职位'" border="none" inputAlign="right">
						</u-input>
					</view>
					<view class="" v-if="!position" style="text-align: right;width: 100%;">
						<u-input  disabled disabledColor="#ffffff" :placeholder="position?position.name:'请选择职务员的职位'" border="none" inputAlign="right">
						</u-input>
					</view>
					<u-icon slot="right" name="arrow-right" color="#c0c4cc"></u-icon>
				</u-form-item>
				<u-form-item label="部门" borderBottom @click="$refs.addSelectpup.start()">
					<view class="" v-if="departme" style="text-align: right;width: 100%;">
						<u-input placeholder-style="color:#000" disabled disabledColor="#ffffff" :placeholder="departme?departme.name:'请选择业务员的部门'" border="none" inputAlign="right">
						</u-input>
					</view>
					<view class="" v-if="!departme" style="text-align: right;width: 100%;">
						<u-input  disabled disabledColor="#ffffff" :placeholder="departme?departme.name:'请选择业务员的部门'" border="none" inputAlign="right">
						</u-input>
					</view>
					<u-icon slot="right" name="arrow-right" color="#c0c4cc"></u-icon>
				</u-form-item>


				<u-form-item label="联系方式" required borderBottom>
					<u-input v-model="phon" placeholder="请输入业务员的联系电话" maxlength="11" border="none" inputAlign="right" type="number" @blur="phone">
					</u-input>
				</u-form-item>
				<u-form-item  label="邮箱" borderBottom>
					<u-input v-model="postda" placeholder="请输入业务员的邮箱" border="none" inputAlign="right" type="text" @blur="postbox">
					</u-input>
				</u-form-item>
				<u-form-item label="QQ" borderBottom>
					<u-input v-model="qqam" placeholder="请输入业务员的QQ" border="none" inputAlign="right" type="number" @blur="qq">
					</u-input>
				</u-form-item>
				<!-- <u-form-item label="企业微信号" borderBottom>
					<u-input v-model="enterpr" placeholder="请输入业务员的企业微信号" border="none" inputAlign="right" type="text" @blur="enterprise">
					</u-input>
				</u-form-item> -->
				<u-form-item label="账号状态" borderBottom>
					<div style="display: flex;justify-content: flex-end;width: 100%;">
						<u-switch v-model="form.status" activeColor="#21BBF3" @change="change"></u-switch>
					</div>
				</u-form-item>
				<u-form-item label="备注">
					<u-input v-model="remark" placeholder="请输入备注" border="none" inputAlign="right" type="text" @blur="remarks">
					</u-input>
				</u-form-item>
			</u-form>
		</div>

		<div class="title" style="margin-top: 32rpx;">权限信息</div>
		<div class="form">
			<u-form labelPosition="left" :model="form" ref="form" labelWidth="auto" >
				<u-form-item label="业务员等级" borderBottom required @click="$refs.grade.start()">
					<u-input v-model="typea.name" disabled disabledColor="#ffffff" placeholder="请选择业务员等级" border="none" inputAlign="right">
					</u-input>
					<u-icon slot="right" name="arrow-right" color="#c0c4cc"></u-icon>
				</u-form-item>

				<view class="" v-if="isEdit">
					<u-form-item v-if="auth_level==2" label="额度编辑" required borderBottom>
						<u-input v-model="limit" placeholder="请输入业务员的额度" maxlength="11" border="none" inputAlign="right" type="number">
						</u-input>
					</u-form-item>
					<u-form-item label="工作权限" @click="jurisdiction">
						<u-input  disabled disabledColor="#ffffff" placeholder="请选择工作权限" border="none" inputAlign="right">
						</u-input>
						<u-icon slot="right" name="arrow-right" color="#c0c4cc"></u-icon>
					</u-form-item>
				</view>
				<view class="" v-if="!isEdit">
					<u-form-item v-if="typea.id==2" label="额度编辑" required borderBottom>
						<u-input v-model="limit" placeholder="请输入业务员的额度" maxlength="11" border="none" inputAlign="right" type="number">
						</u-input>
					</u-form-item>
				</view>
			</u-form>
		</div>
		<!-- <div style="height: 150rpx;"></div> -->
		<!-- 新增 -->
		<div class="btn" v-if="!isEdit" @click="baocunhus">保存</div>
		<!-- 编辑 -->
		<div class="btns" v-else>
			<div class="btn1" style="background: #F33B50;" @click="modalShow=true">删除</div>
			<div class="btn1" @click="cunboa">保存</div>
		</div>

		<addSelectPopup ref="addSelectPopup"></addSelectPopup>
		<addSelectpup ref="addSelectpup"></addSelectpup>
		<grade ref="grade"></grade>


		<u-overlay :show="modalShow">
			<div class="modal">
				<div class="title">提示</div>
				<div class="content">
					是否删除该业务员？
				</div>
				<div class="modal_btn">
					<div class="cancel" @click="modalShow=false">取消</div>
					<div class="confirm" @click="delet">确定</div>
				</div>
			</div>
		</u-overlay>
	</view>
</template>

<script>
	import addSelectPopup from "./components/addSelectPopup.vue"
	import addSelectpup from "./components/addSelectpup.vue"
	import grade from "./components/grade.vue"
	export default {
		components: {
			addSelectPopup,
			addSelectpup,
			grade,

		},
		data() {
			return {
				form: {
					status: false
				},
				value:'',//姓名
				limit:'',//业务员额度
				isEdit: false,
				modalShow: false,
				nickname:'',//昵称
				name:'',//姓名
				numberer:'',//账号
				cipherer:'',//账号密码
				password:'',//支付密码
				posion:'',//职位id
				position:'',
				departme:'',
				departnt:'',//部门id
				phon:'',//手机号
				postda:'',//邮箱
				qqam:'',//qq号码
				enterpr:'',//企业微信
				remar:'',
				uid:"",//业务员id   编辑
				remark:'',//备注
				list:[],
				grade:'',//业务员等级
				gradename:'',//业务员等级名称
				typea:[],
				typename:'',
				auth_level:'',
				status:false,
				authlist:[
					{id:1,name:'一类'},
					{id:2,name:'二类'}
				],
				arr:[]
			};
		},
		onLoad(uid) {
			let _this=this
			console.log(uid,'uid');


			if (uid.uid) {
				this.isEdit = true
				this.uid=uid.uid
				this.$api.sendRequest({
						url: '/api/salasman/detail',
						data:{
							uid:uid.uid
						},
						// async:false,
						success:(res)=>{
						console.log(res.data.balance,'业务员详情');
						this.form.status=res.data.status==1?true:false
						_this.list=res.data
						this.name=res.data.realname
						this.numberer=res.data.username
						// this.cipherer=res.data.password//
						this.posion=res.data.position_id//2
						this.departnt=res.data.depart_id//1
						this.auth_level=res.data.auth_level
						this.phon=res.data.tel
						this.limit=res.data.balance
						this.nickname=res.data.nickname
						// this.value=res.data.realname
						this.postda=res.data.email//
						this.qqam=res.data.qq
						this.enterpr=res.data.qx_wxcode//
						this.remark=res.data.remark
						for(var i=0;i<this.authlist.length;i++){
							if(res.data.auth_level==_this.authlist[i].id){
								_this.typea.push({id:_this.authlist[i].id,name:_this.authlist[i].name})
								_this.typea=_this.typea[0]
							}
						}
						_this.$api.sendRequest({
							url:'/api/salasman/positionlists',
							success:resdeta=>{
								for(var i=0;i<resdeta.data.length;i++){
									if(resdeta.data[i].id==_this.list.position_id){
										_this.position=resdeta.data[i]
									}
								}
							}
						})
						_this.$api.sendRequest({
							url:'/api/salasman/departlists',
							success:resdeta=>{
								console.log(_this.list.depart_id,'id');
								for(var i=0;i<resdeta.data.length;i++){
									if(resdeta.data[i].id==_this.list.depart_id){
										_this.departme=resdeta.data[i]
									}
								}
							}
						})

					},
				})
			}

			uni.$on('update', (data) => {
				this.position = data
				this.posion=data.id
			})
			uni.$on('department', (data) => {
				this.departme = data
				this.departnt=data.id
			})
			uni.$on('type', (data) => {
				// console.log(data,'data');
				this.typea=data
				this.typename=data.name
			})

		},

		onUnload() {
			uni.$off('update') //每次销毁监听，不然重复监听
			uni.$off('department') //每次销毁监听，不然重复监听
			uni.$off('type')

		},
		onShow() {
			this.arr=uni.getStorageSync('authority')
		},
		methods: {
			jurisdiction() {
				uni.navigateTo({
					url: `/page_salesman_index/index/edit_workbench/edit_workbench?uid=${this.uid}`
				})
			},
			zuo(){		
				event.stopPropagation()
				uni.navigateBack({
					delta: 1
				});
			},
			//获取姓名
			namea(e){
				console.log(e,'ee');
				this.name=e
			},
			namebb(e){
				this.nickname=e
			},
			//获取账号
			number(e){
				this.numberer=e
			},
			//账号密码
			cipher(e){
				this.cipherer=e
			},
			cipherpassword(e){
				// if(e.length!=6){
				// 	this.$util.showToast({
				// 		title: '请输入6位数支付密码'
				// 	});
				// 	return
				// }
				this.password=e
			},
			//获取手机号
			phone(e){
				this.phon=e
			},
			//获取邮箱
			postbox(e){
				this.postda=e
			},
			//获取qq号码
			qq(e){
				this.qqam=e
			},
			//获取企业微信
			enterprise(e){
				this.enterpr=e
			},
			//获取备注信息
			remarks(e){
				this.remar=e
			},
			//状态
			change(e){

				console.log(e);
			},
			//删除
			delet(){
				this.$api.sendRequest({
						url: '/api/salasman/deleteUser',
						data:{
							uid:this.uid
						},
						// async:false,
						success:(res)=>{
						this.$util.showToast({
							title: '删除成功'
						});
						this.modalShow=false
						setTimeout(()=>{
							uni.redirectTo({
								url: '/page_salesman_index/adminSalesman/adminSalesman'
							})
						},500)

					},
				})
			},
			//新增
			baocunhus(){
				//姓名
				console.log(this.name,'姓名');
				if(!this.name.length>0){
					this.$util.showToast({
						title: '请输入姓名'
					});
					return
				}
				//登录账号
				console.log(this.name,'登录账号');
				if(!this.numberer.length>0){
					this.$util.showToast({
						title: '请输入登录账号'
					});
					return
				}
				//登录密码
				if(!this.cipherer.length>0){
					this.$util.showToast({
						title: '请输入登录密码'
					});
					return
				}
				//支付密码
				// if(!this.password.length>0){
				// 	this.$util.showToast({
				// 		title: '请输入支付密码'
				// 	});
				// 	return
				// }
				//支付密码6位
				if(this.password.length!=6 && this.password.length!=0){
					this.$util.showToast({
						title: '请输入6位数支付密码'
					});
					return
				}
				//联系方式
				if(!this.phon.length>0){
					this.$util.showToast({
						title: '请输入联系方式'
					});
					return
				}
				//一类  二类
				if(!this.typea.id){
					this.$util.showToast({
						title: '请选择业务员等级'
					});
					return
				}
				if(this.typea.id==2&&this.limit.length==0){
					this.$util.showToast({
						title: '请输入业务员额度'
					});
					return
				}
				console.log({
					username:this.numberer,//登录手机号
					password:this.cipherer,//登录密码
					nickname:this.nickname,//昵称
					pay_password:this.password,//支付密码
					position_id:this.posion,//职位id
					depart_id:this.departnt,//部门id
					realname:this.name,//姓名
					tel:this.phon ,//联系方式
					email:this.postda,//邮箱
					qq:this.qqam,//qq
					qx_wxcode:this.enterpr,//企业微信
					remark:this.remar,//备注
					auth_level:this.typea.id,//一类  二类
					status:this.form.status?1:0//权限

				});
				this.$api.sendRequest({
					url:`/api/salasman/addSala`,
					data:{
						username:this.numberer,//登录手机号
						password:this.cipherer,//登录密码
						nickname:this.nickname,//昵称
						pay_password:this.password,//支付密码
						position_id:this.posion,//职位id
						depart_id:this.departnt,//部门id
						realname:this.name,//姓名
						tel:this.phon ,//联系方式
						email:this.postda,//邮箱
						qq:this.qqam,//qq
						qx_wxcode:this.enterpr,//企业微信
						remark:this.remar,//备注
						auth_level:this.typea.id,//一类  二类
						status:this.form.status?1:0,//权限
						balance:this.limit
					},
					success:res=>{
						this.$util.showToast({
							title: '新增成功'
						});

						setTimeout(()=>{
							uni.navigateTo({
								url: '/page_salesman_index/adminSalesman/adminSalesman'
							})

						},500)
					}
				})
			},
			//修改
			cunboa(){
				//姓名
				console.log(this.name,'姓名2');
				if(!this.name.length>0){
					this.$util.showToast({
						title: '请输入姓名'
					});
					return
				}
				//登录账号
				console.log(this.numberer,'登录账号2');
				if(!this.numberer.length>0){
					this.$util.showToast({
						title: '请输入登录账号'
					});
					return
				}
				//登录密码
				// console.log(this.cipherer,'登录密码2');
				// if(!this.cipherer.length>0){
				// 	this.$util.showToast({
				// 		title: '请输入登录密码'
				// 	});
				// 	return
				// }
				// //支付密码
				// if(!this.password.length>0){
				// 	this.$util.showToast({
				// 		title: '请输入支付密码'
				// 	});
				// 	return
				// }
				//支付密码6位
				// if(this.password.length!=6 || this.password!=0){
				// 	this.$util.showToast({
				// 		title: '请输入6位数支付密码'
				// 	});
				// 	return
				// }
				//联系方式
				if(!this.phon.length>0){
					this.$util.showToast({
						title: '请输入联系方式'
					});
					return
				}
				//一类  二类
				if(!this.typea.id){
					this.$util.showToast({
						title: '请选择业务员等级'
					});
					return
				}
				if(this.limit.length==0){
					this.$util.showToast({
						title: '请填写业务员额度'
					});
					return
				}
				console.log({
					uid:this.uid, //业务员id
					username:this.numberer,//登录手机号
					password:this.cipherer,//登录密码
					nickname:this.nickname,//昵称
					pay_password:this.password,//支付密码
					position_id:this.posion,//职位id
					depart_id:this.departnt,//部门id
					realname:this.name,//姓名
					tel:this.phon ,//联系方式
					email:this.postda,//邮箱
					qq:this.qqam,//qq
					qx_wxcode:this.enterpr,//企业微信
					remark:this.remar,//备注
					auth_level:this.typea.id,//一类  二类
					// status:this.form.status?1:0//权限
				});
				this.$api.sendRequest({
					url:`/api/salasman/editSala`,
					data:{
						uid:this.uid, //业务员id
						username:this.numberer,//登录手机号
						password:this.cipherer,//登录密码
						nickname:this.nickname,//昵称
						pay_password:this.password,//支付密码
						position_id:this.posion,//职位id
						depart_id:this.departnt,//部门id
						realname:this.name,//姓名
						tel:this.phon ,//联系方式
						email:this.postda,//邮箱
						qq:this.qqam,//qq
						qx_wxcode:this.enterpr,//企业微信
						remark:this.remar,//备注
						auth_level:this.typea.id,//一类  二类
						status:this.form.status?1:0,//权限
						balance:this.limit
					},
					success:res=>{
						this.$util.showToast({
							title: '修改成功'
						});

						setTimeout(()=>{
							uni.navigateTo({
								url: '/page_salesman_index/adminSalesman/adminSalesman'
							})

						},500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	v-deep{
		.uni-input-placeholder{
			color: gold !important;
		}


	}
	.heise{
		color: red;
	}
	.addSalesman {
		padding: 32rpx;

		::v-deep {
			.u-form-item__body {
				padding: 28rpx 0;
			}
		}

		.btns {
			// position: fixed;
			margin-top: 24rpx;
			bottom: 32rpx;
			display: flex;
			width: calc(100% - 64rpx);
			justify-content: space-between;

			.btn1 {
				width: 47%;
				height: 80rpx;
				background: #21BBF3;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;

			}
		}

		.btn {
			height: 80rpx;
			background: #21BBF3;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			// position: fixed;
			margin: 0 auto;
			margin-top: 24rpx;
			
			bottom: 32rpx;
			width: calc(100% - 64rpx);
		}

		.form {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 32rpx;
		}

		.title {
			margin-bottom: 24rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #222222;
		}

		.modal {
			height: 300rpx;
			width: 540rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #222222;
				line-height: 44rpx;
				text-align: center;
				margin-top: 24rpx;
			}

			.content {
				margin-top: 30rpx;
				text-align: center;

				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
			}

			.modal_btn {
				width: 100%;
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: space-evenly;
				padding-bottom: 32rpx;
				margin-top: 56rpx;

				.cancel {
					width: 206rpx;
					height: 72rpx;
					border-radius: 40rpx;
					border: 2rpx solid #E8E8E8;

					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;

					display: flex;
					align-items: center;
					justify-content: center;
				}

				.confirm {
					width: 206rpx;
					height: 72rpx;
					background: #F33B50;
					border-radius: 40rpx;

					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 40rpx;

					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
