<template>
	<view class="listadd">
		<view class="listadd-header">
			<view class="listadd-header-text">
				<view class="listadd-header-text-neishi">
					<view class="listadd-header-text-icon" @click="topgi">
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
						</image>
					</view>
				</view>
				<view class="listadd-header-text-title">
					{{can==""?'添加员工':'编辑员工'}}
				</view>
			</view>
		</view>
		<view class="listadd-list" style="margin-top: 206rpx;">
			<view class="listadd-list-let">
				姓名
			</view>
			<view class="listadd-list-rig">
				<input class="uni-input" style="text-align:right" focus="true" v-model="from.name" placeholder="请填写"
					maxlength="6" placeholder-style="color:#333333;font-size:30rpx;" />
			</view>
		</view>
		<view class="listadd-list">
			<view class="listadd-list-let">
				部门
			</view>
			<view class="listadd-list-rig">
				<picker class="#1F7CFF" @change="bindPickerChange" :value="index" :range="array">
					<!-- &&array[index]=="请选择" -->
					<view class="uni-input">{{departmentName}}</view>
				</picker>
			</view>
		</view>
		<view class="listadd-list">
			<view class="listadd-list-let">
				手机号
			</view>
			<view class="listadd-list-rig">
				<input class="uni-input" placeholder="请填写" maxlength="11" style="text-align:right"
					placeholder-style="color:#333333;font-size:30rpx;" v-model="from.phone" @input="inputphone" />
			</view>
		</view>
		<view class="listadd-buxiugai">
			手机号为员工登录账号，不可修改
		</view>
		<view class="listadd-annkiu" @click="addto">
			{{can==""?'确认添加':'保存'}}
		</view>
	</view>
</template>

<script>
	import {
		storeStafAdd,
		queryStoreBranchBymerid,
		updateStoreStaff
	} from '@/commit/api.js'
	export default {
		data() {
			return {
				can: "",
				merId: '',
				showPassword: true,
				array: ["请选择"],
				arrayid: ["1"],
				index: 0,
				from: {
					name: "", //员工名称
					department: "", //部门id
					phone: "", //手机号
					merId: "", //门店id
					// pawss: "" //密码
				},
				departmentName: "请选择",
				id: "",
			}
		},
		onLoad(e) {
			let selectmerchant = uni.getStorageSync('selectmerchant')
			this.merId = selectmerchant.merId
			this.from.merId = selectmerchant.merId
			this.queryStoreBranchBymerid()
			this.can = e.can
			if (e.can == 1) {
				console.log(e.department)
				this.id = e.id
				this.from.name = e.name
				this.from.phone = e.phone
				this.from.department = e.department
				this.departmentName = e.departmentName
				console.log(this.departmentName)
			}
		},
		methods: {
			inputphone(e) {
				const o = e.target;
				const inputRule = /[^\d]/g
				this.$nextTick(function() {
					this.from.phone = o.value.replace(inputRule, '');
				})
			},
			inputpawss(e) {
				const o = e.target;
				const inputRule = /[^\w_]/g
				this.$nextTick(function() {
					this.from.pawss = o.value.replace(inputRule, '');
				})
			},
			// 根据门店查询所有部门
			queryStoreBranchBymerid() {
				queryStoreBranchBymerid({
					merId: this.merId
				}).then(res => {
					if (res.data.status == 200) {
						let indexS = 0
						res.data.data.systemRoleList.forEach((res => {
							if (this.from.department == res.id) {
								this.index = indexS + 1
							}
							this.array.push(res.branch)
							this.arrayid.push(res.id)
							indexS++
						}))
					}
				}, fail => {
					console.log(fail)
				})
			},

			//添加员工
			addto() {
				var mobileReg = /^1[3456789]\d{9}$/;
				if (this.from.name == "") {
					uni.showToast({
						title: "请填写姓名",
						icon: 'none'
					})
					console.log(this.arrayid)
				} else if (this.from.department == "" || this.from.department == 1) {
					uni.showToast({
						title: "请选择部门",
						icon: 'none'
					})
				} else if (this.from.phone == "") {
					uni.showToast({
						title: "请填写手机号",
						icon: 'none'
					})
				} else if (!mobileReg.test(this.from.phone)) {
					uni.showToast({
						title: "手机号格式有误",
						icon: "none"
					})
				} else {
					if (this.can == undefined) {
						storeStafAdd(this.from).then(res => {
							if (res.data.status == 200) {
								uni.showToast({
									title: res.data.message,
									icon: 'success',
								})
								setTimeout(function() {
									uni.redirectTo({
										url: "/shop/employee/list"
									})
								}, 600);
							}

						}, fail => {
							console.log(fail)
						})
					} else if (this.can == 1) {
						// 修改门店员工信息
						let department = this.from.department
						let name = this.from.name
						let phone = this.from.phone
						let id = this.id
						updateStoreStaff({
							department: department,
							name: name,
							phone: phone,
							id: id
						}).then(res => {
							if (res.data.status == 200) {
								uni.showToast({
									title: res.data.message,
									icon: 'success',
								})
								setTimeout(function() {
									uni.redirectTo({
										url: "/shop/employee/list"
									})
								}, 600);
							}
						}, fail => {
							console.log(fail)
						})
					}

				}
			},
			bindPickerChange: function(e) {
				this.from.department = this.arrayid[e.detail.value]

				if (this.can == 1) {
					if (this.from.department == 1) {
						this.departmentName = "请选择"
					}
				}
				this.departmentName = this.array[e.detail.value]
				this.index = e.detail.value
			},
			showPwd: function() {
				this.showPassword = !this.showPassword;
			},
			topgi() {
				uni.redirectTo({
					url: './list'
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.listadd {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.listadd-header {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 111;
			width: 100%;
			height: 176rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: center;

			.listadd-header-text {
				width: 686rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				margin-top: 107rpx;
				align-items: center;

				.listadd-header-text-neishi {
					width: 45rpx;
					height: 45rpx;
					margin-right: 17rpx;

					.listadd-header-text-icon {
						width: 36rpx;
						height: 36rpx;
						margin-top: 2rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.listadd-list {
			width: 686rpx;
			height: 118rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 26rpx 0 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;

			.listadd-list-let {
				margin-left: 32rpx;
			}

			.listadd-list-rig {
				margin-right: 32rpx;

				input {
					width: 200rpx;
					// color: #B6B6B6;
				}
			}
		}

		.listadd-buxiugai {
			width: 686rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #B6B6B6;
			margin-top: 26rpx;
		}

		.listadd-annkiu {
			width: 686rpx;
			height: 98rpx;
			background: #1F7CFF;
			border-radius: 8rpx;
			position: fixed;
			bottom: 94rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 98rpx;
		}
	}
</style>
