<template>
  <view class="filebox">
	  <!-- 老师有 -->
	  <view class="stutop">
		  <view class="search flexc">
		  	<image :src="searchimg" class="img"></image>
		  	<input placeholder="输入教职工姓名进行搜索" v-model="name" class="flex1 input"/>
		  	<view class="btn" @click="getSearch">搜索</view>
		  </view>
		  <view class="stutoa flexcj mt12" v-if="choseroles=='school'">
			 <!-- <view class="flex1">
				  <picker :value="className" range-key="className" :range="classlist"  @change="bindDateChange" >
				  	<view class="flexc">
				  		<view class=" f15 co16 f500" >{{className||'请选择班级'}}</view>
				  		<image :src="upimg"></image>
				  	</view>
				  </picker>
			  </view> -->
			  <view class="stutoar flex0">
				  本校教职工共有<text>{{total}}</text>名
			  </view>
		  </view>
	  </view>  
	  <!-- 列表 -->
	  <view class="flex1 workbox">
	  	<view class="workboxr">
	  		<scroll-view scroll-y class="scroll-view"  lower-threshold="40" @scrolltolower="reach_btn">
	  			<da-list :datalist="list" :wtdt="wtdt" datype="2" @getDetail="getDetail"></da-list>
	  			<view style="height: 100rpx;"></view>
	  		</scroll-view>
	  	</view>	
	  </view>
	  <view class="addbtn" @click="getAdd" v-if="checkPermi(['teacher:info:add'])">添加教职工档案</view>
  </view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import daList from "@/mine/components/list/list.vue"
	import {getteaListFn} from "@/api/mine/files.js"
  export default {
	data(){
		return{
			enter:require("@/mine/static/score/enter.png"),
			searchimg: require("@/mine/static/score/search.png"),
			upimg:require("@/mine/static/score/up.png"),
			classlist:[],
			list:[],
			pageSize: 10,
			pageNum: 1,
			reachflag:true,
			wtdt:'',
			total:0,
			className:'',
			name:'',
			choseroles:''
		}
	},
	components:{
		daList
	},
	onUnload(){
		uni.$off('refreshdalist')
	},
	onLoad: function() {
		uni.$on('refreshdalist',(e) => {
			this.reachflag=true;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
		})
		this.choseroles=this.$store.state.user.choseroles
		this.getDataFn();
	},
	methods:{
		checkPermi,checkRole,
		reach_btn() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		getAdd(){
			this.$tab.navigateTo('/mine/pages/files/addteacher?type=add')
		},
		init(){
			// 职称
			getDictionaryFn('political_outlook').then(res=>{
				if(res.code==200){
					this.outlook = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getDataFn(a){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
			}
			if(this.name){
				params.name=this.name
			}
			// if(this.classId){
			// 	params.classId=this.classId
			// }
			params['params[role]']=this.$store.state.user.choseroles
			getteaListFn(params).then(res=>{
				if(res.code==200){
					this.total=res.total;
					var data=res.rows;
					data.forEach((ite)=>{
						if(ite.identificationPhoto&&ite.identificationPhoto.length>0){
							var narr=ite.identificationPhoto.split(',')
							ite.identificationPhoto=narr[0]
						}
					})
					if (res.rows.length < this.pageSize) {
						this.reachflag = false
						this.wtdt = '到底了~';
					} else {
						var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
						if (num < res.total) {
							this.reachflag = true
							this.wtdt = '上拉加载更多'
						} else {
							this.reachflag = false
							this.wtdt = '到底了~';
						}
					}
					if (this.pageNum == 1) {
						this.list = data;
					} else {
						this.list = this.list.concat(data)
					}
				}else{
					this.$toast(res.msg)
				}
			})
		},
		bindDateChange(e){
			var idx=e.detail.value;
			this.classId=this.classlist[idx].classId;
			this.className=this.classlist[idx].className;
			this.pageNum=1;
			this.list=[];
			this.reachflag=true;
			this.getDataFn()
		},
		getSearch(){
			this.pageNum=1;
			this.list=[];
			this.reachflag=true;
			this.getDataFn()
		},
		getDetail(id){
			this.$tab.navigateTo('/mine/pages/files/teacherdetail?id='+id)
		}
	},
	
  }
</script>

<style lang="scss" scoped>
.filebox{height: 100vh;background-color: #FFFFFF;display: flex;flex-direction: column;overflow: hidden;}
.stutop{
	padding: 28rpx 38rpx 2rpx;background-color: #FFFFFF;flex: 0 0 auto;
}
// 防溺水 心理健康， 记录体重每次信息 
.stutoa{font-size: 28rpx;font-weight: bold;color: #666666;
	text{color: #4775EA;padding: 0 8rpx;}
	image{width: 22rpx;height: 12rpx;margin-left: 24rpx;}
	.stutoap{flex: 1;padding: 16rpx 0;}
}
.stutoar{
	text{color: #4775EA;padding: 0 8rpx;}
}
.search{height: 80rpx;background: #F2F5FB;border-radius: 40rpx;padding-left: 40rpx;
	.img{width: 30rpx;height: 32rpx;flex:0 0 auto;margin-right: 30rpx;}
	.btn{width: 120rpx;height: 80rpx;background: #1f57e6;border-radius: 40rpx;font-size: 30rpx;font-weight: 500;
color: #FFFFFF;text-align: center;line-height: 80rpx;flex:0 0 auto}
	.input{font-size: 30rpx;color: #161616;line-height: 80rpx;}
}

.workbox{overflow: auto;
	.workboxr{height: 100%;display: flex;}
	.scroll-view{width: 100%;height: 100%;box-sizing: border-box;}
}

.addbtn{width:100%;
height: 100rpx;
background: #1f57e6;position: fixed;left: 0;right: 0;bottom: 0;z-index: 1;font-size: 34rpx;font-weight: 500;
color: #FFFFFF;display: flex;align-items: center;justify-content: center;}
</style>