<template>
	<view>
		<view class="tabbox">
			<view class="tabli" :class="{'tabactive': type == 0}" @click="changeTab(0)">
				<view class="tabname">全部</view>
				<view class="tabot"></view>
			</view>
			<view class="tabli" :class="{'tabactive': type == 1}" @click="changeTab(1)">
				<view class="tabname">我创建的</view>
				<view class="tabot"></view>
			</view>
			<view class="tabli" :class="{'tabactive': type == 2}" @click="changeTab(2)">
				<view class="tabname">下属创建的</view>
				<view class="tabot"></view>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="searchbox">
			<view class="searchtext" @click="toQuery">筛选<view class="iconfont icon-shaixuan"></view></view>
		</view>
		<!-- 列表数据 -->
		<scroll-view scroll-y="true" class="scrollbox" @scrolltolower="loadMore">
			<view>
				<item :list="list"></item>
			</view>
		</scroll-view>
		<!-- 添加 -->
		<view class="btn_fix" @click="toSelectApprove" >
			<image :src="BASE_IMG_URL+'1.png'"></image>
		</view>
		<!-- 筛选弹框 -->
		<pop-screen ref="popChild" :typeList="typeList" @sureParams="sureParams"></pop-screen>
		
	</view>
</template>

<script>
	import Item from './item.vue'
	import { netWorkExamineList, netWorkExamineName } from '@/api/index'
	import popScreen from './popScreen.vue'
	import { BASE_IMG_URL } from '@/util/api.js'
	
	export default{
		components:{
			Item,
			popScreen
		},
		data() {
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				page:1,
				totalPage:1,
				list:[],
				type:0,   //0全部  1我创建的  2下属创建的
				queryParams:{},
				typeList:[],  //审批类型
				permission:{},   //权限
			}
		},
		onLoad() {
			//获取审批类型
			this.getType()
		},
		onShow(){
			this.init()
			this.permission = getApp().globalData.permission
		},
		methods:{
			//筛选
			toQuery() {
				this.$refs.popChild.init()
			},
			getType() {
				netWorkExamineName().then(res=>{
					this.typeList = res.data
				})
			},
			sureParams(params) {
				this.queryParams = params
				this.init()
			},
			getList() {
				let params = {
					page:this.page,
					type:this.type,
					...this.queryParams
				}
				netWorkExamineList(params).then(res=>{
					this.totalPage = res.data.last_page
					this.list = this.list.concat(res.data.data)
				})
			},
			loadMore() {
				if(this.page < this.totalPage){
					this.page ++
					this.getList()
				}
			},
			init() {
				this.page = 1
				this.list = []
				this.getList()
			},
			changeTab(type){
				this.type = type
				this.init()
			},
			toSelectApprove() {
				uni.navigateTo({
					url:'/pagesA/work/approve/createTab'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchbox{
		display: flex;
		justify-content: flex-end;
		margin:24rpx 24rpx 0;
		.searchtext{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size:24rpx;
			color:$uni-text-color;
			padding:8rpx 28rpx;
			background:#fff;
			border-radius: 5rpx;
			box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
			.icon-shaixuan{
				color:$uni-text-color;
			}
		}
	}
	.scrollbox{
		width:750rpx;
		height:calc(100vh - 154rpx);
	}
	.tabbox{
		width:750rpx;
		height:80rpx;
		display: flex;
		justify-content: space-around;
		background:#fff;
		.tabli{
			padding-top:20rpx;
			.tabname{
				font-size:26rpx;
				color:#666;
				text-align: center;
				margin-bottom:15rpx;
			}
			.tabot{
				width:80rpx;
				height:8rpx;
				border-radius: 4rpx;
				background:#fff;
			}
		}
		.tabactive{
			.tabot{
				background:$uni-text-color;
			}
		}
	}
	.btn_fix {
		position: fixed;
		bottom: calc(150rpx + env(safe-area-inset-bottom) / 2);
		right: 60rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			background-color: #fff;
			border-radius: 40rpx;
		}
	}
</style>
