<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="">
			<s-tabs 
			        v-model="tabIndex"
			        line-position="center"
			        line-width="100%"
			        line-height="80%"
			        line-color="rgb(232, 245, 255)"
			        line-radius="10"
			        :list="tabs"
					 @change="tabChange"
			/>
		</view>
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="90" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view class="drarch_body">
				<u-search v-model="searchCriteria[tabIndex].title" placeholder="请输入指标名" @custom="searchClick"></u-search>
			</view>
			<uni-row class="demo-uni-row bottom_link">
				<uni-col :span="tabIndex==0?6:8">
					<picker @change="bindPickerChange" :value="searchCriteria[tabIndex].orgId" :range="departmentList" range-key="name">
						<view class="demo-uni-col dark"><text v-if="tabIndex==0">部门</text><text v-if="tabIndex==1">行政组织</text><uni-icons type="bottom"></uni-icons></view>
					</picker>
				</uni-col>
				<uni-col :span="tabIndex==0?6:4" v-if="tabIndex!=0">
					<picker :range="pickerOrgList" range-key="name" :value="searchCriteria[tabIndex].postId" @change="pickerpostclick">
						<view class="demo-uni-col light">岗位<uni-icons type="bottom"></uni-icons></view>
					</picker>
				</uni-col>
				<uni-col :span="tabIndex==0?6:4">
					<picker  mode="date" fields="month" @change="departmenttime" v-model="pickerCurrentTime">
						<view class="demo-uni-col light">时间<uni-icons type="bottom"></uni-icons></view>
					</picker>
				</uni-col>
				<uni-col :span="tabIndex==0?6:4">
					<picker @change="pickerState" :value="searchCriteria[tabIndex].state" :range="stateList" range-key="cateName">
						<view class="demo-uni-col light">状态<uni-icons type="bottom"></uni-icons></view>
					</picker>
				</uni-col>
				<uni-col :span="tabIndex==0?6:4">
					<picker @change="pickerIsTrue" :value="searchCriteria[tabIndex].appIsTrue" :range="handleState" range-key="cateName">
						<view class="demo-uni-col light">审批<uni-icons type="bottom"></uni-icons></view>
					</picker>
				</uni-col>
			</uni-row>
			
			<uni-row class="demo-uni-row row_list bottom_link" v-for="(iteam,index) in goods" >
				<view class="" @click="lookRowList(iteam)">
					<uni-col :span="20">
						<view class="text_body"><text class="text_title">{{iteam.title}}</text>
							<uni-tag class="tag_body" :inverted="true" :text="iteam.result" type="primary" v-if="iteam.statetype==0" />
							<uni-tag class="tag_body" :inverted="true" :text="iteam.result" type="warning" v-if="iteam.statetype==1" />
							<uni-tag class="tag_body" :inverted="true" :text="iteam.result" type="success" v-if="iteam.statetype==2" />
							<uni-tag class="tag_body" :inverted="true" :text="iteam.result"  v-if="iteam.statetype==3" />
							<uni-tag class="tag_body" :inverted="true" :text="iteam.result" type="error" v-if="iteam.statetype==4" />
						</view>
						<view class="text_body">
							<view class="text_body_title" v-if="iteam.cycle==1" >
								统计周期：{{iteam.year}}年
							</view>
							<view class="text_body_title" v-if="iteam.cycle==5">
								统计周期：{{iteam.year}}年-{{iteam.quarter}}季度
							</view>
							<view class="text_body_title" v-if="iteam.cycle==4">
								统计周期：{{iteam.year}}年-{{iteam.month}}月
							</view>
							<view class="text_body_title" v-if="iteam.cycle==6">
								统计周期：{{iteam.year}}年
							</view>
							<view class="text_body_title" v-if="iteam.cycle==0">
								统计周期：{{iteam.year}}年{{iteam.month}}月
							</view>
						</view>
						<view class="text_body"><text class="text_body_title">当前节点：{{iteam.node}}</text></view>
					</uni-col>
					<uni-col :span="4">
						<view class="sign_center">{{iteam.monthdays}}</view>
					</uni-col>
				</view>
			</uni-row>
			
			
			
			
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				headerVerify:{				//基础身份信息
					userkey:"",
					token:"",
					userCont:""
				},
				tabIndex: 0, // tab下标				//分段器下标
				//切换菜单
				tabs: [								//分段器数组
					{
						label:"公司级",
						level:1
					},
					{
						label:"部门级",
						level:2
					}
				],
				//状态
				stateList:[	
					{
						cateName: '全部',
						id: 0,
					},{
						cateName: '起草',
						id: 1,
					},
					{
						cateName: '审批中',
						id: 2,
					},
					{
						cateName: '通过',
						id: 3,
					},
					{
						cateName: '驳回',
						id: 3,
					},
				],
				//审批处理
				handleState:[
					{
						cateName: '全部',
						id: 0,
					},{
						cateName: '已处理',
						id: 1,
					},{
						cateName: '未处理',
						id: 2,
					},
				],
				upOption:{
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				},
				departmentList:[], //部门列表
				pickerOrgList:[],//岗位列表
				searchCriteria:[
					{
						orgId:0,
						postId:0,
						time:"",
						state:0,
						appIsTrue:0,
						title:""
					},
					{
						orgId:0,
						postId:0,
						time:"",
						state:0,
						appIsTrue:0,
						title:""
					}
				],//搜索条件
				pickerCurrentTime:this.getCurrentMonth(),
				goods: [], //列表数据
			};
		},
		onLoad() {
			let _this = this
			//判断Token是否有效
			let systemCache = _this.$commonMethod.getSystemCacheDate('myCache')
			if(!systemCache){
				_this.$commonMethod.JumpUrl('/pages/login/login')
			}else{
				let currentTime = new Date().getTime() - systemCache.tokenTime
				if (currentTime >= 10800000){
					_this.$commonMethod.verifyPowerIsTrue('myCache')
				}
			}
			_this.headerVerify.userkey = systemCache.userKey
			_this.headerVerify.token = systemCache.token
			_this.headerVerify.userCont = systemCache.userInfo
			_this.getDepartmentList()
		},
		methods:{
			//获取年月
			getCurrentMonth () {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth()
				this.yserDate = year
				this.monthDate = month
				month = month > 9 ? month : '0' + month
				return `${year}-${month}`
			},
			// 切换菜单
			tabChange() {
				this.departmentList = [] //部门列表
				this.pickerOrgList = []//岗位列表
				this.initSearch() //置空查询条件
				this.getDepartmentList()
				this.goods = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			upCallback(page) {
				console.log(page,"page---------------->")
				let _this = this
				//联网加载数据
				let curTab = this.tabs[_this.tabIndex]
				console.log(curTab,"page---------------->")
				
				let sendUrl = _this.$commonMethod.localhostUrl+'/api/eval/seeflowlog'
				let sunTargetDate ={
					page:page.num,
					pagesize:page.size,
					state:_this.searchCriteria[_this.tabIndex].state,
					title:_this.searchCriteria[_this.tabIndex].title,
					department:_this.searchCriteria[_this.tabIndex].orgId,
					time:_this.searchCriteria[_this.tabIndex].time,
					isset:_this.searchCriteria[_this.tabIndex].appIsTrue
				}
				if(_this.tabIndex != 0){
					sendUrl = _this.$commonMethod.localhostUrl+'/kpiapi/postweb/getpostflowlog'
					sunTargetDate ={
						page:page.num,
						pagesize:page.size,
						title:_this.searchCriteria[_this.tabIndex].title,
						orgid:_this.searchCriteria[_this.tabIndex].orgId,
						postid:_this.searchCriteria[_this.tabIndex].postId,
						daytime:_this.searchCriteria[_this.tabIndex].time,
						state:_this.searchCriteria[_this.tabIndex].state,
						approvalstate:_this.searchCriteria[_this.tabIndex].appIsTrue,
					}
				}
				//获取定性考核项列表
				uni.request({
					url:sendUrl,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token':_this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:sunTargetDate,
					success: (res) => {
						console.log(res,"返回结果")
						let callBackDate = res.data
						if(callBackDate.code == 0){
							console.log("列表值",callBackDate.data)
							this.mescroll.endSuccess(callBackDate.data.list.length);
							if(page.num == 1) this.goods = [];
							_this.goods=this.goods.concat(callBackDate.data.list)
						}else{
							_this.mescroll.endErr();
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 200,
								position:'bottom',
							})
						}
					},
					fail:function(e){
						_this.mescroll.endErr();
						_this.$refs.uToast.show({
							message: e,
							duration: 200,
							position:'bottom',
						})
					}
				});
				
				
			},
			//获取部门列表
			getDepartmentList(){
				let _this = this
				let sunTargetDate ={
					id:_this.headerVerify.userCont.company,
				}
				let getUrl = _this.$commonMethod.localhostUrl+'/hrapi/org/getcompanydeparment'
				if(_this.tabIndex != 0){
					sunTargetDate ={
						id:_this.headerVerify.userCont.maindeparment,
					}
					getUrl = _this.$commonMethod.localhostUrl+'/hrapi/org/getorgallsun'
				}
				uni.request({
					url:getUrl,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token':_this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:sunTargetDate,
					success: (res) => {
						console.log(res)
						let callBackDate = res.data
						if(callBackDate.code == 0){
							
								let contInfo = {
									id:0,
									name:"全部"
								}
							
							if(_this.tabIndex == 0){
								_this.departmentList.push(contInfo)
							}
							callBackDate.data.forEach((datItem,index)=>{
								contInfo = {
									id:datItem.id,
									name:datItem.name
								}
								_this.departmentList.push(contInfo)
							})
							console.log("_this.departmentList========>",_this.departmentList)
						}else{
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 200,
								position:'bottom',
							})
						}
					},
					fail:function(e){
						_this.$refs.uToast.show({
							message: e,
							duration: 200,
							position:'bottom',
						})
					}
				});
			},
			//部门选择
			bindPickerChange: function(e) {
				this.searchCriteria[this.tabIndex].orgId = this.departmentList[e.detail.value].id
				console.log('picker发送选择改变，携带值为：',this.searchCriteria)
				if(this.tabIndex != 0){
					this.getPostList()
				}
			},
			//岗位选择
			pickerpostclick(e){
				this.searchCriteria[this.tabIndex].postId = this.pickerOrgList[e.detail.value].id
				console.log('picker发送选择改变，携带值为：',this.searchCriteria)
			},
			//获取部门时间
			departmenttime(e){
				this.searchCriteria[this.tabIndex].time = e.detail.value
				console.log('picker发送选择改变，携带值为：',this.searchCriteria)
			},
			//审批状态
			pickerState(e){
				this.searchCriteria[this.tabIndex].state = this.stateList[e.detail.value].id
				console.log('picker发送选择改变，携带值为：',this.searchCriteria)
			},
			//审批处理
			pickerIsTrue(e){
				this.searchCriteria[this.tabIndex].appIsTrue = this.handleState[e.detail.value].id
				console.log('picker发送选择改变，携带值为：',this.searchCriteria)
			},
			//初始化查询条件
			initSearch(){
				this.searchCriteria=[
					{
						orgId:0,
						postId:0,
						time:"",
						state:0,
						appIsTrue:0,
						title:""
					},
					{
						orgId:0,
						postId:0,
						time:"",
						state:0,
						appIsTrue:0,
						title:""
					}
				]
			},
			//获取岗位列表
			getPostList(){
				let _this = this
				this.pickerOrgList = []//岗位列表
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/hrapi/org/positionlist',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token': _this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:{
						// group:_this.headerVerify.userCont.company,	//公司
						organization:_this.searchCriteria[this.tabIndex].orgId.toString(),	//部门
						page:1,
						pagesize:20000
					},
					success: (res) => {
						console.log(res)
						let callBackDate = res.data
						if(callBackDate.code == 0){
							let chartDate = callBackDate.data
							// console.log('接口返回--login--2--',chartDate);
							let postId = 0
							if(chartDate.list != null && chartDate.list.length > 0){
								
								let contInfo = {
									id:0,
									name:"全部"
								}
								_this.pickerOrgList.push(contInfo)
								chartDate.list.forEach(datItem=>{
									contInfo = {
										id:datItem.id,
										name:datItem.name
									}
									_this.pickerOrgList.push(contInfo)
								})
							}
							if(postId != 0){
								_this.getUserList()
							}
						}else{
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 1000 * 1,
								position:'bottom',
							})
						}
					},
					fail:function(e){
						console.log('接口返回--login--2--',e);
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 1,
							position:'bottom',
						})
					},
				})
			},
			
			//点击搜索
			searchClick(){
				console.log('搜索：',this.searchCriteria)
				this.goods = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			
			//查看审批详情
			lookRowList(data){
				let _this = this
				console.log('接口返回--login--56--',data);
				
				if(_this.tabIndex != 0){
					if(data.class==1){ // 定性
						_this.$commonMethod.JumpUrl('/pages/approval/postdingxin?orderid='+data.orderid+'&class='+data.class)
					}
					if(data.class==2){ // 定量
						_this.$commonMethod.JumpUrl('/pages/approval/postdingliang??orderid='+data.orderid+'&class='+data.class)
					}
				}else{
					if(data.class==1){ // 定性
						_this.$commonMethod.JumpUrl('/pages/approval/dingxin?data='+JSON.stringify(data))
					}
					if(data.class==2){ // 定量
						_this.$commonMethod.JumpUrl('/pages/approval/dingliang?data='+JSON.stringify(data))
					}
				}
				
				
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		}
	}
</script>

<style lang="scss">
	.demo-uni-col{
		background-color: #FFFFFF;
		line-height: 40px;
		text-align: center;
	}
	.drarch_body{
		padding: 5px 0;
		background-color: #FFFFFF;
		border-bottom: 1px solid #DDDDDD;
	}
	.light{
		border-left: 1px solid #DDDDDD;
	}
	.sign_center{
		text-align: center;
		padding-top: 3px;
	}
	.bottom_link{
		border-bottom: 1px solid #DDDDDD;
	}
	.row_list{
		padding: 10px 0;
		background-color: #FFFFFF;
	}
	.text_body{
		padding: 3px 0 3px 10px;
		.text_title{
			font-size: 16px;
			font-weight: bold;
		}
		.text_body_title{
			font-size: 10px;
			color: #666666;
		}
		.tag_body{
			margin-left: 10px;
		}
	}
</style>
