<template>
	<view>
		<scroll-view scroll-y="" id="warp">
			<view class="t_login_passList">
				<view class="input_icon">头像</view>：
				<view class="input_img" @tap="upLoadAvatar">
					<image :src="avatarUrl"></image>
				</view>
			</view>
			<view class="t_login_passList">
				<view class="input_icon">姓名</view>：
				<input class="input_css" v-model="formData.employeeName" border="none" placeholder="请输入员工姓名"></input>
			</view>
			<view class="t_login_passList">
				<view class="input_icon">手机</view>：
				<input class="input_css" v-model="formData.employeePhone" type="number" border="none"
					placeholder="手机号将自动成为登录号"></input>
			</view>
			<view class="t_login_passList1 no_center">
				<view class="input_icon">角色</view>：
				<view class="input_css">(账号角色设定后将在下一次登陆后)</view>
				<view class="input_css2">
					<radio-group 
						name="radio" 
						class="input_radio" 
						@change="selectRole"
					>
						<label 
							class="radio_list" 
							v-for="(item,index) in roleLists" 
							:key="index"
						>
							<radio 
								color="#1B64F8FF" 
								:value="item.id" 
								:checked="item.checked" 
							/>
							<text>{{item.name}}</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="t_login_passList bor_bot">
				<view class="input_icon">启用状态：</view>
				<view class="input_img">
					<switch :checked="formData.status==1" color="#007AFF" @change="change" />
				</view>
			</view>
		</scroll-view>
		<view class="btn_css">
			<button class="btn" @tap="nextHandle">保存</button>
		</view>
	</view>
</template>
<script>
	const COS = require('@/static/cos-wx-sdk-v5');
	const {
		urlList,
		https,
		uploadImg
	} = require("@/static/api");
	export default {
		data() {
			return {
				avatarUrl: "",
				formData: {
					employeeName: "",
					employeePhone: "",
					roleId: "",
					status: 1,
				},
				roleLists: [], //角色列表
				id: "",
			};
		},
		onLoad(options) {
			const {id} = options;
			if (id) {
				this.id = id;
				this.getUserInfoId();
				uni.setNavigationBarTitle({
					title: "人员编辑",
				});
			}
		},
		onShow() {
			let roleId = uni.getStorageSync("userinfo").roleId;
			if(roleId==1002){
				this.roleLists= [{
					"id": 1001,
					"name": "车组人员",
					"intro": null,
					"checked":true
				}, {
					"id": 1010,
					"name": "外租伙伴",
					"intro": null,
					"checked":false
				},{
					"id": 1006,
					"name": "业务",
					"intro": null,
					"checked":false
				},{
					"id": 1011,
					"name": "兼职业务",
					"intro": null,
					"checked":false
				}] //角色列表
			}else{
				this.roleLists= [{
					"id": 1001,
					"name": "车组人员",
					"intro": null,
					"checked":true
				}, {
					"id": 1002,
					"name": "调度",
					"intro": null,
					"checked":false
				}, {
					"id": 1005,
					"name": "管理员",
					"intro": null,
					"checked":false
				},
				{
					"id": 1004,
					"name": "财务",
					"intro": null,
					"checked":false
				},{
					"id": 1006,
					"name": "业务",
					"intro": null,
					"checked":false
				}, {
					"id": 1007,
					"name": "车队长",
					"intro": null,
					"checked":false
				}, {
					"id": 1008,
					"name": "仓管",
					"intro": null,
					"checked":false
				}, {
					"id": 1009,
					"name": "工地施工员",
					"intro": null,
					"checked":false
					
				}, {
					"id": 1010,
					"name": "外租伙伴",
					"intro": null,
					"checked":false
				}, {
					"id": 1011,
					"name": "兼职业务",
					"intro": null,
					"checked":false
				}] //角色列表
			}
		},
		
		methods: {
			change(e) {
				console.log(e.detail.value)
				if (e.detail.value) {
					this.formData.status = 1
				} else {
					this.formData.status = -1
				}
			},
			upLoadAvatar() {
				const that = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						let imgPath = res.tempFilePaths[0];
						// 压缩图片
						uni.compressImage({
							src: imgPath,
							quality: 10,
							success: ress => {
								let img = ress.tempFilePath;
								let Key = 'dispatching/wx/upload/avatar/'+imgPath.substr(imgPath.lastIndexOf('/') + 1);
								uploadImg(Key,img).then(data => {
									uni.showToast({
										title:'上传成功',
										duration:1200
									});
									that.avatarUrl = data;
								}).catch(err => {
									uni.showToast({
										title:err,
										icon:'none',
										duration:1500
									})
								});
							}
						})
					}
				});
			},
			// 保存
			nextHandle() {
				let {
					employeeName,
					employeePhone,
					roleId
				} = this.formData;
				if (employeeName == "") {
					uni.showToast({
						title: "员工姓名不能为空",
						icon: "none",
					});
					return;
				}
				if (!/^1[3456789]\d{9}$/.test(employeePhone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none",
					});
					return;
				}
				if (roleId == "") {
					uni.showToast({
						title: "请选择角色",
						icon: "none",
					});
					return;
				}
				this.id ? this.putAddUser("put") : this.putAddUser("add");
			},
			// 修改、新增 人员信息
			putAddUser(type) {
				let roleLists = this.roleLists,
					{
						employeeName,
						employeePhone,
						roleId,
						status
					} = this.formData;
				let roleName = roleLists.find((item) => {
					if (item.id == roleId) {
						return item;
					}
				}).name;
				const postData = {
					employeeName,
					employeePhone,
					roleName,
					roleId,
					status,
					avatarUrl: this.avatarUrl
				};
				console.log(postData);
				if (type == "add") {
					https(urlList.putAddUserInfo, "POST", postData, "正在新增...")
						.then((data) => {
							uni.showToast({
								title: "新增成功",
								icon: "none",
							});
							uni.navigateBack();
						})
						.catch((err) => {
							uni.showToast({
								title: err,
								icon: "none",
								duration: 1500,
							});
						});
				} else {
					postData.id = this.id;
					https(urlList.putAddUserInfo, "PUT", postData, "正在修改...").then((data) => {
						const that = this;
						uni.showToast({
							title: "修改成功",
							icon: "none",
							duration: 1500,
						});
						setTimeout(() => {
							//          var pages = getCurrentPages();
							// // pages.splice(pages.length-1,1)
							//          var prevPage = pages[pages.length - 2]; //上一个页面
							//          var prevPage_index;
							//          prevPage.$vm._data.peopleList.forEach((item, index) => {
							//            if (item.id == that.id) {
							//              prevPage_index = index;
							//            }
							//          });
							//          prevPage.$vm._data.peopleList[prevPage_index].employeeName =
							//            employeeName;
							//          prevPage.$vm._data.peopleList[prevPage_index].employeePhone =
							//            employeePhone;
							//          prevPage.$vm._data.peopleList[prevPage_index].roleName = roleName;
							//          prevPage.$vm._data.peopleList[prevPage_index].roleId = roleId;
							//          prevPage.$vm._data.peopleList[prevPage_index].status = status;
							//          // prevPage.$vm._data.peopleList = that.selectList;
							uni.navigateBack(); //返回上一页面
						}, 1500);
					}).catch((err) => {
						uni.showToast({
							title: err,
							icon: "none",
							duration: 1500,
						});
					});
				}
			},
			// 选择角色
			selectRole(e) {
				const val = e.detail.value;
				this.formData.roleId = val;
			},
			// 获取人员信息
			getUserInfoId() {
				const _that = this;
				https(urlList.getemployeesInfo + "/" + _that.id, "GET", "", "").then((data) => {
					console.log("角色ID", data);
					let {
						employeeName,
						employeePhone,
						roleId,
						status,
						avatarUrl
					} = data.data;
					_that.formData = {
						employeeName,
						employeePhone,
						roleId,
						status,
					};
					this.avatarUrl = avatarUrl
					let roles = _that.roleLists;
					roles = roles.map((item) => {
						item.checked = item.id == _that.formData.roleId?true:false;
						return item;
					});
					_that.roleLists = roles;
				}).catch((err) => {
					uni.showToast({
						title: err,
						icon: "none",
						duration: 1500,
					});
				});
			},

			// 获取角色列表
			getRoleList() {
				const _that = this;
				https(urlList.getRoleList, "GET", "", "").then((data) => {
					console.log('角色列表', data)
					let roles = data.data;
					let roleList = _that.roleLists;
					if (_that.id) {
						roles = roles.map((item) => {
							if (item.id == _that.formData.roleId) {
								item.checked = true;
							}
							return item;
						});
						_that.roleLists = roles;
					} else {
						roles[0].checked = true;
						_that.roleLists = roles;
						_that.formData.roleId = roles[0].id;
					}
				}).catch((err) => {
					uni.showToast({
						title: err,
						icon: "none",
						duration: 1500,
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	#warp {
		width: 100%;
		height: 92vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		.t_login_passList {
			width: 100%;
			padding: 10rpx 20rpx;
			border-bottom: 1rpx solid #e6e6e6;
			display: flex;
			flex-direction: row;
			align-items: center;

			.input_icon {
				letter-spacing: 20rpx;
				// border: 1px solid red;
				margin-top: 5rpx;
				display: flex;
				align-items: center;
				padding-left: 10rpx;
			}

			.input_img {
				width: 400rpx;
				display: flex;

				// justify-content: flex-end;
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.input_css {
				width: 400rpx;
				height: 70rpx;
			}

			.input_css2 {
				width: 400rpx;
			}

			.input_radio {
				display: flex;
				flex-direction: column;

				.radio_list {
					margin-bottom: 20rpx;
				}
			}
		}

		.t_login_passList1 {
			width: 100%;
			padding: 10rpx 20rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.input_icon {
				letter-spacing: 20rpx;
				// border: 1px solid red;
				margin-top: 5rpx;
				display: inline-block;
				align-items: center;
				padding-left: 10rpx;
			}

			.input_css {
				display: inline-block;
				height: 70rpx;
				color: #aeaeae;
			}

			.input_css2 {
				width: 400rpx;
				margin-left: 150rpx;
			}

			.input_radio {
				display: flex;
				flex-direction: column;

				.radio_list {
					margin-bottom: 20rpx;
				}
			}
		}

		.no_center {
			align-items: flex-start;
		}
	}

	.btn_css {
		height: 8vh;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			width: 650rpx;
			margin-left: 50rpx;
			margin-top: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #1b64f8ff;
			color: white;
			margin-bottom: 48rpx;
		}
	}
</style>