<template>
	<view class="content" :style="showPop? 'overflow:hidden;height:100%;': ''">
		
		<view class="uni-flex ai-center jc-around menu-list">
			<MenuItem 
				v-for="(item,index) in menuList"
				:key="index"
				:item="item"
				round="true"
				size="28"
				:src="activeType==item.id? item.active: item.src"
				:nameStyle="activeType==item.id ? 'color:#5B96E9' :'color:#808D97'"
				:imageBoxStyle="(activeType==item.id ? 'background:#f0f7fe;' : 'background:#f6f7f8;')+'height:75rpx;width:75rpx;padding: 18rpx;'"
				@handleClick="handleClick"
				>
			</MenuItem>
		</view>

		<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>
		
		<UniPop :show="showPop" @hidePopup="closePop" type="bottom" @touchmove.prevent round="true">
			<view class="pb24">
				<view class="moduleTitle">日期</view>
				<view class="uni-flex align-center">
					<view v-for="(d,index) in dateList" :key="index" @click="selectDate(index)" class="tag-item" :class="{'actived':dateIndex==index}">{{d.name}}</view>
				</view>
				<view class="moduleTitle">财务流程</view>
				<view class="uni-flex ai-center menu-list">
					<MenuItem 
						v-for="(item,index) in selectList"
						:key="index"
						:item="item"
						size="60"
						:nameStyle="selectTypeIndex==item.typeId ? 'color:'+(colors[index]? colors[index]: colors[index-colors.length]) : 'color:#120E2B'"
						:imageBoxStyle="'background:'+(colors[index]? colors[index]: colors[index-colors.length])+';height:74rpx;width:74rpx;border-radius:20rpx;line-height:74rpx;'"
						@handleClick="bindPartChange"
						>
					</MenuItem>
				</view>
				<view class="popbtn" @click="reloadList">确定</view>
			</view>
		</UniPop>
	</view>
</template>

<script>
	import ListUnit from './components/expenseUnit.vue'
	import MenuItem from '@/components/menu/menuItem.vue'
	import UniPop from '@/components/uni-popup.vue'
	import { mapState,mapGetters,mapMutations } from 'vuex'
	export default {
		data() {
			const today = new Date()
			const day = this.$util.cutDate(today,'YYYY/MM/DD',0)
			const month = this.$util.cutDate(today,'YYYY/MM/DD',-30)
			const threeMonth = this.$util.cutDate(today,'YYYY/MM/DD',-90)
			const halfYear = this.$util.cutDate(today,'YYYY/MM/DD',-182)
			return {
				pageData: {
					pageIndex:1,
					pageSize:10,
					isEnd: false,
					isLoading: true
				},
				showPop: false,
				pageList:[],
				popOldValue:[0,''],
				activeType: 0, // 选中的筛选id
				selectTypeIndex: '', //默认选中的流程类型
				dateIndex: 0, //默认选中的日期
				colors: ['#5B96E9','#F0A038','#5B96E9','#57BAAE','#D9675C','#5B96E9','#57BAAE'],
				dateList:[
					{
						name: '近1月',
						value: `${month},${day}`
					},
					{
						name: '近3月',
						value: `${threeMonth},${day}`
					},
					{
						name: '近半年',
						value: `${halfYear},${day}`
					}
				],
				menuList: [
					{
						name: '待审批',
						src: '../../../../../static/images/expense/type/shenp.png',
						active: '../../../../../static/images/expense/type/shenpz.png',
						id: 0
					},{
						name: '已处理',
						src: '../../../../../static/images/expense/type/yichl.png',
						active: '../../../../../static/images/expense/type/yichlz.png',
						id: 1
					},{
						name: '已发起',
						src: '../../../../../static/images/expense/type/yifq.png',
						active: '../../../../../static/images/expense/type/yifqz.png',
						id: 2
					},{
						name: '更多筛选',
						src: '../../../../../static/images/expense/type/shaix.png',
						active: '../../../../../static/images/expense/type/shaixz.png',
						id: 4
					},
				],
			}
		},
		components:{
			ListUnit,
			MenuItem,
			UniPop
		},
		computed:{
			...mapGetters({reloading:'shouldReLoadingList'}),
			...mapState({
				selectList: (state) => {
					if(state.userData.ProvinceCode=='340000'){
						return [
							{
								name: '全部',
								src: '../../../../../static/images/expense/type/qb.png',
								typeId: ''
							},
							{
								name:'借款单申请',
								typeId: "401601",
								src: '../../../../../static/images/expense/type/jkdsp.png',
							},{
								name: '服务区报销',
								typeId: "401602",
								src: '../../../../../static/images/expense/type/fwqbx.png',
							},{
								name: '付款审批',
								typeId: "401603",
								src: '../../../../../static/images/expense/type/fksp.png',
							},{
								name:'保证金退付',
								typeId: "401604",
								src: '../../../../../static/images/expense/type/bzjtf.png',
							},{
								name:'工程结算单',
								typeId: "401605",
								src: '../../../../../static/images/expense/type/gcjsd.png',
							}
						]
					}
					return [
						{
							name: '全部',
							src: '../../../../../static/images/expense/type/qb.png',
							typeId: ''
						},
						{
							name: '差旅费报销',
							typeId: "401202",
							src: '../../../../../static/images/expense/type/clfbx.png',
						}
						,{
							name:'费用报销',
							typeId: "401201",
							src: '../../../../../static/images/expense/type/fybx.png',
						}
						,{
							name:'行政资产申请',
							typeId: "401101",
							src: '../../../../../static/images/expense/type/xzzcsp.png',
						}
						,{
							name: '公务交通', 
							src: '../../../../../static/images/expense/type/gwjt.png',
							typeId: "401207"
						}
						,{
							name: '差旅费超标准',
							src: '../../../../../static/images/expense/type/clfbx.png',
							typeId: "401206"
						}
						,{
							name: '公务接待',
							src: '../../../../../static/images/expense/type/gwjd.png',
							typeId: "401102"
						}
						,{
							name:'工程款支付',
							typeId: "401203",
							src: '../../../../../static/images/expense/type/gcjsd.png',
						}
						,{
							name:'经费预算',
							src: '../../../../../static/images/expense/type/jfys.png',
							typeId: "401204"
						}
						,{
							name:'固定资产处理',
							src: '../../../../../static/images/expense/type/gdzc.png',
							typeId: "401205"
						}
						,{
							name:'内部转账',
							typeId: "401301",
							src: '../../../../../static/images/expense/type/bzjtf.png',
						}
						,{
							name:'大额支付',
							src: '../../../../../static/images/expense/type/dezf.png',
							typeId: "401302"
						}
						,{
							name:'支票领用',
							typeId: "401303",
							src: '../../../../../static/images/expense/type/zply.png',
						}
						,{
							name:'领付款申请', 
							typeId:"401304",
							src: '../../../../../static/images/expense/type/jkdsp.png',
						},
						
					]
				}
				}),
			
		},
		methods: {
			...mapMutations(['shouldReLoadingList']),
			handleClick(item){
				if(item.id==4){ 
					this.showPop = true
				}else{
					this.activeType = item.id
					this.reloadList()
				}
			},
			selectDate(dayIndex){
				this.popOldValue[0] = this.dateIndex
				this.dateIndex = dayIndex
			},
			reloadList() {
				this.showPop = false
				this.pageData.pageIndex = 1
				uni.showLoading({
					title:'正在加载'
				})
				this.pageData.isEnd = false
				this.getList()
				this.$forceUpdate()
			},
			bindPartChange(item){
				this.popOldValue[1] = this.selectTypeIndex
				this.selectTypeIndex =  item.typeId
			},
			closePop (){
				let popOldValue = this.popOldValue
				
				this.selectTypeIndex = popOldValue[1]
				this.dateIndex = popOldValue[0]
				this.showPop = false
			},
			getList() {
				let _this = this
				let DealState = _this.activeType!=-1&& _this.activeType!=4 ? _this.activeType : ''
				_this.$request.$get("GetFinanceFlowList",{
					pageIndex: _this.pageData.pageIndex,
					pageSize: _this.pageData.pageSize,
					ProdefName: _this.selectTypeIndex,
					DealState: DealState,
					QueryDate: _this.dateList[_this.dateIndex].value
				}).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,...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) {
				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>
	.tag-item {
		width: 150rpx;
		height: 66rpx;
		background: #ffffff;
		border: 1rpx solid #efefef;
		border-radius: 8rpx;
		color: #808D97;
		font-size: 24rpx;
		text-align: center;
		line-height: 64rpx;
		margin: 24rpx 0 24rpx 24rpx;
	}
	.tag-item.actived {
		background: #e8f3fd;
		border: 1rpx solid #e8f3fd;
		color: #4D95F0;
	}
	.menu-list {
		width: 100%;
		background-color: #fff;
		flex-wrap: wrap;
		
	}
	.moduleTitle {
		text-align: left;
		margin: 16rpx 0 0 24rpx;
		font-weight: 700;
		font-size: 30rpx;
		padding: 24rpx 0 12rpx 0;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		
	}
	.pb24 {
		padding-bottom: 24rpx;
	}
	.popbtn {
		width: 639rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		background: #5b96e9;
		border-radius: 8rpx;
		/* margin-top: 48rpx; */
		margin: 48rpx auto 24rpx auto;
	}
</style>
