<template>
	<view>
		<view class="select_warp">
			<view class="topbox">
				<view class="tab_list">
					<view 
						class="tab_li"
						v-for="(item,index) in readList"
						:key="index"
						:class="{'tab_li_active': item.id == readIndex}"
						@click="changeTab(item)"
					>{{item.name}}</view>
				</view>
			</view>
			<view class="searchbox">
				<view class="searchtext" @click="toQuery">筛选<view class="iconfont icon-shaixuan"></view></view>
			</view>
			<uni-popup ref="screenpopup" type="top" background-color="#fff">
				<view class="warpbox">
					<scroll-view scroll-y class="scrollbox" style="height:600rpx;background:#fff;" >
						<!--筛选模块  -->
						<view class="screen_content"  @tap.stop.prevent>
							<view class="fir_li">
								<view class="li_label">提交人</view>
								<view class="li_box">
									<view class="form_right" @click="toSelectStaff">
										<view :class="staffObj ? 'valueActive' : '' ">{{staffObj ? staffObj.name : '点击选择'}}</view>
										<view class="iconfont icon-arrows_right"></view>
									</view>
								</view>
							</view>
							<view class="fir_li">
								<view class="li_label">报告类型</view>
								<picker @change="changeWorkType" :value="workIndex" :range="workList">
									<view class="li_box">
										<view class="form_right">
											<view :class="workList[workIndex] ? 'valueActive' : '' ">{{workList[workIndex] ? workList[workIndex] : '点击选择'}}</view>
											<view class="iconfont icon-arrows_right"></view>
										</view>
									</view>
								</picker>
							</view>
							<view class="fir_li">
								<view class="li_label">时间筛选</view>
								<view class="li_box" style="display: flex;">
									<picker @change="changeStartTime" mode="date" :end="end_time"
										style="width:50%;border-right:1rpx solid #CCCCCC">
										<view class="form_right">
											<view style="flex:1;text-align: center;"
												:class="start_time ? 'valueactive' : '' ">
												{{start_time ? start_time : '开始时间'}}</view>
										</view>
									</picker>
									<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
										<view class="form_right">
											<view style="flex:1;text-align: center;"
												:class="end_time ? 'valueactive' : '' ">{{end_time ? end_time : '结束时间'}}
											</view>
										</view>
									</picker>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="button_bottom">
						<view @tap.stop="reset">重置</view>
						<view @tap.stop="sureQuery">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view>
			<view class="work_li" v-for="(item,index) in list" :key="index" @click="jumpDetail(item)">
				<view class="li_key" v-if="item.is_read != 1"></view>
				<view class="li_left">
					<image :src="item.staff.img ? item.staff.img : BASE_IMG_URL+'img/headImg.png'" class="li_img" mode=""></image>
					<view class="">
						<view class="li_name">{{item.staff.name}} <text style="font-size:24rpx;color:#999;margin-left:15rpx">{{item.staff.post?item.staff.post:''}}</text> </view>
						<view class="li_post">{{item.createtime}}</view>
					</view>
				</view>
				<view class="li_right">
					<view class="tatus firbg" v-if="item.type == '日报'">日报</view>
					<view class="tatus secbg" v-if="item.type == '周报'">周报</view>
					<view class="tatus thrbg" v-if="item.type == '月报'">月报</view>
					<view class="tatus forbg" v-if="item.type == '季报'">季报</view>
					<view class="tatus fivbg" v-if="item.type == '年报'">年报</view>
				</view>
			</view>
			<u-loadmore v-if="list.length == 0" status="nomore"></u-loadmore>
		</view>
		
		<!-- 创建用户图标 -->
		<view class="icon_creat" @click="createWork">
			<image :src="BASE_IMG_URL+'1.png'"></image>
		</view>
		
		<select-staff ref="staffChild" @sureStaff="sureStaff"></select-staff>
	</view>
</template>

<script>
	import { netWorkreportList } from '@/api/index.js'
	import { netSelect, netSearchStaffList } from '@/api/kehu.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	import selectStaff from '@/components/selectStaff.vue'
	
	export default{
		components:{
			selectStaff
		},
		data(){
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				list:[],
				page:1,
				totalPage:1,
				workList:[],
				workIndex:null,
				readList:[{id:0,name:'全部'},{id:1,name:'已读'},{id:2,name:'未读'}],
				readIndex:0,
				staffObj:null,  //提交人
				permission:{},   //权限
				start_time:'',
				end_time:'',
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getList()
			//获取筛选条件
			this.getSelect()
			//获取 归属人
			this.getPeopel()
			
			this.permission = getApp().globalData.permission
		},
		onReachBottom() {
			if(this.page >= this.totalPage){
				return
			}
			this.page ++
			this.getList()
		},
		methods:{
			toSelectStaff() {
				this.$refs.staffChild.init()
			},
			sureStaff(obj) {
				this.staffObj = obj
			},
			toQuery() {
				this.$refs.screenpopup.open()
			},
			changeStartTime(e) {
				this.start_time = e.detail.value
				if(!this.end_time){
					this.end_time = e.detail.value
				}
			},
			changeEndTime(e) {
				this.end_time = e.detail.value
				if(!this.start_time){
					this.start_time = e.detail.value
				}
			},
			init(){
				this.page = 1
				this.list = []
				setTimeout(()=>{
					this.getList()
				},200)
			},
			changeTab(item) {
				this.readIndex = item.id
				this.init()
			},
			//获取归属人
			getPeopel() {
				netSearchStaffList().then(res=>{
					this.typeList = res.data
				})
			},
			//获取筛选条件
			getSelect() {
				netSelect().then(res=>{
					this.workList = res.data['报告类型']
				})
			},
			getList() {
				let params = {
					page:this.page,
					is_read:this.readIndex,
					staff_id:this.staffObj?this.staffObj.id:'',
					type:(this.workList && this.workList[this.workIndex])?this.workList[this.workIndex]:'',
					times:(this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
				}
				netWorkreportList(params).then(res=>{
					this.list = this.list.concat(res.data.data)
					this.totalPage = res.data.last_page
				})
			},
			jumpDetail(item) {
				uni.navigateTo({
					url:'/pagesB/workreport/workDetail?id='+item.id
				})
			},
			//修改 报告状态
			changeRead(e) {
				this.readIndex = e.detail.value
			},
			changeWorkType(e) {
				this.workIndex = e.detail.value
			},
			//重置
			reset() {
				this.readIndex = null
				this.workIndex = null
				this.staffObj = null
				this.start_time = ''
				this.end_time = ''
			},
			sureQuery() {
				this.$refs.screenpopup.close()
				this.init()
			},
			//创建  工作报告
			createWork() {
				uni.navigateTo({
					url:'/pagesB/workreport/addReports'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topbox{
		width:750rpx;
		height:80rpx;
		background:#fff;
		.tab_list{
			padding:0 24rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.tab_li{
				width:120rpx;
				font-size:30rpx;
				color:#666;
				height:80rpx;
				margin-right:40rpx;
				line-height: 80rpx;
				flex-shrink: 0;
				text-align: center;
			}
			.tab_li_active{
				color:#000;
				position: relative;
				&::after{
					content:'';
					width:60rpx;
					height:6rpx;
					background:$uni-text-color;
					position: absolute;
					bottom:0;
					left:50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 100rpx;
		right: 100rpx;
	
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	.firbg{
		background:#AF99FE;
	}
	.secbg{
		background:#FBB545;
	}
	.thrbg{
		background:#4AD49D;
	}
	.forbg{
		background:#FF6E7F;
	}
	.fivbg{
		background:#54B1F7;
	}
	
	.valueactive{
		color:#333;
	}
	.rediowarp{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		label{
			display: flex;
			justify-content: flex-start;
			margin-right:24rpx;
			align-items: center;
		}
		radio{
			transform: scale(0.7);
		}
	}
	.work_li{
		width:702rpx;
		background:#fff;
		border-radius: 10rpx;
		padding:30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:0 auto 24rpx;
		position: relative;
		.li_key{
			position: absolute;
			right:5rpx;
			top:5rpx;
			width:20rpx;
			height:20rpx;
			border-radius: 50%;
			background:red;
		}
		.li_left{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size:26rpx;
			color:#333;
			.li_img{
				width:80rpx;
				height:80rpx;
				border-radius: 50%;
				margin-right:15rpx;
			}
			.li_name{
				font-size:26rpx;
				color:#333;
				margin-bottom:15rpx;
			}
		}
		.li_right{
			.tatus{
				font-size:24rpx;
				color:#fff;
				width:110rpx;
				height:55rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 55rpx;
			}
		}
	}
	.select_warp{
		z-index: 9;
	}
	.searchbox{
		display: flex;
		justify-content: flex-end;
		margin:24rpx;
		.searchtext{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size:24rpx;
			color:$uni-text-color;
			padding:5rpx 23rpx;
			background:#fff;
			border-radius: 5rpx;
			box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
		}
	}
	.warpbox{
		width:750rpx;
		z-index: 2;
		background:rgba(0,0,0,0.7);
		.screen_content {
			width:702rpx;
			z-index: 2;
			border-top:1rpx solid #CCCCCC;
			background-color: #fff;
			padding:24rpx;
			.fir_li{
				margin-bottom:20rpx;
				.li_label{
					font-size:28rpx;
					color:#333333;
					margin-bottom:15rpx;
				}
				.li_box{
					border-radius: 15rpx;
					border:1rpx solid #CCCCCC;
					height:60rpx;
					padding:0 35rpx;
					line-height: 60rpx;
				}
				.form_right {
					display: flex;
					color: #999;
					justify-content: space-between;
					image {
						width: 40rpx;
						height: 40rpx;
						margin: 28rpx 5rpx 0 0;
					}
					
				}
			}
		}
		.button_bottom {
			display: flex;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
			:first-child {
				flex: 1;
				color: $uni-text-color;
				border-top:1rpx solid #CCCCCC;
			}
			:last-child {
				flex: 1;
				background-color: $uni-text-color;
				color: #fff;
			}
		}
	}
</style>
