<template>
	<view class="page-content my-bg">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">员工管理</block>
		</cu-custom>
		<view class="margin radius">
			<view class="bg-img margin-bottom user-info-container radius flex align-center" :style="'background-image: url('+mainURL+'login-bg.png)'">
				<view class="placeholder">
					<view class="cu-list no-border menu-avatar ">
						<view class="cu-item ">
							<view class="cu-avatar round lg" :style="'background-image: url('+mainURL+'default-avator.png)'"></view>
							<view class="content">
								<view class="text-white">{{userInfo.userName}}</view>
								<view class="text-white flex" @tap="callStaff(userInfo.phone)">
									<view class="text-cut text-df">
										<text class="cuIcon-phone text-white margin-right-xs"></text>
										<text>{{userInfo.phone}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="user-info">
					<view class="cu-list no-border menu-avatar ">
						<view class="cu-item no-border">
							<view class="cu-avatar round lg" :style="'background-image: url('+mainURL+'default-avator.png)'"></view>
							<view class="content">
								<view class="text-white">{{userInfo.userName}}</view>
								<view class="text-white flex" @tap="callStaff(userInfo.phone)">
									<view class="text-cut text-df">
										<text class="cuIcon-phone text-white margin-right-xs"></text>
										<text>{{userInfo.phone}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<form class="margin-top-lg ">
				<view class="cu-form-group radius text-right">
					<view class="title">权限设置</view>
					<view class>请选择以下权限</view>
				</view>
				<view class=" padding bg-white ">
					<checkbox-group @change="checkboxChange" class="flex flex-wrap justify-between">
						<view class="basis-sm margin-bottom-sm" v-for="(item,index) in checkbox" :key="index">
							<checkbox @tap="item.checked=!item.checked" class="round red" :class="item.checked?'checked':''" :checked="item.checked? true:false"
							 :value="item.value"></checkbox>
							<text class="padding-left-xs">{{item.name}}</text>
						</view>
					</checkbox-group>
				</view>
			</form>

		</view>
		<view class="margin-left margin-right padding-lg bottom-bg">
			<button class="bg-main-oil round margin-bottom" @tap="saveInfo">保存</button>
			<button class="oil-main-btn-color text-white round" @tap="deleteUser">删除该员工</button>
		</view>
	</view>
</template>

<script>
	import StaffItem from '@/packageStaff/components/staff-item.vue'
	import staffApi from '@/packageStaff/api/staff.js'
	import oliSiteApi from '@/api/oli-site.js'
	import oliUserApi from '@/api/oli-user.js'
	export default {
		components: {
			StaffItem,
		},
		onLoad(option) {
			// console.log(JSON.parse(option.staff))
			this.userInfo = JSON.parse(option.staff)
			console.log('这里是onload',this.userInfo )
			this.getAllMenu()
		},
		data() {
			return {
				itmeInfo:{},
				tempUid: uni.getStorageSync('tempUid'),
				checkbox: [],
				userInfo: {},
				mainURL: this.global.mainURL,
				authList: [],
				lastAuthList: [],
				channelId:uni.getStorageSync('channelId'),
				tempUser:uni.getStorageSync('tempUser')
			}
		},
		created() { 
			if (this.tempUid.type === 'edit') {
				setTimeout(() => {
					this.getUserInfo()
				}, 200);
			}
		},
		methods: {
			callStaff(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			calcMenuList() {
				this.checkbox.forEach(item => {
					// console.log(item.checked)
					if (item.checked) {
						this.lastAuthList.push(item.value)
					}
				})
				console.log('计算出来的', this.lastAuthList)
			},
			checkboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			updateUser(data4) {
				console.log(data4)
				oliUserApi.addNewStaff(data4).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: res.msg,
							duration: 3000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
			deleteUser() {
				console.log( this.tempUser.id)
				oliUserApi.removeStaff({
					id: this.tempUser.id,
					channelId:this.channelId
				}).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: res.msg,
							duration: 3000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
			addUser(data4) {
				staffApi.addNewStaff(data4).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: res.msg,
							duration: 3000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
			saveInfo() {
				if (!this.userInfo.userName) {
					uni.showToast({
						title: '请输入员工姓名',
						icon: 'none'
					})
					return false
				}
				if (!this.userInfo.phone) {
					uni.showToast({
						title: '请输入员工手机号',
						icon: 'none'
					})
					return false
				}
				this.calcMenuList()
				const data4 = {
					id: this.userInfo.id,
					userName: this.userInfo.userName,
					phone: this.userInfo.phone,
					roleIds: this.lastAuthList.toString(),
					pushState: 1,
					pushProcedureState: 1
				}
				console.log('未进入判断')
				if (this.tempUid.type === 'add') {
					this.addUser(data4)
					console.log('这里是添加')
				} else if (this.tempUid.type === 'edit') {
					this.updateUser(data4)
					console.log('这里是更新')
				}
			},
			getAllMenu() {
				// staffApi.getOilSiteAllMenu(this.tempUid.id).then(res => {
				// 	if (res.code === 20000) {
				// 		var auths = []
				// 		var temp = res.data
				// 		temp.forEach(item => {
				// 			auths.push({
				// 				value: item.menuId,
				// 				checked: false,
				// 				name: item.menuName
				// 			})
				// 		})
				// 		this.checkbox = auths
				// 	}
				// })
				// console.log(this.userInfo.roleIds)
				// let roleList = this.userInfo.roleIds.split(',')
				// console.log(roleList)
				oliSiteApi.getRoleList().then( (res)=>{ 
					if (res.code === 20000) {
						let _that = this
							var auths = []
							var temp = res.data
							temp.forEach(item => {
								auths.push({
									value: item.id,
									checked: false,
									name: item.roleName
								})
							})
							_that.checkbox = auths
							_that.getUserInfo()
							console.log('这里是chekcbox',_that.checkbox)
						} 
				})
			},
			getUserInfo() {
				console.log('这里是用户信息',this.userInfo)
				let userMenu = this.userInfo.roleIds.split(','),
					checkLisrt = this.checkbox
				userMenu.forEach(item=>{
					console.log(item)
					checkLisrt.forEach(items=>{
						if(item ==  items.value){
							this.$set(items, 'checked', true)
						}
						
						// console.log('二级',items)
					})
					
				})
				console.log( this.checkbox)
				// console.log(userMenu)
				// staffApi.findUserAuthById(this.tempUid.id).then(res => {
				// 	console.log('这里是获取信息',res.data)
				// 	if (res.code === 20000) {
				// 		this.userInfo = res.data
				// 		this.authList = res.data.authList
				// 		if (this.authList && this.authList.length > 0) {
				// 			console.log('已有权限', this.authList)
				// 			this.authList.forEach((auth, index) => {
				// 				this.checkbox.forEach(item => {
				// 					if (auth.menuId === item.value) {
				// 						this.$set(item, 'checked', true)
				// 					}
				// 				})
				// 			})
				// 		}
				// 	}
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	.placeholder {
		min-height: 160rpx;
		min-width: 100%;
	}

	.user-info-container {
		position: relative;
		min-width: 100%;
		color: #fff;

		.cu-item {
			background-color: transparent;
		}

		.user-info {
			position: absolute;
			top: 0;
			z-index: 1;
			min-width: 100%;


		}
	}

	.cu-list.menu-avatar>.cu-item::after {
		border: none;
	}
</style>