<template>
	<view class="page-content">
		
		<scroll-view scroll-y="true" @scroll="showFixed" style="height:100%" @scrolltolower="reachBottom()" :style="{'overflow':showPopupMiddle ? 'hidden': 'scroll'}">
			<div class="fixed-box" :style=" 'transform: translateY('+fixedY+'px);opacity:'+opacity+';'">
				<view>
					<view class="center-title">{{sMsg.SERVERPART_NAME}}</view>
					
					<view class="title-clock" style="color: #fff;text-align: center;">{{sMsg.ENDACCOUNT_DATE}}</view>
				</view>
				<view>
					<view class="center-title">日结营收(元）</view>
					<view class="tab-unit-num " style="color: #fff;text-align: center;">{{sMsg.CASHPAY ? $util.fmoney(sMsg.CASHPAY,2) : '0.00'}}</view>
				</view>
				<view>
					<view class="center-title">待我办理</view>
					<view class="tab-unit-num " style="color: #fff;text-align: center;">{{sMsg.DEAL_COUNT}}</view>
				</view>
			</div>
			<div class="box-card" v-show="sMsg.SERVERPART_NAME" :style="'opacity:'+(1-opacity)+';'" >
				<div class="box-top-title">
					<span class="box-center-title">{{sMsg.SERVERPART_NAME}}</span>
					<picker mode="date" @columnchange="bindDateColumnChange" @change="bindDateChange" :value="values" :end="pageData.endDate" :start="pageData.startDate" class="title-clock" >
						<view>{{sMsg.ENDACCOUNT_DATE}} <text class="uni-icon uni-icon-arrowdown"></text></view>
					</picker>
					<!-- <span class="title-clock">{{sMsg.ENDACCOUNT_DATE}}</span> -->
				</div>
				<view class="top-card">
					<div class="box-center-box">
						<span class="center-title">日结营收(元）</span>
						<span class="center-num">{{sMsg.CASHPAY ? $util.fmoney(sMsg.CASHPAY,2) : '0.00'}}</span>
					</div>
					<div class="box-bottom-tab">
						<view class="tab-unit" style="flex: 3;">
							
							<span class="tab-icon2" v-if="sMsg.DIFFERENT_PRICE_LESS==0 && sMsg.DIFFERENT_PRICE_MORE!=0">长款金额</span>
							<span class="tab-icon2" v-else-if="sMsg.DIFFERENT_PRICE_LESS!=0 && sMsg.DIFFERENT_PRICE_MORE==0">短款金额</span>
							<span class="tab-icon2" v-else>长短款额</span>
						</view>
						<view class="tab-unit" style="flex: 2;">
							<span class="tab-icon1">待我办理</span>
						</view>
						<view class="tab-unit" style="flex: 3;">
							<span class="tab-icon2">在营门店</span>
						</view>
					</div>
					
					<div class="box-bottom-tab">
						<div class="tab-unit" style="flex: 3;">
							
							<span class="tab-unit-num priceRed" v-if="sMsg.DIFFERENT_PRICE_LESS!=0">{{sMsg.DIFFERENT_PRICE_LESS}}</span>
							<span class="tab-unit-num priceGreen" v-if="sMsg.DIFFERENT_PRICE_MORE!=0">{{sMsg.DIFFERENT_PRICE_MORE}}</span>
							<span class="tab-unit-num " v-if="sMsg.DIFFERENT_PRICE_LESS==0&& sMsg.DIFFERENT_PRICE_MORE==0">0.00</span>
						</div>
						<div class="tab-unit" style="flex: 2;">
							
							<span class="tab-unit-num">{{sMsg.DEAL_COUNT}}</span>
						</div>
						<div class="tab-unit" style="flex: 3;" @tap="showPop">
							
							<span class="weisc-ico" v-if="sMsg.SHOP_UPCOUNT>0">{{sMsg.SHOP_UPCOUNT}}</span>
							<span class="tab-unit-num " :class="{'more-btn':sMsg.SHOP_UPCOUNT>0}">{{sMsg.SHOP_UPCOUNT>0 ? '/ '+sMsg.SHOP_TCOUNT : sMsg.SHOP_TCOUNT}}</span>
						</div>
					</div>
				</view>
			</div>
			
			<div v-if="pageList.length>0">
				<div class="card" v-for="(item,i) in pageList" @tap="goDetail(item)" :key="i" :class="item.PENDSTATE == 0 ? 'conten-border' : ''">
					
					<div class="uni-flex jc-between" >
						<p class="contentName">{{item.SHOPNAME}}</p>
						<text class="typeText" :class="item.TREATMENT_MARK == '已审结' ? 'typeText-color' : ''">{{item.TREATMENT_MARK}}</text>
					</div>
				
					<div class="content-index">{{i+1}}</div>
					<view class="uni-flex content-box-cashpay jc-end" >
						<view>
							<text class="content-price">{{$util.fmoney(item.CASHPAY)}}</text>
							<text style="font-size: 24upx;">元</text>
						</view>
						<view class="long-short-money" v-if="item.DIFFERENT_PRICE!=0"><text :class="{'priceGreen':item.DIFFERENT_PRICE>0,  'priceRed':item.DIFFERENT_PRICE<0}">{{item.DIFFERENT_PRICE}}</text>元</view>
					</view>
					<view class="bb1"></view>
					<view class="uni-flex jc-between" >
						<view class="uni-flex align-top">
							<text class="G-icon A-icon" ></text>
							<text class="content-span">账期：{{item.ENDACCOUNT_STARTDATE}} - {{item.ENDACCOUNT_DATE}}</text>
						</view>
						<image :src="cardIcoPath(item.SCAN_TYPE)" mode="aspectFit"></image>
					
					</view>
					
				</div>
			</div>
		
		<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>
		<popUp :show="showPopupMiddle" @hidePopup="closePop" type="middle" @touchmove.prevent>
			<div class="header-top">未上传门店</div>
			<div  class="pop-body" @touchmove.prevent>
				<view class="uni-flex pop-row align-top" style="aligin-items:flex-start;" v-for="(c,i)  in unUploadList" :key="i">
					<text class="pop-index" >{{i>8 ? i+1 :'0'+(i+1)}}</text>
					<text class="">{{c.SHOPNAME}}</text>
				</view>
			</div>
		</popUp>
		</scroll-view>
		
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import popUp from '@/components/uni-popup.vue'
	export default {
		data() {
			let nowTime = this.$util.cutDate(new Date(), 'YYYY/MM/DD')
			let startTime = this.$util.cutDate(new Date(), 'YYYY/MM/DD','-90')
			return {
				pageData: {
					pageIndex:1,
					pageSize:10,
					sDate: nowTime,
					SERVERPART_ID: '',
					isEnd: false,
					isLoading: true,
					endDate: nowTime,
					startDate: startTime
				},
				
				sMsg:{},
				fixedY: -68,
				opacity: 0,
				showPopupMiddle: false,
				pageHieght: uni.getSystemInfoSync().windowHeight,
				pageList:[],
				unUploadList:[],
				
			}
		},
		components:{
			popUp
		},
		
		methods: {
			...mapMutations(['shouldReLoadingList']),
			bindDateChange(e) {
				let values = e.detail.value
				
				
				this.pageData.pageIndex =1
				this.pageData.sDate = values.replace(/-/ig,'/')
				uni.showLoading({
					title:'正在加载'
				})
				this.getList()
				this.getHeader()
				this.getUnUpLoadShops()
			},
			
			cardIcoPath(type) {
				
				switch (type){
					case 3:
						return '/static/images/effective/jkcs.png'
					case 1:
						return '/static/images/effective/ewm.png' 
					case 2:
						return '/static/images/effective/scj.png'
					
				}
			},
			showFixed(e){
				let options = e.detail
				
				if(options.scrollTop > 95 && options.scrollTop < 162){
					
					this.fixedY = -68+ (options.scrollTop -95)
					this.opacity = (options.scrollTop -85)/68
				}else if(options.scrollTop>162){
					uni.setNavigationBarColor({
						backgroundColor:"#EAEBEB"
					})
					this.fixedY = 0
					this.opacity = 1
				}else{
					this.fixedY = -68
					this.opacity = 0
				}
			
			},
			getList () {
				let _this = this
				
				_this.$request.$get('GetEndaccountDetails',{
					
					statistical_Date: this.pageData.sDate,
					Serverpart_Id: this.pageData.SERVERPART_ID,
					page_Index: this.pageData.pageIndex,
					page_Size: this.pageData.pageSize,
					
				}).then(res=>{
					uni.hideLoading()
					if(!res.Result_Code ||res.Result_Code!='100') return
						
					let list = res.Result_Data.List
					
					_this.pageList = _this.pageData.pageIndex===1 ? list  :_this.pageList.concat(list)
				
					if (list.length < _this.pageData.pageSize) {
					
						_this.pageData.isEnd = true
					}
					
				})
			},
			getHeader () {
				let _this = this
				_this.$request.$get('GetEndaccountListByDate',{
					statistical_Date: this.pageData.sDate,
					Serverpart_Id: this.pageData.SERVERPART_ID 
				
				}).then(res=>{
					
					if (res.Result_Data.List && res.Result_Code==100) {
						let _data = res.Result_Data.List[0]
					
						_data.ENDACCOUNT_DATE = _this.$util.cutDate(_data.ENDACCOUNT_DATE,'MM月DD日')
					
						_data.DIFFERENT_PRICE_LESS = _this.$util.fmoney(_data.DIFFERENT_PRICE_LESS)
						_data.DIFFERENT_PRICE_MORE = _this.$util.fmoney(_data.DIFFERENT_PRICE_MORE)
						_this.sMsg = _data
						if(_data.SHOP_UPCOUNT>0){
							_this.getUnUpLoadShops()
						}
					}
						
					
				})
			},
			goDetail(item){
				this.$util.toNextRoute('navigateTo', '/pages/dataSummary/detail?SERVERPART_ID='+item.SERVERPART_ID+'&ENDACCOUNT_ID='+item.ENDACCOUNT_ID)

			},
			getUnUpLoadShops(){
				let _this = this
				_this.$request.$get('GetUnUpLoadShops',{
				
					action_record: _this.pageData.sDate,
					Serverpart_Id: _this.pageData.SERVERPART_ID
				}).then(res => {
					let _data = res.Result_Data
					
					_this.unUploadList  = _data.List
				
				})
			},
			reachBottom () {
				let _this = this
				if (!_this.pageData.isEnd) {
					_this.pageData.pageIndex += 1
					_this.getList()
				}
			},
			showPop(){
				
				if(this.sMsg.SHOP_UPCOUNT>0){
					this.showPopupMiddle = true
				}
			},
			closePop(){
				this.showPopupMiddle = false
			},
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'正在加载'
			})
			this.pageData.pageIndex = 1
			this.pageData.isEnd = false
			this.getList()
			this.getHeader()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		
		onReachBottom() {
			this.reachBottom()
		},
		onLoad(option) {
			let _this = this
			uni.showLoading({
				title:'正在加载'
			})
			this.pageData.sDate = option.date //"2020/11/26 " 
			this.pageData.SERVERPART_ID = option.seviceId
			this.getList()
			this.getHeader()
			
			uni.$on('datasummary', function (data){
				
				if(data) {
					uni.showLoading({
						title:'正在加载'
					})
					_this.pageData.pageIndex = 1
					_this.pageData.isEnd = false
					_this.getList()
					_this.getHeader()
					_this.shouldReLoadingList(true);
				}
			});
		},
		onShow() {
			
		},
		onUnload() {
			this.$util.addUserBehavior()
			uni.$off('datasummary');
		},
		onHide() {
			
		}
	}
</script>

<style scoped>
	@import url('../../common/css/listUnit.css');
	.page-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		position: relative;
	}
	.long-short-money {
		position: absolute;
		right: 30upx;
		font-size: 24upx;
		color: #636363;
	}
	.long-short-money text {
		font-size: 24upx;
	}
	.card image{
		width: 30upx;
		height: 30upx;
	}
	.scan-ico, .shouchi-ico, .jiekou-ico {
		display: flex;
		align-items: center;
		position: absolute;
		right: 18px;
	}
	.scan-ico:after {
		content:'';
		display: block;
		margin-left: 16upx;
		width: 30upx;
		height: 30upx;
		background: url(../../static/images/effective/ewm.png) no-repeat center;
		background-size: contain;
	}
	.shouchi-ico:after {
		content:'';
		display: block;
		margin-left: 16upx;
		width: 21upx;
		height: 29upx;
		background: url(../../static/images/effective/scj.png) no-repeat center;
		background-size: contain;
	}
	.jiekou-ico:after {
		content:'';
		display: block;
		margin-left: 16upx;
		width: 29upx;
		height: 27upx;
		background: url(../../static/images/effective/jkcs.png) no-repeat center;
		background-size: contain;
	}
	.weisc-ico:before {
		content:'';
		display: block;
		margin-right: 8upx;
		width: 22upx;
		height: 20upx;
		background: url(../../static/images/effective/jg.png) no-repeat center;
		background-size: contain;
	}
	/* 头部卡片 */
	.box-card {
		padding: 24upx 24upx 0;
	
		background-color: #fff;
		/* box-shadow: 0px 2upx 16upx 0.4upx #e2e2e2; */
		/* position: fixed;
		z-index: 1; */
		width: 100%;
		box-sizing: border-box;
		transition: all .2s;
		background: url(../../static/images/effective/bg-top.png) no-repeat center;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;
	}
	.top-card {
		background: linear-gradient(to right, #686D8F, #A1ACC6);
		margin-top: 24upx;
		padding: 24upx 0 16upx 0;
		border-radius: 16upx;
	}
	.box-bank {
		width: 100%;
		height: 364upx;
	}
	.box-top-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.title-clock {
		color: #999;
		font-size: 24upx;
		text-align: right;
	}
	.title-fn {
		font-size: 26upx;
		color: #A1A1A1;
		display: flex;
		align-items: center;
	} 
	.more-btn,.weisc-ico {
		display: flex;
		align-items: center;
		margin-left: 8upx;
		color: #dd7575;
		font-size: 30upx;
	}
	.more-btn:after{
		content: '';
		display: block;
		margin-left: 8upx;
		width: 14upx;
		height: 24upx;
		background: url(../../static/images/effective/sj.png) no-repeat center;
		background-size: contain;
	}
	
	.box-center-title {
		font-size: 24upx;
		color: #010101;
		border-radius: 24upx;
		padding: 0 16upx;
		background-color: #DEDEDE;
		text-align: center;
		
	}
	.uni-icon-arrowdown {
		font-size: 24rpx;
	}
	.box-center-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 16upx;
	}
	.center-title {
		color: #DEDEDE;
		font-size: 26upx;
	}
	.center-num {
		font-size: 56upx;
		color: #fff;
		font-family: Bahnschrift Regular;
	}
	.box-bottom-tab{
		display: flex;
		align-items: center;
	}
	
	.tab-unit {
		display: flex;
		align-items: center;
		/* flex-direction: column; */
		text-align: center;
		color: #636363;
		font-size: 26upx;
		justify-content: center;
	}
	.tab-icon1,.tab-icon2 {
		font-size: 24upx;
		color: #DEDEDE;
		flex: 1;
	}
	
	.tab-unit-num {
		font-size: 30upx;
		color: #fff;

	}
	.tab-unit-num+.tab-unit-num {
		margin-left: 16upx;
	}
	.tab-unit-num+.tab-unit-num:before {
		content: ',';
		margin: 0 8upx;
		color: #fff;
	}
	.priceGreen,.priceGreen.tab-unit-num {
		color: #7CB9A5;
		font-size: 28upx;
	}
	
	.priceRed,.tab-unit-num.priceRed {
		color: #D13B3B;
		font-size: 28upx;
	}
	.fixed-box {
		padding: 16upx;
		background: linear-gradient(to right, #686D8F, #A1ACC6);
		transition: all .2s;
		position: fixed;
		top: 0upx;
		left: 0;
		width: 100%;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}
	/* 弹出内容 */
	.header-top {
		font-size: 30rpx ;
		font-weight: 600 ;
		color: #333 ;
		text-align: left ;
		width: 100%;
		padding: 20rpx 0;
	}
	.pop-body {
		width: 600upx;
		max-height: 700upx;
		overflow: auto;
	}
	.pop-row {
		padding: 24upx 0;
		font-size: 24upx;
		align-items: center;
		
	}
	.pop-row + .pop-row  {
		border-top: 1upx solid #eee;
	}
	.pop-index {
		color: #E1B582;
		border: 1upx solid #E1B582;
		border-radius: 8upx;
		padding: 0upx 12upx;
		margin-right: 12upx;
		font-size: 24rpx;
		line-height: 1.2;
	}
</style>
