<template>
	<view class="content">
		<div class="screen-box">
			<div class="uni-flex">
				<text>报销类型：</text>
				<picker mode="selector" @change="bindPartChange" :value="selectList[selectTypeIndex].typeId" range-key="name" :range="selectList" class="screen-unit">
					<view>{{selectList[selectTypeIndex].name}} <text class="uni-icon uni-icon-arrowdown"></text></view>
				</picker>
				
			</div>
		</div>	
		<view v-if="pageList.length>0">
			<list-unit v-for="(item,index) in pageList" :key="index" :item="item" :i="index" @goDetail="goDetail"></list-unit>
			
		</view>
		<view v-else-if="!pageData.isLoading" style="height: 100%;">
			<noFound :nodata="pageList.length>0 ? false : true"/>
		</view>
		<view class="load-more" v-if="pageList.length>0">
			<text>{{!pageData.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
		</view>
		
	</view>
</template>

<script>
	import ListUnit from './components/expenseUnit.vue'
	import { mapGetters,mapMutations } from 'vuex'
	export default {
		data() {
			return {
				pageData: {
					pageIndex:1,
					pageSize:10,
					isEnd: false,
					isLoading: true
				},
				pageList:[],
				selectTypeIndex: 0,
				selectList: [
					{
						name: '全部',
						typeId: ''
					},
					{
					name: '差旅费报销',
					typeId: "401202"
				}
				,{
					name:'费用报销审批',
					typeId: "401201"
				}
				,{
					name:'行政资产申请',
					typeId: "401101"
				}
				,{
					name:'公务交通费用',
					typeId: "401207"
				}
				,{
					name:'差旅费超标准',
					typeId: "401206"
				}
				,{
					name:'公务接待审批',
					typeId: "401102"
				}
				,{
					name:'工程款支付',
					typeId: "401203"
				}
				,{
					name:'经费预算申请',
					typeId: "401204"
				}
				,{
					name:'固定资产处理',
					typeId: "401205"
				}
				,{
					name:'内部转账审批',
					typeId: "401301"
				}
				,{
					name:'大额支付审批',
					typeId: "401302"
				}
				,{
					name:'支票领用审批',
					typeId: "401303"
				}
				,{
					name:'领付款申请',
					typeId:"401304"
				}]
			}
		},
		components:{
			ListUnit
		},
		computed:{
			...mapGetters({reloading:'shouldReLoadingList'})
		},
		methods: {
			...mapMutations(['shouldReLoadingList']),
			bindPartChange(e){
				if(this.selectTypeIndex!=e.detail.value){
					
					this.selectTypeIndex =  e.detail.value
					this.pageData.pageIndex = 1
					uni.showLoading({
						title:'正在加载'
					})
					this.pageData.isEnd = false
					this.getList()
					this.$forceUpdate()
				}
			},
			getList() {
				let _this = this
				
				_this.$request.$get("GetFinanceFlowList",{
					pageIndex: _this.pageData.pageIndex,
					pageSize: _this.pageData.pageSize,
					ProdefName: _this.selectList[this.selectTypeIndex].typeId
				}).then(res => {
				
					if(!res.ResultCode ||res.ResultCode!='100'){
						
						_this.pageList = []
					}else{
						let list = res.Data.List
						
							
							
						_this.pageList = this.pageData.pageIndex==1 ? list : _this.pageList.concat(list)
							
						
						if (list.length < _this.pageData.pageSize) { // 返回条数小于每页条数
							_this.pageData.isEnd = true
						}
						_this.$forceUpdate()
					
					}
					uni.hideLoading()
					setTimeout(function(){
						
						_this.pageData.isLoading = false
					},500)
				})
			},
			loadMore(){
				if(!this.pageData.isEnd) {
					this.pageData.pageIndex += 1
					this.getList()
				}
			},
			goDetail(item) {
				let pageName = ''
				
				switch (item.ACCEPT_TYPE) {
					// 行政资产申请
					case 401101:
						pageName = 'administrative'
						break;
					//大额支付审批
					case 401302:
						pageName = 'bigPay'
						break;
					// 经费预算申请
					case 401204: 
						pageName = 'budget'
						break;
					// 支票领用审批
					case 401303:
						pageName = 'checkRecipients'
						break;
					// 工程款支付
					case 401203:
						pageName = 'engineering'
						break;
					// 固定资产处理
					case 401205:
						pageName = 'fixedAssets'
						break;
					// 领付款申请
					case 401304:
						pageName = 'getPayment'
						break;
					// 内部转账审批
					case 401301:
						pageName = 'internalTransfer'
						break;
					// 公务接待审批
					case 401102:
						pageName = 'officialEntertaining'
						break;
					// 公务交通费用
					case 401207:
						pageName = 'publicTransportation'
						break;
					case 401201: // 费用报销审批
						pageName = 'reimbursement'
						break
					// 差旅费超标准
					case 401206:
						pageName = 'travelExcessive'
						break;
					// 差旅费报销
					case 401202:
						pageName = 'travelExpense'
						break
				}
				// this.$util.toNextRoute('navigateTo', "/pages/expenseApproval/"+pageName+"?id=" + item.FINANCEPROINST_ID)
				this.$util.toNextRoute('navigateTo', "/pages/expenseApproval/expenseDetail?type="+item.ACCEPT_TYPE+"&id=" + item.FINANCEPROINST_ID)
				
			},
		},
		onPullDownRefresh() {
			this.pageData.pageIndex = 1
			this.pageData.isEnd = false
			uni.showLoading({
				title:'正在加载'
			})
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom(){
			this.loadMore()
		},
		onLoad() {
			this.pageData.isLoading= true
			uni.showLoading({
				title:'正在加载'
			})
			this.getList()
			
		},
		onUnload() {
			
			this.$util.addUserBehavior()
		},
		onShow() {
			if(this.reloading) {
				uni.showLoading({
					title:'正在加载'
				})
				this.pageData.pageIndex = 1
				this.pageData.isEnd = false
				this.getList()
				this.shouldReLoadingList(false)
			}
		},
		onHide() {
			// uni.$off('3000');
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 90rpx;
		/* height: 100%; */
	}
	.screen-box {
		background-color: #fff;
		padding: 15upx 24upx;
		display: flex;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1;
		border-bottom: 2rpx solid #f8f9fb;
		/* justify-content: space-between; */
	}
	.uni-icon-arrowdown {
		font-size: 24rpx;
		margin-left: 8rpx;
	}
</style>
