<template>
	<view class="page-content my-bg">
		<cu-custom class="main-topbar bg-main-oil" bgColor="bg-main-oil" :isBack="true">
			<block slot="content">交易统计</block>
			<block slot="backText" class="back-text">返回</block>
		</cu-custom>

		<view class="main-money bg-main-oil">
			<view class="dataTimeBox">
				<view class="cu-capsule-container">
					<view class="cu-capsule round bg-white solid line-gray" @tap="showModal(0)">
						<view class='cu-tag bg-white'>
							{{starTimes}}
						</view>
						<view class="cu-tag bg-white">
							<text class='cuIcon-usefullfill rr90 padding-left-xs'></text>
						</view>
					</view>
				</view>
				<view class="text-margin">至</view>
				<view class="cu-capsule-container">
					<view class="cu-capsule round bg-white solid line-gray" @tap="showModal(1)">
						<view class='cu-tag bg-white'>
							{{endTimes}}
						</view>
						<view class="cu-tag bg-white">
							<text class='cuIcon-usefullfill rr90 padding-left-xs'></text>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-xs flex align-center"> 
				<view class="flex-sub text-center padding-top-lg">
					<view class="txet-xxs">
						<text class="text-white">交易金额(元)</text>
					</view>
					<view class=" text-sl padding padding-top-xs"><text class="text-white">￥{{basicData.totalMoney|numberFilter}}</text></view>
				</view>
			</view>
		</view> 
		<view class="   margin-left margin-right to-top"> 
			<view class=" flex  bg-white radius">
				<view class="padding text-center flex-sub"  >
					<text class='text-lg' style="font-size: 30rpx;">交易笔数</text>
					<view class='text-lg' style="font-size: 30rpx;">（笔）</view>
					<view class="padding-sm">
						<text class="oil-main-color  text-lg" style="font-size: 30rpx;">{{basicData.totalCount}}</text>
					</view> 
				</view>
				<view class="padding text-center flex-sub">
					<text class='text-lg' style="font-size: 30rpx;">加油升数</text>
					<view class="text-lg" style="font-size: 30rpx;">（升）</view>
					<view class="padding-sm">
						<text class="oil-main-color text-lg" style="font-size: 30rpx;">{{basicData.totalVolume |numberFilter}}</text>
					</view> 
				</view>
			</view>
			<view class="margin-top-lg ">
				<view class="titleforList margin-bottom-sm">
					<view class="titleforList_left"></view>
					<view class="titleforList_text">
						该时间段订单
					</view>
				</view>
				<view class=" menu-avatar radius">
					<view class="cu-item bg-w padding radius shadow margin-bottom postions" v-for=" (item,i) in OrderList" :key="item.id" v-if="OrderList.length"> 
							<view class="content">
								<view class=" solid-bottom padding-bottom-sm">
									<view class="flex-treble text-lg" @tap="copyId(item.orderSerialNumber)">
										{{item.orderSerialNumber}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red"></text>
									</view> 
								</view>
							<!-- <view class=" text-content text-df">
									<text class="lin-h-2">
										{{item.siteName}}
									</text>
								</view> -->
								<view class="showMoney">
									<view class="text-lg text-red textmony text-bold">
										<text>{{item.sitePriceAmount}}</text>
									</view>
									<view class="flex-sub text-right textIcon cuIcon-right"> 
									</view>
								</view>
								<view class="text-sm " @tap="toDetails(item.id)">
									<view class="flex">
										<view class="details">
											<view class="top1 text-left"> 
												<text class="padding-left-xs padding-right-sm text-lg">
													{{item.oilsCode}}
												</text> 
											</view>
											<view class="bottom text-left margin-top-xs margin-bottom-xs"> 
												<text class="padding-left-xs text-lg">
													<text class=" text-lg " v-if="item.volume">{{item.volume|numberFilter}} {{item.oilProductType=='GAS'?'L':'L'}}</text>
													<!-- {{item.createTime}} -->
												</text>
											</view>
											<view class="bottom text-left"> 
												<text class="padding-left-xs text-lg">
													加油车牌： {{item.plateNumber }}
												</text>
											</view>
										</view>
									</view>
								</view> 
								<view class="margin-top-sm  flex justify-between" @tap="toDetails(item.id)">
									<view class="text-gray text-lg">
										{{item.orderTime||`&nbsp;${item.createTime}`}}
									</view> 
								</view>
							</view>
						</view> 
						<uni-load-more :status="loadStatus"></uni-load-more>
					</view>
					<view class="quexingtu" v-if="OrderList.length<1">
						<!-- <Empty /> -->
						<image src="../../static/img/qslist.png" mode="" style='padding-top: 50rpx; width: 480rpx;height: 490rpx;'></image>
					</view>
			</view>
		</view>
		<u-picker mode="time" v-model="starshow" start-year='2020' :params='params' @confirm='confirmTime'></u-picker>
		<u-picker mode="time" v-model="endshow"  start-year='2020'  :params='params' @confirm='confirmEndTime'></u-picker>
	</view>
</template>

<script>
	import staffApi from '@/packageStaff/api/staff.js'
	import cloudSiteApi from '@/api/cloud-site.js'
	import oliSiteApi from '@/api/oli-site.js'
	import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		data() { 
			return { 
				isLoadMore:false,
				OrderList:[],
				starshow:false,
				endshow:false,
				loadStatus:"loading",
				params:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				types:0,
				starTimes:'2020-10-01 00:00:00',
				endTimes:'2020-10-01 00:00:00',
				mainURL: this.global.mainURL,
				basicData: {
					totalAccount: 0,
					totalAmout: 0,
					totalCount: 0
				},
				TimeList:{
					day:"",
					channelId:uni.getStorageSync('channelId'),
					dateStartTime:"",
					dateEndTime:"",
					currentPage:1,
					pageSize:10,
				},
				currentPage:1,
				scanUrl: '',
				userMenu: uni.getStorageSync('userMenu'),
				loginUser: uni.getStorageSync('loginUser'),
				title: 'Hello',
				cuIconList: [],
				channelId:uni.getStorageSync('channelId')
			};
		},
		onLoad() {
			this.getdayList()
			this.getTime()
			console.log('这里是onload')
			 uni.setStorageSync('orderType', 1)
		},
		onShow() {
			console.log('这里是onshow')
			// this.getYesterday()
			// this.getdayList()
		},
		onPullDownRefresh() {
			// this.getYesterday()
			let _that = this
			this.currentPage = 1
			if(this.types == 0){
				this.getdayList()
			}else if(this.types == 1){
				let data = {
					day:"",
					channelId:uni.getStorageSync('channelId'),
					dateStartTime:_that.starTimes,
					dateEndTime:_that.endTimes ,
					currentPage:this.currentPage,
					pageSize:10
				}
				this.getInfo(data)
			}else{
				let data = {
					day:"",
					channelId:uni.getStorageSync('channelId'),
					dateStartTime:this.starTimes,
					dateEndTime:this.endTimes ,
					currentPage:this.currentPage,
					pageSize:10
				}
				this.getInfo(data)
			}
		},
		filters: {
			// numberFilters(value){
			// 	return value.toFixed(2)
			// },
			numberFilter(value) {
				if (value) {
					// let values = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/))
					let number = (Math.round(value * 100) / 100).toFixed(2)
					return number
				} else {
					return '0.00'
				}
			}
		},
		onReachBottom() { //上拉触底函数
				console.log('触底函数') 
				let _that = this
				console.log(this.types)
				if(this.types == 0){ 
					this.getdayList()
				}else if(this.types == 1){
					let data = {
						day:"",
						channelId:uni.getStorageSync('channelId'),
						dateStartTime:_that.starTimes,
						dateEndTime:_that.endTimes ,
						currentPage:this.currentPage,
						pageSize:10
					}
					this.getInfo(data)
				}else{
					let data = {
						day:"",
						channelId:uni.getStorageSync('channelId'),
						dateStartTime:this.starTimes,
						dateEndTime:this.endTimes ,
						currentPage:this.currentPage,
						pageSize:10
					}
					this.getInfo(data)
				}
		},
		components: {
			UniLoadMore
		},
		methods: {
			getTime(){//获取时间
				let nowDate = new Date();
				 let year = nowDate.getFullYear();
				 let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
				 let day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
				  let hr = nowDate.getHours()
				  let mf = nowDate.getMinutes() < 10 ? '0' + nowDate.getMinutes() : nowDate.getMinutes()
				  let ss =nowDate.getSeconds() < 10 ? '0' + nowDate.getSeconds() :nowDate.getSeconds()
				 this.starTimes = year + "-" + month + "-" + day+" " + '00:00:00';
				 this.endTimes = year + "-" + month + "-" + day+" " +hr+':'+mf+':'+ss
			},
			
			copyId(id) {//复制订单id
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'none'
						})
					}
				})
			},
			toDetails(id) {//前往订单详情
				let orderType = uni.getStorageSync('orderType')
				uni.setStorageSync('orderSource', orderType == 1 ? 'mpxoil' : null)
				console.log(id)
				uni.setStorageSync('orderId', id)
				uni.navigateTo({
					url: '/packageOrders/pages/orderList/OrderDetail/OrderDetail'
				})
			},
			getdayList(){ //获取当天信息
				let data = {
					day:"",
					channelId:uni.getStorageSync('channelId'),
					dateStartTime:'',
					dateEndTime:'',
					currentPage:this.currentPage,
					pageSize:10
				}
				
				this.getInfo(data)
			},
			showModal(n){//显示时间list
				if(n==0){
					this.starshow = true
					console.log('这里是起始时间设置') 
				}else{
					this.endshow = true
					console.log('这里是终点时间设置') 
				}
			},
			getInfo(data){
				if(this.loadStatus == 'loading'){
					oliSiteApi.getRefuelDataByDay(data).then((res)=>{
						// console.log(res)
						if(res.code == 20000){
							this.basicData = res.data.info
							console.log(this.basicData)
							this.OrderList =this.OrderList.concat(res.data.list)  
							 console.log(res.data.list)
							if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.loadStatus = 'nomore'
								console.log('这里是小于10')
							} else {
								console.log('这里是大于于10')
								this.currentPage++
								this.isLoadMore = false
							}
						}
					})
				}else{
					uni.showToast({
						title:'只有这些数据了',
						icon:'none'
					})
				}
			},
			changeInfo(data){
				oliSiteApi.getRefuelDataByDay(data).then((res)=>{
					// console.log(res)
					if(res.code == 20000){
						this.basicData = res.data.info
						this.OrderList =res.data.list
						 console.log(res.data.list)
						if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
							console.log('这里是小于10')
						} else {
							console.log('这里是大于于10')
							this.currentPage++
							this.isLoadMore = false
						}
					}
				})
			},
			confirmEndTime(e){ //获取 赋值 结束时间
				if(this.starTimes == ''){
					uni.showToast({
						title:"请输入开始日期",
						icon:'none'
					})
					return
				}
				this.loadStatus = 'loading'
				this.types = 2
				this.currentPage = 1
				this.endTimes =e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute+":"+e.second 
				let starTime = new Date(this.starTimes.replace(/-/g,"/")),
				endTime = new Date(this.endTimes.replace(/-/g,"/"))
				console.log(starTime)
				console.log(endTime)
				if(endTime < starTime){
					uni.showToast({
						title:"结束时间小于开始时间",
						icon:'none'
					})
					return
				}
				let data = {
					day:"",
					channelId:uni.getStorageSync('channelId'),
					dateStartTime:this.starTimes,
					dateEndTime:this.endTimes ,
					currentPage:this.currentPage,
					pageSize:10
				}
				this.changeInfo(data)
				// oliSiteApi.getRefuelDataByDay(data).then((res)=>{
				// 	this.basicData = res.data.info
				// 	this.OrderList = res.data.list
				// })
			},
			confirmTime(e){ //获取 赋值 开始时间
				let _that =  this 
				_that.starTimes = e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute+":"+e.second 
				if(_that.endTimes == ''){ 
					return
				}
				this.loadStatus = 'loading'
				this.types = 1
				this.currentPage = 1
				let starTime = new Date(_that.starTimes.replace(/-/g,"/")),
				endTime = new Date(_that.endTimes.replace(/-/g,"/")) 
				if(endTime < starTime){
					uni.showToast({
						title:"开始时间大于结束时间",
						icon:'none'
					})
					return
				}
				let data = {
					day:"",
					channelId:uni.getStorageSync('channelId'),
					dateStartTime:_that.starTimes,
					dateEndTime:_that.endTimes ,
					currentPage:this.currentPage,
					pageSize:10
				}
				this.changeInfo(data)
			}, 
			getSiteInfo() { //获取油站信息
				cloudSiteApi.getSiteDetail().then(res => {
					if (res.code === 20000) {
						this.site = res.data.site
						this.oilList = res.data.oil
						uni.setStorage({
							key: 'oilSite',
							data: res.data.site
						})
					}
				})
			},
			// getYesterday() {
			// 	oliSiteApi.getYesterdayOrderInfo(this.channelId).then(res => {
			// 		uni.stopPullDownRefresh()
			// 		if (res.code === 20000) {
			// 			this.basicData = res.data.info
			// 		}
			// 	})
			// },
			scanQr() {
				var that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.setStorageSync('qrCode', res.result)
						uni.navigateTo({
							url: that.scanUrl,
							fail: (err) => {
								console.log(err)
							},
							success: (res) => {
								console.log('chengg', res)
							}
						})
					}
				})
			},
			// 方便开发
			// scanQr() {
			// 	uni.setStorageSync('qrCode', 'XM&1299257961238990848')
			// 	uni.navigateTo({
			// 		url: '/pages/stationDetail/stationDetail',
			// 		fail: (err) => {
			// 			console.log(err)
			// 		},
			// 		success: (res) => {
			// 			console.log('chengg', res)
			// 		}
			// 	})

			// },
			routerTo(url, name) {

				uni.navigateTo({
					url: url
				})
			}
		}
	};
</script>

<style scoped>
	.quexingtu{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.textmony{
		font-size:40rpx;
		margin-right: 30rpx;
	}
	.textIcon{
		font-size: 40rpx;
	}
	.showMoney{
		position: absolute;
		right: 20rpx;
		top: 50%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.postions{
		position: relative;
	}
	.titleforList_left{
		background-color: #FE0505;
		width: 14rpx;
		height: 40rpx;
		margin-right: 9rpx;
	}
	.titleforList_text{
		font-size: 34rpx;
	}
	.titleforList{
		display: flex;
		justify-content: flex-start;
		align-items:flex-end; 
	}
	.text-margin{
		margin: 0 10rpx;
	}
	.dataTimeBox{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	.bottom-bar {
		position: relative;
		padding-top: 50px;
		margin-bottom: 0;
		margin-top: 0;
	}

	.bottom-bar-fixed {
		position: fixed;
		bottom: 0;
		padding-top: 70rpx;
		width: 100%;
	}

	.main-money {
		position: relative;
		z-index: 1;
		height:472rpx ;
	}

	.van-tag {
		display: inline-block;
		padding: 0.3rem 0.4rem;
		position: absolute;
		right: 1px;
		font-size: 12px;
		top: 25%;
		background-color: #b9ffca;
		border-radius: 10rem 0 0 10rem;
		border-color: transparent;
	}

	.bg-main-color {
		min-height: 160rpx;
	}
	.bg-w{
		background-color: #ffff;
	}
	.to-top {
		position: relative;
		top: -140rpx;
		z-index: 1;
	}

	.cu-list {
		position: relative;
		top: -140rpx;
		z-index: 1;
	}

	.cu-list.grid>.cu-item [class*=cuIcon] {
		font-size: 75rpx;
	}

	.cu-avatar {
		background-color: transparent;
	}
</style>