<template>
	<view class="content">
		<div class="uni-flex ai-center screen-box">
			<text>账期：</text>
			<picker mode="date" @change="bindDateChange($event,0)" :value="pageData.searchTime[0]" :end="pageData.endDate" start="2019/12/01" class="screen-unit">
				<text>{{pageData.searchTime[0]}}</text>
				<image src="/static/images/tab_down.png" mode="aspectFit"></image>
			</picker>
			<text class="mr20">至</text>
			<picker mode="date" @change="bindDateChange($event,1)" :value="pageData.searchTime[1]" :end="pageData.endDate" start="2019/12/01" class="screen-unit">
				<text>{{pageData.searchTime[1]}}</text>
				<image src="/static/images/tab_down.png" mode="aspectFit"></image>
			</picker>
			<button type="primary" size="mini" class="search-button" @tap="searchList">查询</button>
		</div>	
		<view v-if="!pageData.isLoading && pageList.length>0">
			<div class="box-card" v-for="(item,i) in pageList" :key="i" @tap="goDetail(item)">
				<div class="box-top-title">
					<span class="title-clock">{{$util.cutDate(item.ENDACCOUNT_DATE,'YYYY年MM月DD日')}}</span>
					<span class="title-fn">{{item.SERVERPART_NAME}}</span>
				</div>
				
				<div class="box-bottom-tab">
					<div class="tab-unit">
						<i class="tab-icon1"></i>
						<span>待办理：</span>
						<span class="tab-unit-num">{{item.DEAL_COUNT}}</span>
					</div>
				</div>
			</div>
			
		</view>
		<view v-else-if="pageData.isLoading===false" >
			<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  { mapGetters,mapMutations } from 'vuex'
	export default {
		data() {
			let now = new Date()
			
			let nowTime = this.$util.cutDate(now, 'YYYY/MM/DD')
			let sTime = this.$util.cutDate(now, 'YYYY/MM/DD', -2)
			return {
				
				pageData: {
					pageIndex: 1,
					pageSize: 99,
					searchTime: [sTime,nowTime],
					endDate: nowTime,
					sDate: sTime,
					eDate: nowTime,
					isEnd: false,
					isLoading: true
				},
				showList:[],
				pageList:[]
			}
		},
		computed:{
			...mapGetters({reloading:'shouldReLoadingList'})
		},
		methods: {
			...mapMutations(['shouldReLoadingList']),
			bindDateChange(e,index){
				
				this.pageData.searchTime[index] = e.detail.value
				this.$forceUpdate()
			},
			searchList(){
				uni.showLoading({
					title:'正在加载'
				})
				this.pageData.isEnd = false
				this.pageData.pageIndex = 1
				this.pageList= []
				this.getList()
			},
			getList () {
				let _this = this
				
				_this.$request.$get('GetEndaccountTotalList',{
					// action_record: this.searchTime,
					Page_Index: this.pageData.pageIndex,
					Page_Size: this.pageData.pageSize,
					Statistical_Date: `${this.pageData.searchTime[0]},${this.pageData.searchTime[1]}`, //  '2019/12/27'
					
				}).then(res=>{
					
					uni.hideLoading()
					_this.pageData.isLoading = false
					if(!res.Result_Code ||res.Result_Code!='100') return
				
					let list = res.Result_Data.List
					
					_this.pageList = _this.pageData.pageIndex ==1 ? list  :[..._this.pageList,...list]
					// _this.showList = list.slice(0,_this.pageData.pageSize)
					
					if (list.length < _this.pageData.pageSize) {
						_this.pageData.isEnd = true
					} 
					this.$forceUpdate()
				})
			},
			goDetail(item){
				this.$util.toNextRoute('navigateTo', '/pages/dataSummary/dayDetail?seviceId='+item.SERVERPART_ID+'&date='+item.ENDACCOUNT_DATE)
				
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'正在加载'
			})
			this.pageData.pageIndex = 1
			this.pageData.isEnd = false
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad() {
			this.getList()
			uni.showLoading({
				title:'正在加载'
			})
		},
		onReachBottom(){
			
			if(!this.pageData.isEnd) {
				// uni.showLoading({
				// 	title:'正在加载'
				// })
				// let {pageIndex , pageSize} = this.pageData
				// let showList = this.showList
				// let pageList = this.pageList
				// let maxLen = pageList.length
				
				// let startArrIndex = pageIndex*pageSize - 1
				// let endArrIndex = startArrIndex+pageSize
				
				// if(endArrIndex < maxLen) {
				// 	this.showList = showList.concat(pageList.slice(startArrIndex,endArrIndex))
				// } else{
				// 	this.pageData.isEnd = true
				// 	this.showList.concat(pageList.slice(startArrIndex,maxLen))
				// }
				this.pageData.isEnd = false
				this.pageData.pageIndex += 1
				this.getList()
				// setTimeout(function(){
				// 	uni.hideLoading()
				// },1000)
			}
		},
		onShow() {
			let _this = this
			if(this.reloading) {
				uni.showLoading({
					title:'正在加载'
				})
				_this.pageData.pageIndex = 1
				_this.pageData.isEnd = false
				_this.getList()
				_this.shouldReLoadingList(false)
			}
			
		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onHide() {
			
		}
	}
</script>

<style scoped>
	.screen-box {
		background-color: #fff;
		padding: 0 20rpx;
		position: sticky;
		top: 0;
	}
	.screen-box .screen-unit {
		display: flex;
		align-items: center;
		width: 200rpx;
		padding: 0 14rpx;
		line-height: 3;
	}
	.screen-box text {
		line-height: 3;
	}
	.screen-box image{
		width: 12rpx;
		height: 8rpx;
		margin: 0 16rpx;
		vertical-align: middle;
	}
	.search-button {
		font-size: 24rpx;
		padding: 0 20rpx;
		color: #417CF7;
		background-color: #F8FCFF;
		border: 3rpx solid #6695F8;
		line-height: 1.8;
		border-radius: 6rpx;
	}
	.mr20 {
		margin: 0 30rpx 0 16rpx;
	}
/* 内容卡片 */
	.box-card {
		
		margin: 30upx 24upx;
		background-color: #fff;
		box-shadow: 0px 0upx 8upx 0.4upx #e2e2e2;
		border-radius: 6upx;
		overflow: hidden;
	}
	.box-top-title {
		padding: 16upx 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fafafa;
	}
	.title-clock {
		font-size: 28upx;
		color: #454545;
		display: inline-block;
	}
	.title-fn {
		font-size: 26upx;
		color: #636363;
		display: flex;
		align-items: center;
	} 
	.title-fn:before {
		content: '';
		display: block;
		margin-right: 20upx;
		width: 28upx;
		height: 20upx;
		background-repeat: no-repeat;
		background-size: contain;
	
	}
	
	.title-clock:before {
		content: '';
		display: inline-block;
		margin-right: 12upx;
		width: 24upx;
		height: 24upx;
		background: url(../../static/images/effective/jt.png) no-repeat center;
		background-size: contain;
	}
	.box-center-title {
		color: #6A6A6A;
		padding-left: 36upx;
		font-size: 26upx;
	}
	.box-bottom-tab{
		display: flex;
		align-items: center;
	
		padding: 24upx 24upx;
	}
	.tab-unit {
		display: flex;
		align-items: center;
		/* padding-left: 36upx; */
		color: #636363;
		font-size: 26upx;
		flex: 1;
	}
	.tab-unit:after{
		content: '';
		display: block;
		/* margin-left: 16upx; */
		flex: 1;
		height: 24upx;
		background: url(../../static/images/effective/sj.png) no-repeat center right;
		background-size: contain;
	}
	.tab-icon1:before {
		content: '';
		display: block;
		margin-right: 20upx;
		width: 32upx;
		height: 32upx;
		background-repeat: no-repeat;
		background-size: contain;
	
	}
	.tab-icon1:before {
		background-image: url(../../static/images/mbwa/rw.png);
	}
	.title-fn:before {
		background-image: url(../../static/images/effective/rjjy_fwq.png);
	}
	.tab-unit-num {
		font-size: 30upx;
		color: #454545;
		font-weight: bold;
	}
</style>
