<template>
	<view class="container">
		<view class="md-scroll">
			<scroll-view
			scroll-y 
			style="height: calc(100vh - var(--status-bar-height) - 50px);width: 100%;overflow: auto;"  
			@scrolltolower="onreachBottom">
				<view class="personInfo" v-for="(item,index) in listData" :key="item.id">
					 <view class="personItem">
					 	<view class="personItemLeft">
					 		<view class="personName">
					 			<text style="font-weight: bold;">{{item.name}}</text> 
					 			<text class="manger" v-show="item.isManager == 1">
					 			{{item.isManager | isManagerFilter}}
					 			</text>
					 		</view>	
					 	</view>
					 	<view class="personItemLeft">
					 		<text class="personName">{{ item.sex | sexFilter }}</text>
							<!-- <text :class="'sex_'+item.sex">{{item.sex?'♂':'♀'}}</text> -->
					 	</view>	
					 	<view class="personItemLeft">
					 		<text class="personName">{{item.mobile}}</text>
					 	</view>
					 	<view class="personItemRight">
					 		<text class="personName">{{item.workFlag == 1 ? '在职' : '离职'}}</text>
					 	</view>
					 </view>
					 <view class="personItem">
					 	<view class="personItemLeft">
					 		<text class="personVal">级别：{{filterpayType(item.employeeLevel) || '-'}}</text>
					 	</view>
					 	<view class="personItemRight">
					 		<text class="personVal">系统使用：{{item.userType == 1 ? '启用' : '禁用'}}</text>
					 	</view>	
					 </view>
					 <view class="personItem">
					 	<view class="personItemLeft">
					 		<text class="personVal">角色：{{item.roleNames}}</text>
					 	</view>
					 </view>
					 <view class="icon-group">
						 <view v-if="item.userType == 1 && $hasPermissions('M_employee_mobile')" style="color:#55aaff;"  @click="resetPwd(item,index)">
						 	 <uni-font-icons size="16" type="icon-mima" color="#55aaff"></uni-font-icons> 重置密码
						 </view>
						<view v-if="item.isManager != 1 && $hasPermissions('M_empOroleDel_mobile')" style="color:#ff0000;"  @click="delItem(item,index)">
							 <uni-font-icons size="16" type="icon-shanchu" color="#ff0000"></uni-font-icons> 删除
						</view>
						<view style="color:#00aa00;" v-if="$hasPermissions('M_employee_mobile')" @click="editItem(item)">
							<uni-font-icons size="16" type="icon-editor" color="#00aa00"></uni-font-icons> 编辑
						</view>
					 </view>
			   </view>
				<u-empty :text="noDataText" img-width="120" v-if="listData.length==0 && status!='loading'" mode="list"></u-empty>
				<view style="padding: 20upx;">
					 <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
				</view>
			</scroll-view>
	</view>
	</view>
</template>

<script>
	import {searchEmployee, delEmployee, resetPSD} from '@/api/employee'
	import { getLookUpDatas } from '@/api/data'
	import { clzConfirm } from '@/libs/tools.js'
	export default{
		data(){
			return{
				status: 'loadmore',
				noDataText: '暂无数据',
				listData:[],
				employeeLevel: "",	//员工级别
				queryWord: "",
				userType: "",		//权限类别
				workFlag: "",		//在职状态
				pageNo:1,
				pageSize:20,
				content: '',
				title:'',
				nowId: '',	// 当前员工 id
				total:''  //获取数据总条数
			}
		},
		onShow(){
			this.$store.state.vuex_nowStaffData = ''
			this.pageNo = 1
			this.employeeJBList()
		},
		// 判断员工身份权限
		filters:{
			sexFilter(sexFilterVal){
				if(sexFilterVal == 1){
					return '男'
				}
				if(sexFilterVal == 0){
					return '女'
				}
			},
			isManagerFilter(isManagerFilterVal){
				if(isManagerFilterVal == 1){
					return '负责人'
				}
			}
		},
		methods:{
			// 员工信息列表
			getPersonInfoList(){
				let _this=this
				const data={
					employeeLevel:this.employeeLevel,
					queryWord:this.queryWord,
					userType: this.userType,	//权限类别
					workFlag:this.workFlag,
					pageNo:this.pageNo,
					pageSize:this.pageSize
				}
				this.status = "loading"
				searchEmployee(data).then(res=>{
					if(res.status == 200){
						// 将返回的每页数据拼接
						if(_this.pageNo>1){
							_this.listData = _this.listData.concat(res.data.list || [])
						}else{
							_this.listData = res.data.list || []
						}
						_this.total = res.data.count || 0
					}else {
						_this.listData = []
						_this.total = 0
						_this.noDataText = res.message
				   }
				   _this.status = "loadmore"
				})
			},
			// 下一页
			onreachBottom() {
				console.log('next page')
				if(this.listData.length < this.total){
					this.pageNo += 1
					this.getPersonInfoList()
				}else{
					this.status = "nomore"
				}
			},
			// 获取员工级别
			employeeJBList () {
				let _this = this
				getLookUpDatas({
					type: 'EMPLOYEE_LEVEL'
				}).then(result => {
					if (result && result.status + '' === '200') {
						_this.employeeList= result.data
						_this.getPersonInfoList()
					}
				})
			},
			filterpayType (val) {
				var _value = ''
			    for (let i = 0; i < this.employeeList.length; i++) {
					if (val == this.employeeList[i].code) {
						_value = this.employeeList[i].dispName
						break
					}
			    }
				return _value
			},
			// 页面返回
			goBack(){
				console.log(11)
				uni.navigateBack()
			},
			// 添加员工
			add(){
				uni.navigateTo({
					url:'/pages/personInfo/addPersonInfo'
				})
			},
			// 编辑修改
			editItem(item){
				// 将当前员工的信息赋值给store中声明保存员工信息的vuex_nowStaffData
				this.$store.state.vuex_nowStaffData = item
				uni.navigateTo({
				 	url:'/pages/personInfo/addPersonInfo'
				})
			},
			// 删除角色
			delItem(item,index){
				let _this = this
				clzConfirm({
					title: "提示",
					content: "数据删除后无法恢复, 确认删除吗？",
					showCancel: true,
					success: function(e){
						if(e.confirm||e.index == 0){
							// 删除数据
							delEmployee({id: item.id}).then(res=>{
								if(res.status == 200){
									uni.showToast({
										icon:'none',
										title:res.message
									})
									// 刷新列表
									_this.listData.splice(index,1)
									_this.total = _this.total -1
								}else{
									uni.showToast({icon: 'none', title: res.message})
								}
							})
						}
					},
				})
			},
			// 重置密码
			resetPwd(item,index){
				resetPSD({
				  id: item.id
				}).then(res => {
				  if (res.status == 200) {
					uni.showToast({icon: 'none', title: '密码重置成功'})
				  }else{
					  uni.showToast({icon: 'none', title: res.message})
				  }
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.container{
		padding-top: var(--status-bar-height);
		height: calc(100vh - var(--status-bar-height));
		display: flex;
		flex-direction: column;
		.md-scroll{
			flex-grow: 1;
			overflow: auto;
		}
		.personInfo{
			margin:30rpx;
			border-radius: 6upx;
			box-shadow: 1px 1px 3px #EEEEEE;
			background-color: #FFFFFF;
			.personItem{
				display: flex;
				align-items: center;
				padding:  20rpx 30rpx;
				border-bottom: 1px dashed #f3f3f3;
				.sex_1,.sex_0{
					margin-right: 6upx;
					font-size: 20upx;
					width: 30upx;
					height: 30upx;
					line-height: 30upx;
					display: block;
					text-align: center;
					border-radius: 30upx;
					color: #FFFFFF;
				}
				.sex_1{
					background: #00aaff;
				}
				.sex_0{
					background: #FA3534;
				}
				.personItemLeft{
					text-align: left;
					display: flex;
					align-items: center;
					flex-grow: 1;
				}
				.personItemRight{
					text-align: right;
				}
				.personName{
					display: flex;
					align-items: center;
					.manger{
						background-color: #57A3F3;
						border-radius: 10px; 
						color: #fff;
						text-align: center; 
						margin-left: 15rpx;
						padding:5rpx 15rpx;
						font-size: 20upx;
					}
				}
				.personVal{
					color: #999;
				}
			}
			.icon-group{
				padding:  20rpx 30rpx;
				display: flex;
				flex-direction: row-reverse;
				> view{
					margin-left: 40upx;
				}
			}
			.uni-icons{
				margin-right: 6upx;
			}
		}
		
	}
</style>
